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

Question

这是 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 循环的表单。我想做的是将它们分开提交。知道如何或可以告诉我在哪里可以找到答案吗？

Answer 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/

Answer 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 应该是唯一的。

Answer 3

目前尚不清楚您在哪里遇到问题，但如果您尝试在不离开当前页面的情况下提交它们，您可能正在寻找 jQuery 表单插件。它使提交表单和显示结果变得更加容易，因此您无需像在发布的代码中那样手动执行此操作。