jquery 中的新功能：如何在 jquery 中单独提交表单？答案

【问题标题】：new in jquery: how can i submit form separatly in jquery?jquery 中的新功能：如何在 jquery 中单独提交表单？
【发布时间】：2011-07-17 19:12:48
【问题描述】：

这是一个标准的 jQuery 表单提交器：

<script>
$(document).ready(function(){  
    $("form#submit").submit(function() {  
        var fname = $('#fname').attr('value');  
        var lname = $('#lname').attr('value');  
        $.ajax({  
            type: "POST",  
            url: "report.php",  
            data: "fname="+ fname +"& lname="+ lname,  
            success: function(){  
                $('form#submit').hide(function(){ 
                    $('div.success').show();
                });    
            }
        });  

        return false;  
    });
}); 
</script>

以下是表格：

<form id="submit" name="submit">
<input id="fname" name="fname" size="20" type="hidden" value="aword">  <font class='black'>report:</font>
<input id="lname" name="lname" size="40" type="text">  
<button id="send">send</button>
</form>

<form id="submittwo" name="submittwo">
<input id="fname" name="fname" size="20" type="hidden" value="anoterword">  <font class='black'>report:</font>
<input id="lname" name="lname" size="40" type="text">  
<button id="send">send</button>
</form>

report.php：

<?php
$fname = htmlspecialchars(trim($_POST['fname']));  
$lname = htmlspecialchars(trim($_POST['lname']));  
$myFile = "reports.txt";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = "\n".$fname."\n";
fwrite($fh, $stringData);
$stringData = $lname."\n";
fwrite($fh, $stringData);
fwrite($fh, $theData);
fclose($fh);
?>

将有更多的表单使用 PHP 循环。我想要做的是分别提交它们。知道如何或能告诉我在哪里可以找到答案吗？

【问题讨论】：

我猜想分别在每个表单上使用submit：|

标签： php jquery forms submit

【解决方案1】：

如果我已经很好地理解了这个问题，这会有所帮助

$('form').submit(function(e){
    e.preventDefault(); // prevent the default behaviour of the form submit

    var fname = $("#fname",this).val(); // get the fname of the submitted form
    var lname = $("#lname",this).val(); // get the lname of the submitted form
    $.ajax({  
            type: "POST",  
            url: "report.php",  
            data: "fname="+ fname +"& lname="+ lname,  
            success: function(){  
                $('form#submit').hide(function(){
                    $('div.success').show();
                });    
            }
        });  
    });

这是一个小提琴http://jsfiddle.net/fG8T3/

【讨论】：

【解决方案2】：

您可以只使用一种形式，但更改字段名称

<form id="submit" name="submit">
   <input id="fname" name="fname[]" size="20" type="hidden" value="aword">  
   <input id="lname" name="lname[]" size="40" type="text">

   <input id="fname" name="fname[]" size="20" type="hidden" value="anoterword"> 
   <input id="lname" name="lname[]" size="40" type="text">
   <input type="submit" value="send" />
</form>

现在您可以将 GET 数据作为数组进行迭代：

foreach ($_GET['fname'] as $index => $value)
{
   echo $_GET['fname'][$index].' '.$_GET['lname'][$index];
}

注意：ID 应该是唯一的。

【讨论】：

【解决方案3】：

不是很清楚问题出在哪里，但如果您尝试在不离开当前页面的情况下提交它们，您可能正在寻找jQuery Form plugin。它使提交表单和显示结果变得更容易一些，因此您不会像在发布的代码中那样手动执行此操作。

【讨论】：