[英]Form disappers after submitting form using ajax
I have an html form as follows: 我有一个HTML表单,如下所示:
<form role="form" name="login" id="login" >
<div id="alert-success" class="alert alert-success" style="display: none" ></div>
<div id="alert-danger" class="alert alert-danger" style="display: none" ></div>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="name" class="form-control" id="username" placeholder="Enter name" style="width: 30%;">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="usermail" placeholder="Enter email" style="width: 30%;">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Username</label>
<input type="password" class="form-control" id="loginname" placeholder="username" style="width: 30%;">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="loginpassword" placeholder="Password" style="width: 30%;">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" id="submit" data-dismiss="alert" name="submit" class="btn btn-default">Join Us</button>
</form>
A jquery in the same file for validation and to submit form: 同一文件中的一个jquery用于验证和提交表单:
$(document).ready(function () {
$("#submit").click(function () {
var username = $("#username").val();
var usermail = $("#usermail").val();
var loginname = $("#loginname").val();
var loginpassword = $("#loginpassword").val();
var emailregex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (username == "" || username.length > 20 || !isNaN(username)) {
$('#alert-danger').show();
$("#alert-danger").html("Please Enter Proper Name");
$("#username").focus();
return false;
} else if (usermail == "" || !emailregex.test(usermail)) {
$('#alert-danger').show();
$("#alert-danger").html("Please Enter Your Email Id");
$("#usermail").focus();
return false;
} else if (loginname == "" || loginname.length > 10) {
$('#alert-danger').show();
$("#alert-danger").html("Please Enter Username");
$("#loginname").focus();
return false;
} else if (loginpassword == "" || loginpassword.length > 10) {
$('#alert-danger').show();
$("#alert-danger").html("Please Enter Proper Password");
$("#loginpassword").focus();
return false;
} else {
var datastring = 'name=' + username + '&email=' + usermail + '&loginusername=' + loginname + '&loginuserpassword=' + loginpassword;
$.ajax({
type: "POST",
url: "userdata.php",
data: datastring,
cache: false,
sucess: function (dataitem) {
if (dataitem == 1) {
$("#alert-danger").html("Something Went Wrong");
} else {
$("#alert-danger").html("Something Went Wrong");
}
}
})
}
})
})
Now I am encountering problem while submitting the form,it does work,as data are saved to database table,but I cannot see my form after it have submitted,I have used location.reload();
现在我在提交表单时遇到问题,它确实可以正常工作,因为数据已保存到数据库表中,但是提交后我看不到表单,我使用了location.reload();
function but still its not working ,pls help 功能,但仍然无法正常工作,请帮助
Do like this : 这样做:
$("#submit").click(function() {
// your code
return false;
});
or 要么
in else part 在其他部分
else
{
var datastring = 'name=' + username + '&email=' + usermail + '&loginusername=' + loginname + '&loginuserpassword=' + loginpassword;
$.ajax({
// code ....
});
return false;
}
When you correctly fill the form , it's been submited by ajax and then by on submit of click. 当您正确填写表格时,它是由ajax提交的,然后由单击提交。 Return false stop the next submit and only your ajax post will go. 返回false停止下一次提交,只有您的ajax帖子可以执行。
Add e in the function() and then e.preventDefault() as the first line in the click function: 在function()中添加e,然后在click函数的第一行中添加e.preventDefault():
$("#submit").click(function(e) {
e.preventDefault();
//code here
});
<button type="submit" id="submit" data-dismiss="alert" name="submit" class="btn btn-default">Join Us</button>
应该:
<input type="submit" id="submit" data-dismiss="alert" name="submit" class="btn btn-default" value="Join Us">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.