无需重新加载页面即可提交表单数据 [英] Submitting form data without reloading page
本文介绍了无需重新加载页面即可提交表单数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< jQuery代码：
函数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 =formcalmethod =post>
< input type =numberid =firstname =firstplaceholder =number/>
< option value =add> +< / option>
< option value =subtract> - < / option>
< option value =multiply> *< / option>
< option value =division> /< / option>
< / select>
< input type =numberid =secondname =secondplaceholder =number 2/>
< input type =buttonid =submitFormDataonclick =SubmitFormData（）;值= 计算/>
< / form>
< br>
<？php // if（！empty（$ _ POST ['first']）&&！empty（$ _ POST ['second']））{
$ number = $ _POST [ '第一'];
$ number2 = $ _POST ['second'];
回显答案：;
if（$ _ POST ['operator'] =='add'）{
$ complete = $ number + $ number2;
回声$ number + $ number2 = $ complete;
}
if（$ _ POST ['operator'] =='subtract'）{
$ complete = $ number - $ number2;
回显$ number - $ number2 = $ complete;
}
if（$ _ POST ['operator'] =='multiply'）{
$ complete = $ number * $ number2;
回显$ number X $ number2 = $ complete;
}
if（$ _ POST ['operator'] =='division'）{
$ complete = $ number / $ number2;
回显$ number / $ number2 = $ complete;
}
//}
？>
< / div>
< div id =results>
< / div>
解决方案
防止表单提交的默认操作。 p>
函数submitFormData（event）{
//防止默认操作
event.preventDefault（）;
//其他代码
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:
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();
});
}
THIS IS THE HTML CODE ON THE SAME PAGE(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>
解决方案
Prevent the default action of the form submit.
function submitFormData(event) {
// prevent the default action
event.preventDefault();
// Other pieces of code
这篇关于无需重新加载页面即可提交表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
