Using AJAX to post checkbox list without submit button

Question

I have a list of checkboxes, and want to submit the value of the checkbox when it is checked to PHP. I would prefer not to have a submit button, and rather post the value each time a checkbox is checked, so that the form does not refresh and clear the checked checkbox. However, each time I click one of the checkboxes, nothing happens.

Here is the HTML:

<form method="post" action="this.form.submit();" name="form1">
        <input type="checkbox" name="checkboxList[]" onclick="function1();" value="1">value1</input>
        <input type="checkbox" name="checkboxList[]" onclick="function1();" value="2">value2</input>
        <input type="checkbox" name="checkboxList[]" onclick="function1();" value="3">value3</input>
</form>

Here is the JQuery:

function function1() {
    var data = $("form1").serialize();
    $.ajax({
        url: "test.php", 
        type: "POST",
        async: true,
        cache: false,
        data: data, 
        success: function(data){ 
            alert(data) 
        }
    });
}

Edit: Sorry, forgot to mention that I have included the JQuery library.

And "test.php":

print_r($_POST);

Have you used the browsers javascript debugger (F12) to see what does happen? — RiggsFolly
– RiggsFolly, Commented Sep 18, 2016 at 20:36
You haven't added the jQuery Library it seems. Put this in your code at the top: <script src="https://code.jquery.com/jquery-1.12.4.js"></script> — Howzieky
– Howzieky, Commented Sep 18, 2016 at 20:39

Howzieky · Accepted Answer · 2016-09-18 20:47:36Z

1

Instead of var data = $("form1").serialize(); you should use var data = $("[name='form1']").serialize(). Using a plain string like that won't find you anything. You must specify that you want the element with the name, 'form1'

answered Sep 18, 2016 at 20:47

Howzieky

8297 silver badges18 bronze badges

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

Comments

Daniela · Accepted Answer · 2016-09-18 20:38:34Z

0

You need to use onchange event not onclick event https://api.jquery.com/change/

answered Sep 18, 2016 at 20:38

Daniela

3762 silver badges15 bronze badges

2 Comments

Howzieky Over a year ago

onclick is successfully calling function1()

Daniela Over a year ago

that may well be the case, but for the submission, you need the change event. see below, Kostandy did it for you.

dmand · Accepted Answer · 2016-09-18 20:42:13Z

-1

Try this:

<form method="post" name="form1">
        <input type="checkbox" name="checkboxList[]" value="1">value1</input>
        <input type="checkbox" name="checkboxList[]" value="2">value2</input>
        <input type="checkbox" name="checkboxList[]" value="3">value3</input>
</form>

JQuery:

$("input[type=checkbox]").on("change", function() {
    var data = $("form1").serialize();
    $.ajax({
        url: "test.php", 
        type: "POST",
        async: true,
        cache: false,
        data: ({data: data}),
        dataType: "text", 
        success: function(data){ 
            alert(data) 
        }
    });
});

answered Sep 18, 2016 at 20:42

dmand

998 bronze badges

1 Comment

RiggsFolly Over a year ago

Why should the OP "use this code"? A good answer will always have an explanation of what was done and why it was done that way, not only for the OP but for future visitors to SO that may find this question and be reading your answer.

Collectives™ on Stack Overflow

Using AJAX to post checkbox list without submit button

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related