Submitting form data without reloading page

Question

I am trying to submit the form without reloading the page itself using the jQuery, but the data is not showing up and the form is reloading, which is not needed.

Answer 1

You can use the onsubmit event on the form itself.

<form action="" id="formcal" method="post" onsubmit="return SubmitFormData();">

<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="submit" id="submitFormData"  value="Calculate"/>
</form>
<script>
  function SubmitFormData(){
alert("triggered submit function");
return false;

}
  </script>
<br>
<?php //if(!empty($_POST['first']) && !empty($_POST['second'])){
        $number = $_POST['first'];
        $number2 = $_POST['second'];

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

Answer 2

Prevent the default action of the form submit.

function submitFormData(event) {
   // prevent the default action
   event.preventDefault();

   // Other pieces of code