动态添加输入字段

Question

以下代码可帮助我添加更多输入字段，但在提交时不会带来所有输入数据记录。请帮忙弄清楚并理解。

$(document).ready(function(){ 
    $("#addmore").click(function(){ 
//  alert(counters); 
     $("li").append("<li><input type='text' id='hd' name='hd' value='heading' onClick='this.select();'> <input type='text' id='amount' name='amount' value='amount' onClick='this.select();'></li>"); 
    }); 

    $("#submit").click(function() { 

     var msg = ''; 
     for(i=1; i<counters; i++){ 
      msg += $('#hd' + i).val() + $('#amount' + i).val(); 
     } 
     alert(msg); 
    }); 
}); 

<button id="addmore">+</button> 
<form method="post"> 
    <ul> 
     <li> 
      <input type="text" id="hd1" name="hd1" value="heading" onClick="this.select();"> 
      <input type="text" id="amount1" name="amount1" value="amount" onClick="this.select();"> 
     </li> 
    </ul> 
<input type="submit" value="Submit" id="submit"> 
</form> 

Answer 1

try 
var nodes = $('#formid input,#formid textarea,#formid select'); 
        for (var i = 0; i < nodes.length; i++) { 

          arr[i].id = nodes[i].id; 
          arr[i].value=nodes[i].value; 
        } 

你甲肝在改编中的所有数据

Answer 2

我想你应该appendli在ul不li

$("#addmore").click(function(){ 
    var i=$('li').length+1; 
    str="<li>"; 
    str+="<input type='text' id='hd"+i+"' name='hd"+i+"' value='heading' onClick='this.select();'>"; 
    str+="<input type='text' id='amount"+i+"' name='amount"+i+"' value='amount' onClick='this.select();'></li>"; 
    $("ul").append(str); 
}); 

$("#submit").click(function() { 
    var msg = ''; 
    for(i=1; i<=$('li').length; i++){ 
     msg += $('#hd' + i).val() + $('#amount' + i).val(); 
    } 
    alert(msg); 
    return false; 
}); 

Answer 3

尝试......

<script type="text/javascript"> 
    var counters = 0; 
    var msg = ''; 

    $(document).ready(function() { 
     counters = 0; 
     $("#addmore").click(function() { 
      counters = counters + 1; 
      $("li").append("<ul><input type='text' id='hd" + counters + "' name='hd' value='heading'>" + 
           "<input type='text' id='amount" + counters + "' name='amount' value='amount'></ul>"); 
     }); 

     $("#submit").click(function() { 
      msg = ''; 
      for (var i = 1; i <= counters; i++) { 
       msg += $('#hd' + i).val() + ' ' + $('#amount' + i).val() + ' '; 
      } 
      alert(msg); 
     }); 
    }); 
</script> 

<div> 
    <input type="button" value="+" id="addmore" /> 
    <form method="post" action=""> 
    <li> 
     <ul> 
     </ul> 
    </li> 
     <input type="submit" value="Submit" id="submit"/> 
    </form> 
</div> 

Answer 4

这里是Working Demo短期和简单的jQuery的东西

要附加文本框使用相同的ID，我建议你不要做呢，反正你对这些值警报消息会是这样的：

$("#submit").click(function() { 
    $('li').find('input').each(function() { 
      alert($(this).val()); 
    }); 
}); 

是的，它不会显示元素，因为jQuery动态添加它们，或者查看源只显示静态元素。 jQuery不会在物理上写入新的元素。它在客户端创建它们。假设，几乎。

但是，你有什么困扰？如果您想通过任何方式查看JavaScript新创建的元素/属性，请使用Firefox并安装名为FireBug的插件。

Answer 5

