Question

我最近刚开始使用JQuery和AJAX。我正在练习使用JQuery在表单提交时获取表单值并使用AJAX使用PHP脚本处理数据。这一切都非常好，也就是说，直到我向页面添加另一个表单。无论我提交什么表单，都会提交页面上第一个表单的数据。如何仅从正在提交的表单中选择表单和值？

这是我的代码：

<html>

<head>
<title> JQUERY and AJAX </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<!-- JQUERY script to submit the form without page refresh !-->
<script>
$(document).ready(function() {

    $("form").submit(function() {

        var name = $("input#name").val();

        var dataString = 'name='+ name;
        $.ajax({  
            type: "POST",  
            url: "ajax_submit.php",  
            data: dataString,                       
        }); 

        $("input#name").val("");            

        return false; 

    });
});
</script>

</head>

<body>

<form name="form" action=""/>
    <input type="text" name="name" id="name" autocomplete="off"/>
    <input type="submit" name="submit" id="submit"/>
</form>

<form name="form" action=""/>
    <input type="text" name="name" id="name" autocomplete="off"/>
    <input type="submit" name="submit" id="submit"/>
</form>

</body>

</html>

谢谢！

Answer 1

你知道如何使用css选择器吗？您可以使用css选择器作为jquery选择器。这意味着，如果您为每个表单赋予一个id属性，您可以稍后选择它：

$('#the_forms_id').submit();

其中，表单ID是您为表单选择的html属性，例如

<form name="form" action="" id = "the_forms_id"/>

只需使用php设置不同的表单ID

另外，请注意您几乎可以使用任何您能想到的css选择器，还可以使用jquery特定的选择器。你可以看到它们here。

如果您不知道如何使用基本选择器，请使用this指南。

如果您想选择动态创建的表单（就像您评论的那样），实现取决于添加表单的方式以及需要如何捕获表单。您可以使用php动态地为它们提供不同的ID（例如，使用计数器）。

此外，当存在少量元素时，您可以使用jquery选择器选择第一个或最后一个元素（或任何其他元素）。查看the :last selector：

$('form :last').serialize().submit()

使用JQuery选择正确的元素

1 个答案: