提交表单数据而不重新加载页面答案

【问题标题】：Submitting form data without reloading page提交表单数据而不重新加载页面
【发布时间】：2016-03-28 01:10:19
【问题描述】：

我正在尝试提交表单而不使用 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>

【问题讨论】：

标签： javascript jquery html submit reload

【解决方案1】：

您可以在表单本身上使用 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";
        }
    //}

【讨论】：

【解决方案2】：

防止表单提交的默认动作。

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

   // Other pieces of code

【讨论】：