[英]Ajax form submit no result
I have a signup page.我有一个注册页面。 I do a JQuery validation and then make an AJAX call to regForm.php to upload the new user if all of the fields are correct - pretty basic.如果所有字段都正确,我会进行 JQuery 验证,然后对 regForm.php 进行 AJAX 调用以上传新用户 - 非常基本。
My problem我的问题
The validation is working but, when user registers, NOTHING HAPPENS.验证正在工作,但是,当用户注册时,什么也没有发生。 I get no success or error message, nothing written to the database, and my console on Chrome shows nothing.我没有收到成功或错误消息,没有写入数据库,Chrome 上的控制台也没有显示任何内容。 So I am pretty much stuck.所以我被困住了。
I'm sure it is just a small problem.... Perhaps something I'm missing?我确定这只是一个小问题......也许我错过了什么?
HTML HTML
<div id="ajaxMsgDiv"></div>
<form name="registration-form" id="regForm" method="post" action="regForm.php">
<span id="sname-info" style="color:red"></span>
Name: <br /><input type="text" id="sname" name="fName" onfocus="this.value='';" /><br />
<span id="ssurname-info" style="color:red"></span>
Surname:<br /> <input type="text" id="ssurname" name="fSurname" onfocus="this.value='';" /> <br />
<span id="sspword-info" style="color:red"></span>
Password:<br /><input type="text" id="spword" name="fPword" onfocus="this.value='';" /><br />
<span id="sconfirmpword-info" style="color:red"></span>
Confirm Pword:<br /><input type="text" id="sconfirmpword" name="pwordConfirm" onfocus="this.value='';" /><br />
<span id="sEmail" style="color:red"></span>
Email:<br /><input type="text" id="sEmail" name="sEmail" onfocus="this.value='';" /><br />
<span id="sPhone-info" style="color:red"></span>
Phone:<br /><input type="text" name="sPhone" id="sPhone" onfocus="this.value='';" /><br />
Male<input type="radio" value="male" name="sex">Female<input type="radio" value="female" name="sex"><br />
<input type="submit" onclick="" value="Register" name="register" class="buttono" />
</form>
JQUERY查询
<script type="text/javascript">
$(function () {
var form = $('#regForm');
var formMessages = $('#ajaxMsgDiv');
// Set up an event listener for the contact form.
$(form).submit(function (e) {
// Stop the browser from submitting the form.
e.preventDefault();
//do the validation here
if (!validateReg()) {
return;
}
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
}).done(function (response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error').addClass('success');
// Set the message text.
$(formMessages).html(response); // < html();
// Clear the form.
$('').val('')
}).fail(function (data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success').addClass('error');
// Set the message text.
var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
$(formMessages).html(messageHtml); // < html()
});
});
function validateReg() {
var valid = true;
if (!$("#sname").val()) {
$("#sname-info").html("(required)");
$("#sname").css('background-color', '#FFFFDF');
valid = false;
}
if (!$("#ssurname").val()) {
$("#ssurname-info").html("(required)");
$("#ssurname").css('background-color', '#FFFFDF');
valid = false;
}
if (!$("#spword").val()) {
$("#spword-info").html("(required)");
$("#spword").css('background-color', '#FFFFDF');
valid = false;
}
if(!$("#sEmail").val()) {
$("#sEmail-info").html("(required)");
$("#sEmail").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#sEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
$("#sEmail-info").html("(invalid Email)");
$("#sEmail").css('background-color','#FFFFDF');
valid = false;
}
if(!$("#sPhone").val()) {
$("#sPhone-info").html("(required)");
$("#sPhone").css('background-color','#FFFFDF');
valid = false;
}
return valid;
}
})
Your validation function always returns "false", that is why request isn`t sent.您的验证函数总是返回“false”,这就是不发送请求的原因。 This happens because email validation never passes:发生这种情况是因为电子邮件验证从未通过:
if(!$("#sEmail").val()) {
}
In its turn, that happens due to fact that you have a span and an input with same id.反过来,发生这种情况是因为您有一个跨度和一个具有相同 ID 的输入。 Try to change it:尝试改变它:
<span id="sEmail" style="color:red"></span>
See my fiddle: http://jsfiddle.net/9cs65xfn/看我的小提琴: http : //jsfiddle.net/9cs65xfn/
You may want to be sure that the request is being sent before trying to get the response. 在尝试获取响应之前,您可能希望确保发送请求。 Use various developement tools available like firebug 使用各种开发工具,如firebug
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.