CODEWITHSUNDEEP
phpjavascript
Nathan
Nathan

Reputation: 319

Use Javascript to return as a php variable

I'm not sure if this is possible since javascript is client side and php is server side, but what I have is a series of javascript functions that give a real time total to orders in a form. To clarify that, as the user selects items in the form it gives a total. On submission of the form php is submitting the order to the database. What I need to achieve is a way to submit the total (created by javascript) of the order to the database (via php obv). The javascript function that creates the total is:

function calculateTotal(){
     var Price = getDropPrice() + getverifyPrice() + getmiscPrice();
     var divobj = document.getElementById('totalPrice');
     divobj.style.display='block';
     divobj.innerHTML = "$"+Price;
}

The html where this is produced is pretty simple:

<div id="totalPrice"></div>

If you need me to post the other functions(getDropPrice, getverifyPrice, getmiscPrice) let me know, but basically drop is a drop down, verify and misc are radio buttons, I'm just adding their totals together to get the order total in the function above. My searches on SO and google have only shown me how to get php variables into javascript not the other way around so I certainly hope this can be done. Thanks!

Upvotes: 1

Views: 163

Answers (4)

Bruno Sousa
Bruno Sousa

Reputation: 480

Mix Javascript with PHP:

<?php
$mixit = '<script type="text/javascript">';
$mixit .= 'function calculateTotal() {';
$mixit .= 'var Price = getDropPrice() + getverifyPrice() + getmiscPrice();';
$mixit .= 'var divobj = document.getElementById("totalPrice");';
$mixit .= 'divobj.style.display="block";';
$mixit .= 'divobj.innerHTML = '.$Price.';}';
$mixit .= '</script>';


echo $mixit;

?>

Upvotes: 0

Marcin Orlowski
Marcin Orlowski

Reputation: 75629

Put your total in hidden input field. Then your PHP script will be able to read after the form is submited and do whatever you want.

<input type="hidden" name="hiddenInput" />

and then you get it as usual form $_POST['hiddenInput']; If you got more data to send back that way, you may either add more inputs, or stick to one but pack your all data into JSON and send that way. Once received, you do json_decode() on that field and you got it all back, no matter how many data was sent.

I, however would NOT recommend relying on user side provided data and rather send back which products are selected and calculate totals again, otherwise you may find yourself selling expensive goods for $1 one day :)

Upvotes: 2

Rikki
Rikki

Reputation: 3528

This is why the authors made the "input" element with type of "hidden". Use one of them and set the "value" attribute of the element to the total amount that you want, then post your form to the database and you can simply access the hidden value like the other values on the form.

HTML:

<input type="hidden" id="TotalPrice_Input" />

Javascript:

document.getElementById("TotalPrice_Input").value = Price;

Hope it helps.

Upvotes: 1

toxicate20
toxicate20

Reputation: 5410

What you need is $.ajax from jQuery. This will send a POST request without reloading the page.

Lets say your button is called myButton then for the onClick() event you would call the function

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).success(function( msg ) {
  alert( "Data Saved: " + msg );
});

In your some.php you would then just use $_POST['name'] and $_POST['location'] to retrieve the information.

Suppose you had an input field. You can retrieve information from such a field via jQuery as well. You can just then send the information from the input field via ajax to you php script

$('#yourInputField').val();

where yourInputField is the ID of the input field. With this you can get this information to the script. If you have multiple elements in a form you might want to look at the function serialize(). Does the same thing in principle, just compresses all the information into a JSON string.

Upvotes: 1

Related Questions