AJAX checkboxes with Jquery and PHP

Question

I have two rows of check-boxes. When a user clicks on any individual check-box (in a certain row) I want to add a number to my sum in PHP. If he deselects an individual check-box I want to subtract from the total in real time without page refresh. My question what goes in the data field on my AJAX call?

and is this the correct way to do it ?

HTML

<input type="checkbox" name="standard_form[]" value="A" onclick="processForm()">
<input type="checkbox" name="premium_form[]" value="B" onclick="processForm()">

JQUERY

<script type="text/javascript">
function processForm() { 
        $.ajax( {
            type: 'POST',
            url: 'submit_form.php',
            data: '',

            success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>

PHP

    if(IsChecked('standard_form','A'))
    {
      $price += IsChecked('standard_form','A') ? 10 : 0;
    }
   return $price ;

Is there a reason the calculation is done through an AJAX call to PHP and not in the Javascript? — TheZ, Nov 13 '12 at 17:11
@theZ because I don't want the calculation to be done on client-side, in-case the users can modify the "value" — Edward, Nov 13 '12 at 17:13
@Edward Well, they can still change the values if they are coming back and being inserted into the DOM. You aren't saving the calculation serverside nor is it tied to a user so it is being lost anyways. A client could even override processForm if they wanted. Client side stuff will always be malleable for a client. Going through a server for stability is pointless if you then return to the client. — TheZ, Nov 13 '12 at 17:17
@theZ if that's the case I will keep the calculation server-side. can I do this calculation in PHP asynchronously or do I still need to use Javascript? — Edward, Nov 13 '12 at 17:23

score 2 · Accepted Answer · answered Nov 13 '12 at 17:17

Try:

<script type="text/javascript">
 function processForm() { 
    $.ajax( {
        type: 'POST',
        url: 'submit_form.php',
        data: { checked_box : $('input:checkbox:checked').val()},

        success: function(data) {
            $('#message').html(data);
        }
    } );
}
</script>

score 1 · Answer 2 · edited May 23 '17 at 12:18

You have to serialize the form into a JS object, that's what goes into the data field. Here's a simple serialize function, that could be improved, but will give you an idea

function serializeForm(form) {
    var obj = {};
    for (var i = 0; i < form.elements.length; i++) {
        var el = form.elements[i];
        if (el.name) {
            if (obj[el.name] && obj[el.name].constructor == Array ) {
               obj[el.name].push(el.value);              
            } else if (obj[el.name]) {
               obj[el.name] = [obj[el.name], el.value];
            } else {
               obj[el.name] = el.value;
            }
        }
    }
    return obj; 
}

There is a plugin that lets you submit forms with AJAX easily http://jquery.malsup.com/form/ See jQuery AJAX submit form

Assuming the following HTML

<form id="myForm" action="submit_form.php" method="post"> 
  <input type="checkbox" name="standard_form[]" value="A" onclick="processForm()">
  <input type="checkbox" name="premium_form[]" value="B" onclick="processForm()">
</form>

You can just do the following to have the form posted with AJAX

// attach handler to form's submit event 
$('#myForm').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

CoursesWeb · Answer 3 · 2012-11-13T17:28:45.533

0

In checkboxes try onclick="processForm(this)", then, in JavaScript:

<script type="text/javascript">
function processForm(elm) { 
        $.ajax( {
            type: 'POST',
            url: 'submit_form.php',
            data: elm.name+'='+elm.value,

            success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>

edited Nov 13 '12 at 17:28

answered Nov 13 '12 at 17:15

CoursesWeb

3,828
3
17
23

You need to give the data a name, so that it will be accessible using `$_POST['name']` in PHP. – Barmar Nov 13 '12 at 17:20

AJAX checkboxes with Jquery and PHP

HTML

JQUERY

PHP

3 Answers3

Linked