Question

我有这个HTML的脚本。我想创建一个动态表单，我可以添加新的输入。这个脚本可以工作，但是我需要在输入中添加一个数字，以识别像width1，width2 ...和一个隐藏字段，其中包含我为传递给php而创建的输入总数。我怎么能这样做？

＆＃13;

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<input type="text" name="width">');
        }
    });

＆＃13;

<form method="post">
	
<div class="input_fields_wrap">
    <button class="add_field_button">Add other</button>
    <input type="text" name="width"><br><br>
</div>

<input type="submit" name="send" value="Generate">

</form>

＆＃13;

Answer 1

您可以将id属性设置为唯一，并使name字段将多个值作为数组而不是一个值。见下面的例子：

＆＃13;

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<input type="text" name="width[]" id="width'+x+'">');
        }
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
	
<div class="input_fields_wrap">
    <button class="add_field_button">Add other</button>
    <input type="text" name="width[]"><br><br>
</div>

<input type="submit" name="send" value="Generate">

</form>

＆＃13;

连接自动增量值jQuery

1 个答案: