为多个表单动态指定输出ajax成功结果的位置


Specify dynamically where to output ajax success result for multiple forms

我有两个问题:

  1. 如何在同一页面中创建第二个表单,并根据单击的提交按钮使用ajax处理正确的表单?

  2. 现在让我们假设我在同一页中有多个表单。我想根据单击的提交按钮来更改输出的位置。

源代码:

Ajax:

<script type="text/javascript">
    $(document).ready(function(){
        $("#myform").validate({
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('post.php', $("#myform").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
    });
</script>

Html:

<form id="myform" action="" method="POST">
    <input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results"></div> <!-- post.php output goes here.-->
<!-- until here everything is working fine -->
<!-- now if I want to add a second form I don't know what id I should use -->

我会在表单上使用一个类来绑定,然后每个表单都可以有一个元素来保存您选择的输出id-

javascript

<script type="text/javascript">
    $(document).ready(function(){
        $(".myforms").validate({
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('post.php', $(form).serialize(), function(data) {
                    var output = $(form).data('output');
                    $("#"+output).html(data);
                });
            }
        });
    });
</script>

html

<form class="myforms" action="" method="POST" data-output="results1">
    <input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results1"></div>    
<form class="myforms" action="" method="POST" data-output="results2">
    <input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results2"></div>  
<form class="myforms" action="" method="POST" data-output="results3">
    <input type="text" name="a"><input type="submit" value="submit">
</form>
<div id="results3"></div>