这里的工作示例，试试这个.......

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script language="javascript"> 
    function deleterow(id){ 
     var to_del='row_id_'+id; 
     $(to_del).destroy(); 
     var count_row = document.getElementById('count_row').value; 
     count_row--; 
     //alert(count_row); 
     document.getElementById('count_row').value = count_row; 
    } 
    function deletefirstrow(first_row) 
    { 
    $(first_row).destroy(); 
    var count_row = document.getElementById('count_row').value; 
    count_row--; 
    //alert(count_row); 
    document.getElementById('count_row').value = count_row; 
    } 
    function addrow() 
    { 
    var div = document.createElement('div'); 
    var count_row = document.getElementById('count_row').value; 
    count_row++; 
    //alert(count_row); 
    document.getElementById('count_row').value = count_row; 
    var content = '<div id="row_id_'+count_row+'"><select id="sweet_type[]" name="sweet_type[]" style="width:112px"><option>select item type</option><option>Besan Ladoo</option><option>Bundi Ladoo</option></select>&nbsp;<select id="order_type[]" name="order_type[]" style="width:123px"><option>select order type</option><option>1 kg</option><option>1/2 kg</option></select>&nbsp;<input type="text" id="quantity[]" name="quantity[]" size="10" value="" class="inputbox" maxlength="100" style="width:50px"/>&nbsp;<label class="button" style="cursor:pointer" onclick="deleterow('+count_row+')">Delete</label></div>'; 
    div.innerHTML = content; 
    var container = document.getElementById('rowcontaniner'); 
    container.appendChild(div); 
    } 
</script> 
<form action="/order-form.html" method="POST" id="submitForm" name="submitForm" class="form-validate" onsubmit="return validate_form()" > 
    <div class="form_div_content " id="vScroll" style="width:790px; height:282px;"> 
    <!-- Form Field Row Start --> 
    <div class="form_row" style="height:280px;"> 
<table> 
    <tr> 
       <td colspan="4"><div id="to_del_firstrow"> 
        <select class="" style="width:112px" id="sweet_type[]" name="sweet_type[]"> 
        <option>select item type</option> 
         <option>Besan Ladoo</option> 
         <option>Bundi Ladoo</option>      
        </select> 
        <select style="width:123px" id="order_type[]" name="order_type[]"> 
         <option>select order type</option> 
         <option>1 kg</option> 
         <option>1/2 kg</option> 
        </select> 
        <input style="width:50px" id="quantity[]" name="quantity[]" size="10" value="" class="inputbox" maxlength="100" type="text"> 
        <input id="price[]" name="price[]" size="10" value="" class="inputbox" maxlength="100" type="hidden"> 
        <input id="total[]" name="total[]" size="10" value="" class="inputbox" maxlength="100" type="hidden"> 
        <label class="button" style="cursor:pointer" onclick="deletefirstrow('to_del_firstrow')">Delete</label> 
        </div> 
        <div id="rowcontaniner"> 
        <div></div> 
        </div> 
        </td> 

    <tr> 
     <td colspan="4"> 
      <div id="add_row_items" class="form_add button" style="padding:0 5px; margin-right:12px;" onClick="addrow()"> 
      <label style="cursor:pointer" for="add"> ADD ITEMS</label> 
      </div> 
     </td> 
    </tr> 
    <input type="hidden" value="0" id="count_row" name="count_row" /> 
</tbody> 
</div> 
</div> 
</form> 
</table> 

Answer 6

$(document).ready(function() { 
      var counter = 1; 
      $("#addmore").click(function() { 
       counter++; 
       var cloneText = $("li").first().clone(); 
       $('li').last().after(cloneText); 
       $(cloneText).find('input').each(function() { 

        $(this).val(''); 
        if($(this).attr('id') == 'hd1') { 
         $(this).attr('id', 'hd'+counter); 
         $(this).attr('name', 'hd'+counter); 
        } else { 
         $(this).attr('id', 'amount'+counter); 
         $(this).attr('name', 'amount'+counter); 
        } 
       }) 
      }); 

      $("#submit").click(function() { 
       $('li').find('input').each(function() { 
         alert($(this).attr('id')+" = "+ $(this).val()); 
       }); 
      }); 
}); 

试试这个上面的代码。此外，请检查http://fiddle.jshell.net/UKXLp/