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 actionevent.preventDefault();

   // Other pieces of code

Solution 2:

You can use the onsubmit event on the form itself.

<formaction=""id="formcal"method="post"onsubmit="return SubmitFormData();"><inputtype="number"id="first"name="first"placeholder="number"/><selectname="operator"id="operator"><optionvalue="add">+</option><optionvalue = "subtract">-</option><optionvalue = "multiply">*</option><optionvalue = "division">/</option></select><inputtype="number"id="second"name="second"placeholder="number 2"/><inputtype="submit"id="submitFormData"value="Calculate"/></form><script>functionSubmitFormData(){
alert("triggered submit function");
returnfalse;

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