Retrieve multiple jQuery append data to JSON

user_10811858 0
Viewed 171

I have an input that is appended by jQuery when the "Add another account" button is clicked. Because they all have the same name, only one result is retrieved in JSON, which is the last result "3123213".

I'm trying to get all the results from the input field in JSON like : accountsToLink":[ "3453453453", "3543453453", "5345345345" ] , but couldn't find a way to do it with jQuery append.

Please help!

<div class="input-group mb-3 input_fields_wrap">
<input type="text" class="form-control mx-auto" id="inputAccountNumber" name="accountsToLink" placeholder="9102031012" maxlength="10" required>
<div class="input-group-append">
<button class="btn btn-outline-danger" type="button"><strong>x</strong></button>
</div>
</div>
<div class="text-center mt-4">
<button class="btn-outlined add_field_button">Add another account</button>
</div>

<script>
$(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 class="input-group mt-3 additional-acc-number"><input type="text" class="form-control mx-auto" name="accountsToLink" placeholder="9102031012" maxlength="10"><div class="input-group-append"><button class="btn btn-outline-danger remove_field" type="button"><strong>x</strong></button></div></div>'); //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); 
        $(this).parent('div').parent('div').remove(); x--;
    });
</script>

jquery append input

append forms jquery json javascript
1 Answers

You can use .each to loop through your inputs which are generated dynamically and then add its value inside JSON Array using .push($(this).val()) where $(this).val() is value of input box.

Demo Code :

$(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
      //added inputs class inside div
      $(wrapper).append('<div class="input-group mt-3  inputs additional-acc-number"><input type="text" class="form-control mx-auto" name="accountsToLink" placeholder="9102031012" maxlength="10"><div class="input-group-append"><button class="btn btn-outline-danger remove_field" type="button"><strong>x</strong></button></div></div>'); //add input box

    }

  });



  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text

    e.preventDefault();

    $(this).parent('div').parent('div').remove();

    x--;

  });



  $("#sendme").click(function() {
    var acc_main = {} //create object
    acc_main["accountsToLink"] = new Array //create array
    $(".inputs > input[name=accountsToLink] ").each(function() {
      acc_main["accountsToLink"].push($(this).val()) //push value in array
    })
    console.log(JSON.stringify(acc_main))
    //your ajax call here /...

  })

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--added inputs class-->
<div class="input-group mb-3 inputs input_fields_wrap">

  <input type="text" class="form-control mx-auto" id="inputAccountNumber" name="accountsToLink" placeholder="9102031012" maxlength="10" required>

  <div class="input-group-append">

    <button class="btn btn-outline-danger" type="button"><strong>x</strong></button>

  </div>

</div>

<div class="text-center mt-4">

  <button class="btn-outlined add_field_button">Add another account</button>

</div>

<button id="sendme">SEnd me</button>

Update 1 :

As you need to merge this json with the formData you just need to make changes here :

async function postFormDataAsJson({ url, formData }) {
    const plainFormData = Object.fromEntries(formData.entries());
    plainFormData["accountsToLink"] = new Array //create array
    $("input[name=accountsToLink] ").each(function() {
      plainFormData["accountsToLink"].push($(this).val()) //push value in array
    })
    console.log(plainFormData)
    //everthing same..
}
user_106064000
Related