将具有相同名称的html输入类型转换为键值jquery

Question

我有这个表单，在 addmorefield 按钮上单击我正在附加两个同名的字段和

<form method="post" id="sampleform" action="#">


<div class="input_fields" style="text-align:center">
<input type="text" name="first_name" id="first_name" placeholder="first name"/>
<input type="text" name="last_name" id="last_name" placeholder="Last Name"/>
<button class="add_button">Add More Fields</button>
<button  type="submit">Submit</button>
</div>

<script>
$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".input_fields"); 
    var add_button      = $(".add_button");

    var x = 1; 
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){ 
            x++;
            $(wrapper).append(
                '<div class="form-group" style="margin-top:5px"><input type="text" name="first_name" placeholder="first name" required/><input type="text" name="last_name" placeholder="last name" required/><a href="#" class="remove_field">Remove</a></div>'
            ); 
        }
    });

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

我正在以这种格式 {"first_name":"value","last_name":"value"} 使用 DRF api 发出 post 请求。所以我想在这里实现将此表单输入转换为这种格式 [{"first_name":"value","last_name":"value"},{"first_name":"value","last_name":"value" }]

    <script>

    $('#sampleform').submit(function(e){
    e.preventDefault();

  var form = $(this);
    $.ajax({
    url:"http://localhost:8000/api/",
    type:"post",
    data: $('#sampleform').serialize(),
    //dataType:'json',
    success: function(data){
        console.log(data)
    },
    });


}); 
    </script>

Answer 1

您可以遍历需要输入的div，获取first_name 和last_name 的值并将其放入数组中。

演示代码：

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields");
  var add_button = $(".add_button");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      //added one extra class values
      $(wrapper).append(
        '<div class="form-group values" style="margin-top:5px"><input type="text" name="first_name" placeholder="first name" required/><input type="text" name="last_name" placeholder="last name" required/><a href="#" class="remove_field">Remove</a></div>'
      );
    }
  });

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

  $('#sampleform').submit(function(e) {
    e.preventDefault();
    var values = new Array();
    //looping through div class=values
    $(".values").each(function() {
      //getting value of inputs
      var first_name = $(this).find("input[name=first_name]").val();
      var last_name = $(this).find("input[name=last_name]").val();
      item = {}
      item["first_name"] = first_name;
      item["last_name"] = last_name; //adding values 
      values.push(item); //adding item to array
    });
    console.log(values)

    $.ajax({
      url: "http://localhost:8000/api/",
      type: "post",
      data: JSON.stringify(values), //pass value to your server
      //dataType:'json',
      success: function(data) {
        console.log(data)
      },
    });


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="sampleform" action="#">


  <div class="input_fields values" style="text-align:center">
    <input type="text" name="first_name" id="first_name" placeholder="first name" />
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" />
    <button class="add_button">Add More Fields</button>
    <button type="submit">Submit</button>
  </div>