如何从动态字段发送 POST 请求？

Question

I'm creating a quiz form to pass into a JSON file, but I'm having trouble sending the POST requests. I'm not sure which fields I can access, or how.

This is the form: https://i.imgur.com/6xtmt3a.png

<script>


    // input field
    $(document).ready(function() {
    var wrapper = $(".div1");
    var newbutton = $(".add_form_field");

    var fields = 1;
    $(newbutton).click(function(e) {
        e.preventDefault();
        $(wrapper).append(' <div class="input-group">    <input type="text" value = "Question"  class="form-control" placeholder="Recipients username"  <div class="input-group-append" id="button-addon4"><button class="btn btn-outline-secondary" id ="delete" type="button">Delete</button><button class="btn btn-outline-secondary" id ="add" type="button">Add</button></div></div></div>'); //add input box

           //$(wrapper).append('<button type="button" id ="test1" class="btn btn-primary">Primary</button>'); //add input box
           //$(wrapper).append('<div><input type="text" value = "Question"name="mytext[]"/> <a href="#" id="delete">Delete</a> <a href="#" id="add">add</a> </div> '); //add input box
           var d =  $(this).parent('form').serialize();
        console.log(d);
    });
    //delete  buttons
    $(wrapper).on("click", "#delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        fields--;
    })
    // remove div
    $(wrapper).on("click", '#s1', function(e) {
        //$(this).parent('div').parent('div').remove();
        var q=  $(this).parent().serialize();
        console.log(q);
    })

    //add answer
    $(wrapper).on("click", "#add", function(e) {
        e.preventDefault();
        $(this).parent('div').append('\n <div class="input-group flex-nowrap"><div class="input-group-prepend"><span class="input-group-text" id="addon-wrapping">-</span></div><input type="text" class="form-control" placeholder="Answer" aria-label="Username" aria-describedby="addon-wrapping"></div> ' );
        var d =  $(this).parent('form').serialize();
        console.log(d);
        //$(this).parent('div').parent('div').append('<div class="input-group mb-3"><input type="text" class="form-control" placeholder="Recipients username" aria-label="Recipients username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button></div></div>' );
        fields--;
    })
});

$( "#quizForm" ).submit(function( event ) {
  var $form = $( this ),
  path = $form.attr( "action" );

  payload = {"testKey":"test"};
  var posting = $.ajax({
    url: path,
    method: "POST",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data: payload,
    dataType: "application-json",
  });
  console.log(payload);

  posting.done(function() {
    console.log("posted");
  });
});

  </script>

I need to have a JSON file output on submit that contains the questions and answers to each question (right or wrong for now) Thanks!

Answer 1

I would suggest adding an attribute contains the object's key on each question - let's say it will be the "question ID". we will have something like that:

<div class="question-container" question-id="01"></div>

Assuming that answers are an.answer div with an input inside we will have something like that on form submit:

let formObject = new Object();
$('.question-container')
  .each(function () {
    const questionID = this.attr('question-id');
    const answersArray = new Array();
    this.find('.answer input')
      .each(function () { // assuming answer is a div contains an input tag
        answersArray.push(this.value());
      })
    formObject[questionID] = answersArray;
  })
/// here formObject contains the formatted form as json