Calculate the value using JavaScript and send to PHP

Question

At the moment I am using 3 different pages which are HTML, JavaScript and PHP. I already made the input and I can calculate price * quantity using the JavaScript.

But I have this problem: how can I send the calculated value to a PHP page?

HTML:

number of people:<input id="quantity" name="quantity" size='5'></input>
<br>
<br>
Price:<input type='hidden' id='price' name='price' value='755'></input>
<button type="button" onclick="sum()">calculate</button>
<p id='result' name='result'></p>

JS:

function sum() {
  var quantity = parseInt(document.getElementById('quantity').value);

  var price = parseInt(document.getElementById('price').value);

  var total = price * quantity;

  document.getElementById('result').innerHTML = total;
  document.getElementById('result').value = total;
}

PHP:

<?php
  $total = $_POST['result'];

  echo "price :".$total."<br/>";
?>

I can not get the value. Please help. Thanks.

Paragraphs are not form elements. Assigning a value to a paragraph thus has no effect as far as the form is concerned. — Peter, Sep 26 '17 at 15:46

ferhado · Answer 1 · 2017-09-26T15:17:46.090

Try using a form or Ajax to send requset. Hier is an example:

<?php
if($_POST['result']){
    $total = $_POST['result'];
    echo "price :".$total."<br/>";
}
?>   

number of people: <input id="quantity" name="quantity" size='5'><br><br>            
Price: <input type='hidden' id='price' name='price' value='755'>            
<button type="button" onclick="sum()">calculate</button>            
<p id='result' name='result'></p>
<script>
    function sum() {
        var quantity = parseInt(document.getElementById('quantity').value);
        var price = parseInt(document.getElementById('price').value);
        var total = price * quantity;
        document.getElementById('result').innerHTML=total;
        document.getElementById('result').value=total;
        //Ajax
        var http = new XMLHttpRequest();
        var url ="test2.php" ;
        var params = "result="+total;
        http.open("POST",url, true);
        //Send the proper header information along with the request
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.send(params);
    }
</script>

score 1 · Answer 2 · answered Sep 26 '17 at 14:32

You can store the result in a hidden field of the same form. That way, when the form is sent it will carry your calculation with it. The hidden field will look like:

<input type='hidden' id='result' name='result'></input>

The id part will be used from javascriptto store the calculation:

document.getElementById('result').value=total;

The name part will set the name of the field to be retrieved by your PHP program.

Make sure your HTML has a valid form definition that points to your PHP.

score 0 · Answer 3 · answered Sep 26 '17 at 14:29

Try using a form and an input type hidden (change the php file name from myPhp.php):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
</head>
<body>

<form action="./myPhp.php" method="post">
number of people: <input id="quantity" name="quantity" size='5'></input><br><br>
Price: <input type='hidden' id='price' name='price' value='755'></input>

<button type="button" onclick="sum()">calculate</button>
<input type="hidden" id='result' name="result">
<input type="submit" value="Submit">
</form>

<script>
function sum() {
    var quantity = parseInt(document.getElementById('quantity').value);

    var price = parseInt(document.getElementById('price').value);

    var total = price * quantity;

    document.getElementById('result').innerHTML=total;
    document.getElementById('result').value=total;      
}
</script>

</body>
</html>

i used form action='php.php' method='post' already haha but is not working .. — Jimin Ahn, Sep 26 '17 at 15:09
Actually the example I provided works correctly on my pc. Could you please tell me what's the error when you run it? — Danilo Carrabino, Sep 26 '17 at 15:16

ErisoHV · Answer 4 · 2017-09-26T15:23:05.660

0

Check the links provided by KhorneHoly and Kevin Kloet

According with your code, you forgot the use of the element "form" in your HTML, which will allow you to send the data to the PHP page

EDIT: I agree with Javier Elices, you must add an input in your form element to send that value to the POST page. That input can be hidden, and you can assign the value from your javascript function

edited Sep 26 '17 at 15:23

answered Sep 26 '17 at 14:32

ErisoHV

347
1
3
13

i forgot wrote the
here. actually my code already have the form haha..
– Jimin Ahn Sep 26 '17 at 15:07
Oh.. in that case, I edited my answer – ErisoHV Sep 26 '17 at 15:24

Calculate the value using JavaScript and send to PHP

4 Answers4