Question

我正在创建一个动态表单，用户可以在表单中添加一组输入。 html看起来像这样：

<form>
    <input id="title1" class="title" name="title1"  type="text" value="">
    <input id="productionCompany1" name="productionCompany1" type="text" value="">
    <input id="year1" name="year1" type="text" value="">
    <input id="role1" name="role1" type="text" value="">
<div id="newCredit">&nbsp;</div>
<a href="#" id="addCredit">add another credit</a>
</form>

当用户单击id为“addCredit”的链接时，将调用以下jQuery脚本：

$(document).ready(function() {
    var $ac = $('#addCredit');
    $ac.click(function() { 
/* the following two lines are where the problem lies? */
        var $credInt = $(this).prev(".title"); 
        $.get("addCredit.php", {num: $credInt},
        function(data){
        $('#newCredit').append(data);});
        return false;
    });
});

jQuery函数查询名为“addCredit.php”的php文件，如下所示：

<?php 
$int = $_GET["num"];
$int = substr($int, -1); 
$int++;
?>
<input id="title<?php echo $int;?>"  class="title" name="title<?php echo $int;?>"  type="text" value="">
<input id="productionCompany<?php echo $int;?>" name="productionCompany<?php echo $int;?>" type="text" value="">
<input id="year<?php echo $int;?>" name="year<?php echo $int;?>" type="text" value="">
<input id="role<?php echo $int;?>" name="role<?php echo $int;?>" type="text" value="">

我的问题是正确设置javascript变量$ credInt，以便可以将其发送到addCredit.php页面并相应地更新表单字段。我还需要确保每次附加表单时，发送的下一个值是递增的值。

关于如何实现这一目标的任何想法？谢谢你的帮助。

Answer 1

这是错误的做法; PHP可以处理变量名中的数组语法。这使得处理起来更容易。也无需调用服务器来克隆表单。你应该像这样命名你的字段：

<form>
    <div id="originalCredit">
    <input name="title[]"  type="text" value="">
    <input name="productionCompany[]" type="text" value="">
    <input name="year[]" type="text" value="">
    <input name="role[]" type="text" value="">
    </div>
    <a href="#" id="addCredit">add another credit</a>
</form>

然后你的Javascript就像这样：

$(function() {
    $('#addCredit').click(function() {
        var newCredit = $('#originalCredit').clone(); // create new set
        newCredit.find('input').val(''); // empty input fields
        $(this).before(newCredit); // append at the end
        return false;
    });
});

当表单最终发送到服务器时，因为变量格式为name[] PHP将识别它们是一个数组然后你可以这样做：

<? foreach($_POST['title'] as $k => $v) { ?>
    Title: <?=$_POST['title'][$k]?><br>
    Company: <?=$_POST['productionCompany'][$k]?><br>
    Year: <?=$_POST['year'][$k]?><br>
    Role: <?=$_POST['role'][$k]?><br>
<? } ?>

显然这只是作为一个例子显示，但你可以保存/更新/随之而来。

jQuery：找到表单字段的id

1 个答案: