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
– TheZ, Commented Nov 13, 2012 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
– Edward, Commented Nov 13, 2012 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
– TheZ, Commented Nov 13, 2012 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
– Edward, Commented Nov 13, 2012 at 17:23

Teena Thomas · Accepted Answer · 2012-11-13 17:17:30Z

2

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>

answered Nov 13, 2012 at 17:17

Teena Thomas

5,2091 gold badge15 silver badges17 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:18:42Z

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 · Accepted Answer · 2012-11-13 17:28:45Z

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, 2012 at 17:28

answered Nov 13, 2012 at 17:15

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

1 Comment

Barmar Over a year ago

You need to give the data a name, so that it will be accessible using $_POST['name'] in PHP.

Collectives™ on Stack Overflow

AJAX checkboxes with Jquery and PHP

HTML

JQUERY

PHP

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JQUERY

PHP

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related