检索多个 jQuery 将数据附加到 JSON

Question

单击“添加另一个帐户”按钮时，我有一个附加了 jQuery 的输入。因为都是同名的，所以在JSON中只检索到一个结果，就是最后一个结果“3123213”。

我正在尝试从 JSON 中的输入字段中获取所有结果，例如：accountsToLink":[ "3453453453", "3543453453", “5345345345” ] , 但找不到使用 jQuery 追加的方法。

请帮忙！

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

Answer 1

您可以使用 .each 遍历动态生成的输入，然后使用 .push($(this).val()) 在 JSON Array 中添加其值，其中 $(this).val() 是输入框的值.

演示代码 :

$(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>

更新 1 :

因为您需要将此 json 与 formData 合并，您只需在此处进行更改：

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..
}

检索多个 jQuery 将数据附加到 JSON

Retrieve multiple jQuery append data to JSON

javascript

forms

jquery

json

append