Calculate the value using JavaScript and send to PHP [duplicate]

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
– Peter, Commented Sep 26, 2017 at 15:46

ferhado · Accepted Answer · 2017-09-26 15:17:46Z

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>

Javier Elices · Accepted Answer · 2017-09-26 14:32:46Z

1

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.

answered Sep 26, 2017 at 14:32

Javier Elices

2,1742 gold badges18 silver badges25 bronze badges

Comments

Danilo Carrabino · Accepted Answer · 2017-09-26 14:29:27Z

0

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>

answered Sep 26, 2017 at 14:29

Danilo Carrabino

3976 silver badges13 bronze badges

2 Comments

Jimin Ahn Over a year ago

i used form action='php.php' method='post' already haha but is not working ..

Danilo Carrabino Over a year ago

Actually the example I provided works correctly on my pc. Could you please tell me what's the error when you run it?

ErisoHV · Accepted Answer · 2017-09-26 15:23:05Z

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, 2017 at 15:23

answered Sep 26, 2017 at 14:32

ErisoHV

3771 gold badge6 silver badges16 bronze badges

2 Comments

Jimin Ahn Over a year ago

i forgot wrote the <form action=''> here. actually my code already have the form haha..

ErisoHV Over a year ago

Oh.. in that case, I edited my answer

Collectives™ on Stack Overflow

Calculate the value using JavaScript and send to PHP [duplicate]

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Linked

Related