Webpage crashing due to jQuery code

Question

This file is named as index.php, this is suppose to get the values of two textboxes and do the calculation. but after clicking on the submit, the code seems to run on infinite loop and crash.

<!DOCTYPE html>
<html>
<head>
<title>Form Calculator</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

function SubmitFormData(){
var first = $("#first").val();
var second = $("#second").val();
$.post("index.php",{first:first,second:second,},
function(data){
$('#results').html(data);
$('#formcal')[0].reset();
});
}

</script>

</head>
<body>
<ul>
  <li><a href="index.php">Calculator</a></li>
  <li><a href="bmi.php">Body Mass Index Calculator</a></li>
</ul>

<h1>Simple Calculator</h1>
<form action="" id="formcal" method="post">

<input type="number" id="first" name="first" placeholder="number"/>
<select name="operator" id="operator">
<option value="add">+</option>
<option value = "subtract">-</option>
<option value = "multiply">*</option>
<option value = "division">/</option>


</select>

<input type="number" id="second" name="second" placeholder="number 2"/>

<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Calculate"/>
</form>




<br>
<?php 
  echo $_POST['first'];
  echo $_POST['second'];

if(!empty($_POST['first']) && !empty($_POST['second'])){
    $number = $_POST['first'];
    $number2 = $_POST['second'];
    $operator = (isset($_GET['operator']) ? $_GET['operator'] : null);



      ini_set('display_errors', 'On');
      error_reporting(E_ALL | E_STRICT);

    echo "Answer:  ";
    //if($_POST['operator'] == 'add'){
    if($operator == 'add'){
      $complete = $number + $number2;

      echo "$number + $number2 = $complete";
    }
    //if($_POST['operator'] == 'subtract'){
    if($operator == 'subtract'){
      $complete = $number - $number2;
      echo "$number - $number2 = $complete";
    }
    //if($_POST['operator'] == 'multiply'){
    if($operator == 'multiply'){
      $complete = $number * $number2;
      echo "$number X  $number2 = $complete";
    }
    //if($_POST['operator'] == 'division'){
    if($operator == 'division'){
      $complete = $number / $number2;
      echo "$number / $number2 = $complete";
    }
  } 
  ?>


<div id="results">

 </div>


</body>
</html>

This file is named as index.php, this is suppose to get the values of two textboxes and do the calculation. but after clicking on the submit, the code seems to run on infinite loop and crash.

you called first firstval and second second. first doesn't exist when you send it to the php script — Nic Robertson, Dec 22 '15 at 01:32
http://chat.stackoverflow.com/rooms/97149/php-mysql-html-css-javascript-jquery — The Beast, Dec 22 '15 at 01:33
$.post("index.php",{first:first,second:second, operator:operator} this line, is outputting the all content twice, is there any way to fix it — Vijay Bhatt, Dec 22 '15 at 01:43
`$.php` is not a function, did you check your javascript console for any erorrs like this? - It's not a function in jQuery. You want to append data to html but you do this by replacing `$('#results').php(data)` with `$('#results').html(data)` — SidOfc, Dec 22 '15 at 01:44
You are passing (-, *, /) to your data. did you checked if they are outputted correctly? Maybe you can better use the values of those options. Can you post your 'index.php' please. I think you are using 'add', 'subtract'....in there. — Franco, Dec 22 '15 at 01:59

score 0 · Answer 1 · answered Dec 22 '15 at 05:18

Try running this code:

<!DOCTYPE html>
<html>
<head>
<title>Form Calculator</title>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>

function SubmitFormData(){

    var first = $("#first").val();
    var second = $("#second").val();
    var operator = $("#operator").val();
    $.post("",{ first:first, second:second, operator:operator},

    function(data){
        $('#results').html(data);
        $('#formcal')[0].reset();
    });
}

</script>

</head>
<body>
<!--
<ul>
  <li><a href="index.php">Calculator</a></li>
  <li><a href="bmi.php">Body Mass Index Calculator</a></li>
</ul>
-->

<h1>Simple Calculator</h1>
<form action="" id="formcal" method="post">

    <input type="number" id="first" name="first" placeholder="number"/>
    <select name="operator" id="operator">
        <option value="add">+</option>
        <option value = "subtract">-</option>
        <option value = "multiply">*</option>
        <option value = "division">/</option>


    </select>

    <input type="number" id="second" name="second" placeholder="number 2"/>

    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Calculate"/>
</form>




<br>
<?php 
  echo $_POST['first']."<br/>";
  echo $_POST['second']."<br/>";
  echo $_POST['operator']."<br/>";

if(!empty($_POST['first']) && !empty($_POST['second'])){
    $number = $_POST['first'];
    $number2 = $_POST['second'];
    $operator = $_POST['operator'];



      ini_set('display_errors', 'On');
      error_reporting(E_ALL | E_STRICT);

    echo "Answer:  ";
    //if($_POST['operator'] == 'add'){
    if($operator == 'add'){
      $complete = $number + $number2;

      echo "$number + $number2 = $complete";
    }
    //if($_POST['operator'] == 'subtract'){
    if($operator == 'subtract'){
      $complete = $number - $number2;
      echo "$number - $number2 = $complete";
    }
    //if($_POST['operator'] == 'multiply'){
    if($operator == 'multiply'){
      $complete = $number * $number2;
      echo "$number X  $number2 = $complete";
    }
    //if($_POST['operator'] == 'division'){
    if($operator == 'division'){
      $complete = $number / $number2;
      echo "$number / $number2 = $complete";
    }
  } 
  ?>


<div id="results">

 </div>


</body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 12:15

Try the following changes in your JavaScript:

function SubmitFormData(){
   var first = $("#first").val();
   var second = $("#second").val();
   var operator = $("#operator").val(); /* you have forgot to post this (operator) value */
   $.post("calculate.php",
       {
        first:first,
        second:second,
        operator: operator
       },
   function(data){
     $('#results').html(data);
     $('#formcal')[0].reset();
   });
}

Do not post to the same page! Instead, create a new file (e.g. calculate.php) and move your php script to it:

<?php 
// calculate.php

if(isset($_POST['first']) && isset($_POST['second'])){
$number = $_POST['first'];
$number2 = $_POST['second'];
$operator = (isset($_POST['operator']) ? $_POST['operator'] : null);



  ini_set('display_errors', 'On');
  error_reporting(E_ALL | E_STRICT);

echo "Answer:  ";
//if($_POST['operator'] == 'add'){
if($operator == 'add'){
  $complete = $number + $number2;

  echo "$number + $number2 = $complete";
}
//if($_POST['operator'] == 'subtract'){
if($operator == 'subtract'){
  $complete = $number - $number2;
  echo "$number - $number2 = $complete";
}
//if($_POST['operator'] == 'multiply'){
if($operator == 'multiply'){
  $complete = $number * $number2;
  echo "$number X  $number2 = $complete";
}
//if($_POST['operator'] == 'division'){
if($operator == 'division'){
  $complete = $number / $number2;
  echo "$number / $number2 = $complete";
}
} 
?>

You are requesting index.php in your original AJAX request from the server. Since the page index.php has other content (HTML), the post request will return back them all with it, AND NOT a single value (the reason you're getting the whole page appended to the existing one when your performing the calculation).

Refer this SO question to know more.

Note: Swap your empty() methods with isset(). Always use isset() to determine whether a variable exists/is set or not.

Also note that since even the operator's value is sent in a POST request, you should be able to access it in the $_POST array.

Webpage crashing due to jQuery code

2 Answers2