динамически добавлять поля ввода

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 добавляет их динамически или View View показывает только статические элементы. 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/