通过Ajax提交表单
Submit form via Ajax
因此,我遵循了这里的教程,以便能够使用ajax提交表单。我完全遵循了教程(至少我认为我做到了),当我尝试提交表单时,页面只会刷新,它永远不会到达php脚本将其发送到数据库。
我正在使用的脚本如下:
$(function () {
$(".button").click(function () {
$(function () {
$('.error').hide();
$("#submit_btn").click(function () {
//validate and process form here
$('.error').hide();
var firstname = $("input#firstname").val();
if (firstname == "") {
$("label#firstname_error").show();
$("input#firstname").focus();
return false;
}
var lastname = $("input#lastname").val();
if (lastname == "") {
$("label#lastname_error").show();
$("input#lastname").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var pin = $("input#parent_pin").val();
if (pin == "") {
$("label#parent_pin_error").show();
$("input#parent_pin").focus();
return false;
}
var login = $("input#login").val();
if (login == "") {
$("label#login_error").show();
$("input#login").focus();
return false;
}
var passwd = $("input#passwd").val();
if (passwd == "") {
$("label#passwd_error").show();
$("input#passwd").focus();
return false;
}
var cpasswd = $("input#cpasswd").val();
if (cpasswd == "") {
$("label#cpasswd_error").show();
$("input#cpasswd").focus();
return false;
}
var user_type = $("input#user_type").val();
if (user_type == "") {
$("label#user_type_error").show();
$("input#user_type").focus();
return false;
}
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login='
login + '&passwd='
passwd + 'user_type' = user_type;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "studentAccess/files/AddNewUser.php",
data: dataString,
success: function () {
$('#form-body').html("<div id='message'></div>");
$('#message').html("<h2>New User Added Successfully!</h2>");
}
});
});
});
});
});
我在谷歌Chrome的控制台中收到的错误是:
Uncaught SyntaxError: Unexpected identifier AddNewUser.js:65
第65行为:
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' login + '&passwd=' passwd + 'user_type' = user_type;
我不知道如何解决这个问题,因为我不知道这个错误意味着什么。任何帮助都会很棒!
更新
<?php
$con = mysqli_connect("");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "INSERT INTO members (firstname, lastname, email, login, psswd, user_type)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[email]', '$_POST[login]', '$_POST[psswd]', '$_POST[user_type]')";
if (!mysqli_query($con, $sql)) {
die('Error: ' . mysqli_error($con));
}
echo "1 record added";
mysqli_close($con);
?>
您在#65行中错过了+
符号
应该是
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' + login + '&passwd=' + passwd + '&user_type=' + user_type;
请阅读http://en.wikipedia.org/wiki/JavaScript_syntax
删除.button
单击处理程序中的$(function () {
。现在它只在按钮点击时注册一个句柄,但不执行它
在这一行的最后,您有:
'user_type' = user_type;
它需要:
'&user_type=' + user_type;
您可能还需要在ajax之后添加return false;
,以防止页面刷新(并清除表单)。
$.ajax({
type: "POST",
url: "studentAccess/files/AddNewUser.php",
data: dataString,
success: function () {
$('#form-body').html("<div id='message'></div>");
$('#message').html("<h2>New User Added Successfully!</h2>");
}
});
return false; //Keep page from refreshing
进一步编辑:
在.click()
中还嵌入了一个.click()
。不能同时单击两个按钮。你需要改变这个:
$(function () {
$(".button").click(function () {
$(function () {
$('.error').hide();
$("#submit_btn").click(function () {
对此。。。
$(function () {
$('.error').hide();
$("#submit_btn").click(function (e) {
e.preventDefault();
...
在下面的行中,它应该是'&user_type=' + user_type;
而不是'user_type' = user_type;
var dataString = 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&parent_pin=' + pin + '&login=' login + '&passwd=' passwd + 'user_type' = user_type;
此外,如果按钮是submit
按钮,则应防止在按钮的click
事件中使用event.preventDefault();
执行默认表单提交操作。
此外,前两行代码不是必需的。我已经把它们评论掉了。
/*$(function () {
$(".button").click(function () {*/
$(function () {
$('.error').hide();
$("#submit_btn").click(function (event) {
event.preventDefault();
//rest of your current validation code should be put here.
});
});
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- angularjs-控制器在表单提交时未调用
- 禁用带有字符白名单的表单提交
- 如何使用Google Analytics跟踪表单提交
- 使用javascript将表单提交到iframe目标中
- e.preventDefault在表单提交时被忽略
- AngularJS JQuery Ajax表单提交等效
- JavaScript表单提交帮助
- PHP表单提交和重定向
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- setTimeOut AFTER jQuery表单提交
- 从函数中选择要触发表单提交的正确元素
- JavaScript表单提交没有't fire asp服务器端点击功能的提交按钮
- 表单提交问题,如何在我的URL末尾获得ID的值
- Javascript使用Confirm取消表单提交