How to get jQuery AJAX to post .map function var value as JSON string

Question

In example of option A below, the PHP script post result stated undefined when echo the post data. But at the same time the console.log displays: [Object { set_capture="resize", set_unknown="unknown"}] . I would like to know What is wrong with the .map function or the ajax code in option A ? For option B, it works well after removing the .map function. What am I missing ?

HTML Form:

<form action="myphp.php" method="post" name="form-foo">
    <input type="radio" id="r1" class="set-img" name="set_capture" value="resize" />
    <input type="radio" id="r2" class="set-img" name="set_capture" value="original" />
    <input type="checkbox" id="r3" class="set-img" name="set_unknown" value="unknown" />
    <input type="submit" id="submit" name="submit" value="Save" />
</form>

Option A:

$(function() {
  $("#submit").on("click", function() {
    var radioValues = $('#form-foo').map(function() {
      return {
        set_capture: $('input[name="set_capture"]:checked').val(),
        set_unknown: $('input[name="set_unknown"]:checked').val()
      };
    }).get();
    console.log(radioValues);
    //var formData = JSON.stringify(radioValues);
    var formData = radioValues;
    var formURL = $("#form-foo").attr("action");
    console.log(formData);
    $.ajax({
      url: formURL,
      type: "POST",
      data: formData,
      cache: false,
      dataType: "json"
    }).done(function(data) {
      // more codes
    }, "json");
    return false;
  });
});

Option B:

$(function() {
  $("#submit").on("click", function() {
    var capture = $('input[name="set_capture"]:checked').val();
    var unknown = $('input[name="set_unknown"]:checked').val();
    var formData = {
      set_capture: capture,
      set_unknown: unknown
    };
    var formURL = $("#form-foo").attr("action");
    console.log(formData);
    $.ajax({
      url: formURL,
      type: "POST",
      data: formData,
      cache: false,
      dataType: "json"
    }).done(function(data) {
      // more codes
    }, "json");
    return false;
  });
});

Answer 1

.map is always return as array .Ajax data format is object {} So it will get undefined in your POST. To solve that you need to add index 0 of formdata

$.ajax({
      url: formURL,
      type: "POST",
      data: formData[0], //here add index 0 
      cache: false,
      dataType: "json"
    }).done(function(data) {
      // more codes
    }, "json");
    return false;
  });

Note : data is never pass undefined value to server post ,so if you didn't check your input or checkbox,It will post nothing...

Answer 2

Ajax data must is array. EX:{"capture":123, "unknow":456}.

With Option A : formData is [Object] not array, so it not working.

With my knowledge, sorry if this wrong!