表单提交不刷新页面 [英] Form Submission without page refresh
本文介绍了表单提交不刷新页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
也许有人可以帮助我解决这个小问题,我遇到。我试着去不需要刷新页面提交此表。但它会跳过后,直接进入Ajax调用。我想我错过理解preventDefault()。我在网上搜索,但无法找到我需要的this.Your帮助将大大AP preciated或点到另一个表单提交
HTML
<!DOCTYPE HTML>
< HTML>
< HEAD>
<冠军> AJAX |项目< /标题>
<链接HREF =project.css相对=样式/>
<脚本SRC =jquery.js和>< / SCRIPT>
< /头>
<身体GT;
< DIV ID =mainCon>
< H1>通讯录和LT; / H1>
< DIV ID =form_input>
<形式ID =MyForm的方法=邮报行动=addrecord.php>
<标签=全名>名称:< /标签>
<输入类型=文本名称=全名ID =全名/><跨度ID =NameError> < / SPAN>
< BR />
<标签=联系号码>电话号码:其中; /标签>
&其中;输入类型=文本的id =联系号码名称=联系号码>&所述;跨度的id =PhoneError>&所述; /跨度>
< BR />
<输入ID =按钮移到类型=提交的onClick =addnumber()VALUE =添加电话号码/>
<输入类型=按钮ID =秀值=结果/>
< /形式GT;
< / DIV>
< DIV ID =form_output>
< / DIV>
< / DIV>
&所述;脚本的src =project.js>&所述; /脚本>
<脚本类型=文/ JavaScript的>
功能addnumber(){
。VAR全名=的document.getElementById(全名)的价值;
。VAR PHONENUMBER =的document.getElementById(联系号码)的价值;
如果(全名==){
。的document.getElementById(NameError)的innerHTML =请输入一个valided名称;
}
如果(PHONENUMBER ==){
。的document.getElementById(PhoneError)的innerHTML =请输入一个valided名称;
}
}
< / SCRIPT>
< /身体GT;
< / HTML>
jQuery的
$(文件)。就绪(函数(){
$(#按钮移到)。点击(函数(){
$('#MyForm的)。递交(函数(五){
即preventDefault();
$阿贾克斯({
网址:listrecord.php
键入:GET,
数据:数据,
成功:功能(数据){
$(#form_output)的HTML(数据);
},
错误:函数(jXHR,textStatus,errorThrown){
警报(errorThrown);
}
}); // AJAX获取jQuery的说明书
});
}); //点击效果
}); //开始jQuery的声明
解决方案
正好赶上提交事件和prevent的,然后做阿贾克斯
$(文件)。就绪(函数(){
$('#MyForm的')。在('提交',函数(E){
即preventDefault();
$阿贾克斯({
网址:$(本).attr('行动')|| window.location.pathname,
键入:GET,
数据:$(本).serialize()
成功:功能(数据){
$(#form_output)的HTML(数据);
},
错误:函数(jXHR,textStatus,errorThrown){
警报(errorThrown);
}
});
});
});
Maybe someone can assist me with this little issue i'm having. Im trying to submit this form without a page refresh. But it will skip the post and go directly to the ajax call. I think i miss understood the preventDefault().I have searched online but unable to locate what i need for this.Your help would greatly appreciated or point to another form submission
html
<!DOCTYPE html>
<html>
<head>
<title>AJAX | Project</title>
<link href="project.css" rel="stylesheet"/>
<script src="jquery.js"></script>
</head>
<body>
<div id="mainCon">
<h1>Contact Book</h1>
<div id="form_input">
<form id="myform" method="post" action="addrecord.php">
<label for="fullname">Name:</label>
<input type="text" name="fullname" id="fullname"/><span id="NameError"> </span>
<br/>
<label for="phonenumber">Phone Number:</label>
<input type="text" id="phonenumber" name="phonenumber"><span id="PhoneError"></span>
<br />
<input id="buttton" type="submit" onClick="addnumber()" value="Add Phone Number"/>
<input type="button" id="show" value="the Results"/>
</form>
</div>
<div id="form_output">
</div>
</div>
<script src="project.js"></script>
<script type="text/javascript">
function addnumber(){
var Fullname = document.getElementById("fullname").value;
var Phonenumber = document.getElementById("phonenumber").value;
if(Fullname == ""){
document.getElementById("NameError").innerHTML = "Please Enter a valided Name";
}
if(Phonenumber == ""){
document.getElementById("PhoneError").innerHTML = "Please Enter a valided Name";
}
}
</script>
</body>
</html>
jquery
$("document").ready(function () {
$("#buttton").click(function () {
$('#myform').submit(function (e) {
e.preventDefault();
$.ajax({
url: "listrecord.php",
type: "GET",
data: "data",
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
}); // AJAX Get Jquery statment
});
}); // Click effect
}); //Begin of Jquery Statement
解决方案
Just catch the submit event and prevent that, then do ajax
$(document).ready(function () {
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "GET",
data: $(this).serialize(),
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
这篇关于表单提交不刷新页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文