преобразовать html тип ввода с таким же именем в значение ключа jquery - PullRequest
Новая
       6

преобразовать html тип ввода с таким же именем в значение ключа jquery

0 голосов
/ 17 июня 2020

У меня есть эта форма, и при нажатии кнопки 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>

Я делаю почтовый запрос с DRF api в этом формате {"first_name": "value", "last_name": "value"}. Итак, чего я хочу здесь добиться, чтобы скрыть этот ввод формы в этом формате [{"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>

1 Ответ

1 голос
/ 17 июня 2020

Вы можете l oop через 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>
...