CODEWITHSUNDEEP
javascriptphpjqueryhtml
Erin Campbell
Erin Campbell

Reputation: 15

Automatically updating a PHP variable when a radio button or dropdown menu item is selected

My classmates and I are building a small submission form in which a user submits shipping and billing information for their order.

The two main factors that effect the order price are the type of shipping the user selects ( $shippingType ) and the price of the item ( $initialPrice ). The variable $totalPrice is then defined which adds $shippingPrice and $initialPrice.

What we are working towards is having $totalPrice update when $shippingPrice is changed without the user having to resubmit the form. Can this be solved using php? Or would we have to use a jquery event to update the page in realtime.

Upvotes: 1

Views: 103

Answers (2)

acupofjose
acupofjose

Reputation: 2159

You'll want to use some sort of jQuery as mentioned above. It's important to understand that PHP is only used either in AJAX, or before the page has loaded. Meaning you cannot use PHP on a page that has already been loaded. To change elements after it's loaded you would need to use javascript/jquery of some sort. I've attached a quick fiddle to illustrate an example of what I think you're looking for.

The gist of it is that you would bind a change event so that when the elements you want to use for mathing are changed you can update the other items. 

$('#shipping').bind('focus, change', function() {
    //Get the inital value of the #cost input
    var initial_val = parseInt($("#cost").val());

    //Value from the #shipping input
    var additional  = parseInt($("#shipping").val());

    //Parsed ints because '+' is used for concatination as well, so making the vars ints will make '+' go back to math.
    $("#cost").val(initial_val + additional);
});

No it's not the prettiest, but it works.

Here's the Fiddle: http://jsfiddle.net/Lb486ck8/2/

Upvotes: 3

haliphax
haliphax

Reputation: 393

You will have to use Javascript to accomplish this behavior. Furthermore, you will need to use AJAX (Asynchronous Javascript And XML) to make it work. AJAX is a way for Javascript to send requests to a web page "behind the scenes" while your page stays in the foreground.

http://api.jquery.com/jQuery.post/

Upvotes: 0

Related Questions