Submitting Form Data Without Reloading Page

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. jQuery code: funct

Solution 1:

Prevent the default action of the form submit.

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

   // Other pieces of code

Solution 2:

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";
        }
    //}