提交表單數據而不重新加載頁面

Question

我想提交表單而不使用jQuery重新加載頁面本身，但數據沒有顯示出來，表單正在重新加載，這是不需要的。

jQuery代碼：

function submitFormData() { 
var firstval = $("#first").val(); 
var second = $("#second").val(); 
//var operator = $("#myselect option:selected").text(); 
$.post("index.php",{first:first,second:second}, 
function(data){ 
    $('#results').html(data); 
    $('#formcal')[0].reset(); 
}); 
} 

這是HTML代碼在同一頁（的index.php）：

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

<div id="results"> 
</div> 

Answer 1

防止形式的默認操作提交。

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

    // Other pieces of code 

Answer 2

您可以在窗體本身上使用onsubmit事件。

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