从表单添加动态生成的字段

Question

Hi guys i want to dynamically add a group of input fields when a button is pressed. This works with 1 group, but not with more than one. Here is my HTML:

<form action="address.php" method="POST">
    <div id="list">
    <input type="text" name="address" placeholder="Address">
    <input type="text" name="suburb" placeholder="Suburb">
    <input type="text" name="state" placeholder="State">
    <input type="text" name="country" placeholder="Country">
    <button id="addMore">Add Address</button>
    </div>
</form>

I'm calling the addMore function with this javascript:

$(function(){
               $("#addMore").click(function(e){
                  e.preventDefault();
                   $("#list").append("<input type="text" name="address" placeholder="Address"><input type="text" name="suburb" placeholder="Suburb"><input type="text" name="state" placeholder="State"><input type="text" name="country" placeholder="Country"><button id="addMore2">Add Address</button></div>");
               });
            });

I've added a button at the end with an id of addMore2 because i wanna generate a similar set of input controls but with different names. I want to call that id with this function:

$(function(){
               $("#addMore2").click(function(e){
                  e.preventDefault();
                   $("#list").append("<input type="text" name="address2" placeholder="Address"><input type="text" name="suburb2" placeholder="Suburb"><input type="text" name="state2" placeholder="State"><input type="text" name="country2" placeholder="Country"><button id="addMore3">Add Address</button></div>");
               });
            });

... and then another set of controls with the function addMore3. Same as above, but with the number 3. If i use each function alone, it works. But if i try to use all 3 together, it doesn't work. How can i dynamically reproduce a set of input controls with different names?

Answer 1

you could do something like this

$(var count = 0;
           $("#addMore2").click(function(e){
              e.preventDefault();
               $("#list").append("<input type='text' name='address2'"+count+" placeholder="Address"><input type="text" name='suburb2'"+count+" placeholder="Suburb"><input type="text" name='state2'"+count+" placeholder="State"><input type="text" name='country2'"+count+" placeholder="Country"><button id='addMore3'"+count+">Add Address</button></div>");
           count++;
           });
        });

Answer 2

@rayzor

You need to append your code before button

Please use below code:

jQuery("#addMore").click(function(e){                  
    jQuery('<br><input type="text" name="address" placeholder="Address"><input type="text" name="suburb" placeholder="Suburb"><input type="text" name="state" placeholder="State"><input type="text" name="country" placeholder="Country">').insertAfter("input:last");
    return false;
});

And remove code for $("#addMore2").click event

Answer 3

There's no need to add Addmore 2,3,etc manually. the js will add it automatically, as much as your want. Feel free to see this one: https://phppot.com/jquery/jquery-ajax-inline-crud-with-php/