Get javascript values to insert them into mysql database

Question

The following code is used for getting two values from two textboxes , calculate the sum using javascript and display the result in third textbox. When I click the button, I just want these textbox values (both input and result) to be inserted into mysql database. I want to do this in the same page. How can I get the javascript values to php for inserting them into database? It would be great if you could help.

Thanks
Jeny

Code:

<html>
<head>
<script language="javascript">
   function getText3()
   {
      var in1=document.getElementById('in1').value;
      var in2=document.getElementById('in2').value;
      var in3 = parseInt(in1, 10) + parseInt(in2, 10);
      document.getElementById('in3').value=in3;
   }
</script>
</head>
<body>

<form>
   <table width="306" border="0">
  <tr>
    <td width="146">Enter A </td>
    <td width="144"><input name="text" type="text" id="in1"/></td>
  </tr>
  <tr>
    <td>Enter B </td>
    <td><input name="text2" type="text" id="in2"/></td>
  </tr>
  <tr>
    <td height="41" colspan="2">   <center>
      <button type="button" onclick="getText3()"> Get calculated result</button></center>                        </td>
    </tr>
  <tr>
    <td><strong>RESULT</strong></td>
    <td><input name="text3" type="text" id="in3"/></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

Have you heard about Ajax+jQuery? http://stackoverflow.com/questions/5143191/inserting-into-mysql-from-php-jquery-ajax — iLaYa ツ, Jul 26 '13 at 04:52
You want the Values when the form is submitted rite? there use Hidden Input values for submitting it! — DonOfDen, Jul 26 '13 at 04:55
Don't use the example of the hidden values in the form. Just do an AJAX post to the server using the values you have programmatically received from Javascript. Like in Tim's example. — Sean Cox, Jul 26 '13 at 04:59

Tim Baas · Answer 1 · 2013-07-26T08:39:24.223

4

For this you should use jQuery (http://jquery.com/)

Just send them to your php file like the following:

// JS:
var in1 = $('#in1').val();
var in2 = $('#in2').val();
var in3 = parseInt(in1, 10) + parseInt(in2, 10);

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

$.post('file.php', { one: in1, two: in2, three: in3 }, function(data) {
    alert( data );
} )

PHP file get's them as normal POST params:

// file.php
echo $_POST['one'] . " + " . $_POST['two'] . " = " . $_POST['three'];

edited Jul 26 '13 at 08:39

answered Jul 26 '13 at 04:56

Tim Baas

6,035
5
45
72

The only thing I would add to this is to calculate the third value (as specified in the question). You could do this by declaring var in3= in1+in2 and then add that to your data object {...., three:in3} in the AJAX post call. The only question I have is why would you want to store the addition result in the database. It makes no sense. Why store it in a database when it can be easily calculated? – Sean Cox Jul 26 '13 at 05:03
You're right, I added it to my question.. The question 'why' is always difficult, I just like to think of it as people playing around to learn. – Tim Baas Jul 26 '13 at 05:11
@Tim I'm just curious as to why you suggested to use jQuery for the `$.post`, but didn't use jQuery for the variables, eg `var in1 = $('#in1').val();` . Just curious if there was a particular reason? – James Jul 26 '13 at 06:01
The first lines were copied from the question. ;) I would just use jQuery for that.. -updated.. – Tim Baas Jul 26 '13 at 08:38

score 1 · Answer 2 · answered Jul 26 '13 at 05:14

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script language="javascript">
   function getText3()
   {
      var in1=document.getElementById('in1').value;
      var in2=document.getElementById('in2').value;
      var in3 = parseInt(in1, 10) + parseInt(in2, 10);
      document.getElementById('in3').value=in3;
    $.ajax({
        type: "POST",
        url: "your_php_file_path.php",//you can get this values from php using $_POST['n1'], $_POST['n2'] and $_POST['add']
        data: { n1: in1, n2: in2, add: in3 }
    }).done(function( msg ) {
          alert( "Data Saved: " + msg );
        });
   }
</script>

score 0 · Answer 3 · answered Jul 26 '13 at 04:58

You can Pass the JavaScript Values to a HIDDEN Value in FORM and then POST the form to the PHP Page. Below is an example of how to set hidden value.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script type="text/javascript">
        function setPrice(el){
          var prices=[30, 20, 10];
          var p=el.options.selectedIndex;
          el.form.elements['price'].value=prices[p];
        }
      </script>
      </head>
      <body>
        <form>
          <select name="category" onchange="setPrice(this);">
            <option value="men">
              Men
            </option>
            <option value="women">
              Women
            </option>
            <option value="under18">
              Under 18's
            </option>
          </select>
          <input name="price" type="hidden" value="30">
        </form>
      </body>
</html>

Hope this will help you!

Get javascript values to insert them into mysql database

3 Answers3