CODEWITHSUNDEEP
javascriptjqueryhtmlarraysjquery-selectors
Shyam Nair
Shyam Nair

Reputation: 159

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

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

Upvotes: 1

Views: 5680

Answers (3)

Phani Kumar M
Phani Kumar M

Reputation: 4590

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);
});

Upvotes: 1

Nicolay Hekkens
Nicolay Hekkens

Reputation: 530

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 :)

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 4

Related Questions