在jquery中创建输入字段的克隆并更新字段ID

时间:2012-04-05 14:59:13

标签: jquery forms input clone

我正在尝试动态添加输入字段,我可以这样做。但我不知道如何在输入字段中添加新名称。我希望它是一个递增的数字。所以第一组输入字段将是input1,并且每个创建的克隆都会增加数字:input1,input2,input3等。有没有人知道我该怎么做呢?这是jsfiddle:http://jsfiddle.net/liveandream/Xs7m8/

这是我的代码:

HTML:

<form action="#" method="post">
<div class="avail">
        <div class="roomType">
          <p>Tipo de Habitación:<br />
        <input type="text" name="roomType" /></p></div>
        <div class="roomType">
          <p><span class="small">Fecha de inicio:</span><br />
        <input type="text" name="Date1" /></p></div>
        <div class="roomType"><p><span class="small">Fecha de Termino:</span><br />
        <input type="text" name="Date2" /></p></div>
        <div class="roomType">
          <p>Tarifa:<br />
        <input type="text" name="roomRate" /></p></div><br clear="all" />
</div>
<input type="submit" value="+" id="copy" />
<input type="submit" value="Add to Database" name="add" />

我的Jquery:

$("#copy").click(function(e) {
       $(".avail").clone().removeAttr('id').insertBefore(this);
       e.preventDefault();
    }); 

提前感谢愿意帮助的人!!

1 个答案:

答案 0 :(得分:0)

(删除了我的初步答案 - 忽略了HTML中的现有ID)

您可以按房间对结果进行分组。

results = {};
$('form').submit(function(e) {
    e.preventDefault(); // prevent automatic submitting

    $('.avail').each(function(index) {
        // Here your have the gather the fields and values in result array;

        results['room'+index] = result; // add array with results of one room to result
    });

    // Post the result
    $.post($(this).attr('action'), results, function(result) {
         // callback
    });
});