Submitting form with multiple fields via ajax - how to format the data into JSON?

Question

I have a form with multiple data entries. Ajax (at the bottom) requires the data that is being passed to it to be bundled together. How do I take the un-submitted text in my form fields and bundle it into a JSON object to be sent to my Ajax?

 <div id="editUserPinForm" class="ui raised segment signin">
  <div class="cmborder">
    <div class="form_heading">Edit Your Pin</div>
    <form>
      <div class="ui form attached fluid segment">
        <div class="two fields">
          <div class="field">
            <label>Title</label>
            <input type="text" name="pin[title]" class="ui input" value="{{pin/title}}">
          </div>
          <div class="field">
            <label>Activity</label>
            <input type="text" name="pin[activity]" class="ui input" value="{{pin/activity}}">
          </div>
        </div>
        <div class="field">
          <label>Description</label>
          <textarea name="pin[description]" class="ui input">{{pin/description}}</textarea>
        </div>
        <div class="inline field">
          <input type="hidden" name="pin[guideID]" value="{{pin/guide_id}}">
        </div>
        <div class="inline field">
          <input type="hidden" name="pin[lat]" value="{{pin/lat}}">
        </div>
        <div class="inline field">
          <input type="hidden" name="pin[long]" value="{{pin/long}}">
        </div>
        <div class="inline field">
          <input type="submit" value="Submit Changes" class="ui blue submit button">
        </div>
      </div>
    </form>
  <span class='close_message' id="messageclose">&times;</span>
  </div>
</div>

<script>

  $( "#messageclose" ).on("click", function() {
      $('#editUserPinForm').fadeOut();
    });

  $("#editUserPinForm").submit(function() {
      $.ajax({
           type: "PATCH",
           url: "api/pins/{{pin/id}}",
           contentType: 'application/json',
           dataType: 'json',
           data: JSON.stringify( {pin:{description:value}})
           }).success: function(response){
               alert(response); //response from server.
           };
      });


</script>

Duplicate http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery — Leon, Apr 27 '14 at 16:29
How does it know to put the filled out form fields into an array or a JSON object? Don't I have to grab each of the values of pin[title], pin[activity], etc and bundle them all up into a JSON object? — fuzzybabybunny, Apr 27 '14 at 17:19
Oh I see. So inside of a form there are fields with "name=" The serialize method will automatically go through the form and grab the values of the things with "name=" and bundle it together. From there you can find other ways to convert the bundle into JSON. Does this sound right? — fuzzybabybunny, Apr 27 '14 at 17:29
So I use serializeArray() to take the form data and turn it into an array. And then I have to apply JSON.stringify(myNewArray) to turn *that* into a JSON object? — fuzzybabybunny, Apr 27 '14 at 17:37

score 0 · Accepted Answer · answered Apr 28 '14 at 14:49

I used jQuery Serialize instead and it worked like a charm.

https://github.com/macek/jquery-serialize-object

The problem with

JSON.stringify($(this).serializeArray());

is that it converts an array into a JSON, but the array adds a "Name" and "Value" that makes the resultant JSON really hard to use.

score 0 · Answer 2 · answered Apr 28 '14 at 15:00

You could use the internal jQuery $('#domNode').serializeArray() which will return an array of all the inputs in an array of objects. It follows the W3C pattern for returning the valid inputs for successful controls, meaning it will not return disabled controls.

Ref:
https://api.jquery.com/serializeArray/
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

score 0 · Answer 3 · answered Dec 19 '14 at 22:42

In order to send the form as a json string. You have to create an array with inputs names and values pairs, by gathering every input name and value to associate them in an array of objects containing the name and value pair :

$("#editUserPinForm").submit(function() {
jQuery("#editUserPinForm").find("input").each( function()
{

var form_data = new Array(); // The array that'll contain inputs names and values
form_data.push( { $(this).attr('name') : $(this).val() } );
var form_jsoned = JSON.stringify(form_data);

// Then here you can call ajax and send the json data
$.ajax({
       type: "PATCH",
       url: "api/pins/{{pin/id}}",
       contentType: 'application/json',
       dataType: 'json',
       data: form_jsoned
       }).success: function(response){
           alert(response); //response from server.
       };
}
}

Submitting form with multiple fields via ajax - how to format the data into JSON?

3 Answers3