convert html input type with same name into key value jquery

Question

I have this form and on addmorefield button click I'm appending two more fields with same name and

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

i'm making post request with DRF api in this format {"first_name":"value","last_name":"value"}. so what i want to achieve here to covert this form input into this format [{"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>

Swati · Accepted Answer · 2020-06-17 09:06:50Z

You can loop through the div which has required inputs , get the value for first_name and last_name and put that in array .

Demo Code :

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

Collectives™ on Stack Overflow

convert html input type with same name into key value jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related