how to generate dynamic input and get the value by id using jquery

Question

Actually i have a form where i enter name ,html page name in a input box and save it to the database. Here i got some issues

1. i am able generate input box but how to get the value of that input box ?

2. how to get the dynamic values of the input box which was entered in dynamic boxes and send it to post request as i know how to send a static input box value request for multiple how can we send it .

here is what below is my code

    <div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>



 $(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('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

i thins above i can generate dynamic input box and can remove it but unable to get values so how can generate by using id and post all dynamically generated values to the database

Answer 1

You can use the jquery #map() function like this:

var list = wrapper.find('input').map(function() {
  return $(this).val();
}).get();

when you want to submit the list of values to the send to the server - see demo below:

 $(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('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }); /* ADDED THIS */ $('.submit').click(function() { var list = wrapper.find('input').map(function() { return $(this).val(); }).get(); // send to server here console.log(list); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input_fields_wrap"> <button class="add_field_button">Add More Fields</button> <div><input type="text" name="mytext[]"></div> </div> <button class="submit">Submit</button> 

Answer 2

Yea can try something like this

var inputField = $('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>');
$(wrapper).append(inputField);

Then you can attach an event to that variable.

inputField.on('change', 'input', function() {
    var value = $(this).val();
    console.log(value);
});

Hope this helps you :)

Answer 3

Another way, add the following button the form:

<button class="getValue">Get Field Values</button>

Add the below button click event in JS on load:

$(getValue).click(function (e) {
   e.preventDefault();
   let fieldValues = "";
   $("input").each(function(i,e){
     fieldValues = fieldValues == "" ? $(e).val() : fieldValues + ", " + $(e).val();
   })
   alert(fieldValues);
});