Passing checkbox values as JSON in Jquery

Question

I have an input form which has three text fields and a checkbox input section where the user can select more than one value. I also have an ajax request which sends a POST request to an api. I have written a function to iterate over the form inputs and parse them to JSON, however, it has come to my attention that this wont work for checkbox values. Here is my function:

<script>
console.log(document);
var form = document.getElementById("myform");

form.onsubmit = function (e) {
    // stop the regular form submission
    e.preventDefault();

    // collect the form data while iterating over the inputs
    var info = {};
    for (var i = 0, ii = form.length; i < ii; ++i) {
        var input = form[i];
        if (input.name) {
            info[input.name] = input.value;
        }
        addPerson(info);
    }
}

function addPerson(info) {
    $.ajax({
        type: "POST",
        url: "http://example.com",
        data: JSON.stringify(info),
        contentType: "application/json; charset=utf-8",
        crossDomain: true,
        dataType: "json",

        success: function (data, status, jqXHR) {
            alert("success");
        },

        error: function (jqXHR, status) {
            // error handler
            console.log(jqXHR);
        }
    });
}
</script>

I've been trying to get the checkbox values into JSON using

$.each($('input[id="data[i].id"]:checked'), function() {
    var value = $(this).val();
    qualifications.push(value);
});

but I cant figure out how to add these values to the JSON that is being posted to the server, can anyone help?

I don't see why checkboxes should be a problem, they have a value property just like any other form element. — Johan
– Johan, Commented Nov 26, 2013 at 14:02
@Johan, how will the function know if the checkboxes have been checked? — bookthief
– bookthief, Commented Nov 26, 2013 at 14:03
@DrixsonOseña, unfortunately I'm a complete beginner with JSON and Jquery so what I have attempted is the result of extensive googling, can you explain what .serialize() does? — bookthief
– bookthief, Commented Nov 26, 2013 at 14:04

bookthief · Accepted Answer · 2013-11-26 15:08:06Z

4

Have tried .serialize() and I THINK it is working-

<script>

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('myform').submit(function() {
        $('#result').text(JSON.stringify($('myform').serializeObject()));
        return false;
    });
});


function addPerson(result){
  $.ajax({
         type: "POST",
         url: "http://example.com",
         data: JSON.stringify(result),
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",

         success: function (data, status, jqXHR) {

             alert("success");
         },

         error: function (jqXHR, status) {
             // error handler
             console.log(jqXHR);

         }
      });
  }




</script>

If anyone has thoughts/ comments as to how effective the above is, or if there is a better way of doing it, I would like to hear them?

answered Nov 26, 2013 at 15:08

bookthief

2,4618 gold badges43 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Berkay Tutal Over a year ago

I've tried nearly 4 hours of googling results and only this worked straight! thank you for the good explanation and nicely done job :)

karaxuna · Accepted Answer · 2013-11-26 14:22:54Z

1

Try this:

var input = form[i];
if (input.name) {
    if(input.tagName.toLowerCase() === 'input' && 
       (input.type.toLowerCase() === 'checkbox' || input.type.toLowerCase() === 'radio') &&
       input.checked)
         info[input.name] = input.value;
    else
       info[input.name] = input.value;
}
addPerson(info);

EDIT:

I suggest using jQuery form.serialize() method as @Drixson Oseña mentioned.

edited Nov 26, 2013 at 14:22

answered Nov 26, 2013 at 14:04

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

2 Comments

bookthief Over a year ago

Thanks, will this take both the textbox values and the checkbox values?

karaxuna Over a year ago

<textarea> element's tagName is 'textarea'

Collectives™ on Stack Overflow

Passing checkbox values as JSON in Jquery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related