我正在尝试使用jquery和ajax提交表单。基本上,问题是:
1.POST请求未被发送
2.未验证的表格数据
3.表单在第二次点击提交按钮时没有获取数据
对于第一个问题,一旦删除验证部分,就会发送POST请求。但是,我不知道为什么下面提到的代码不起作用。
我不知道为什么存在第二个问题。我已经一次又一次地改变了代码的结构,但是没有验证数据。我已经单独测试了这些函数并且它们有效,但是当按下提交按钮时它们不起作用,即应该发送post数据的if条件返回false(转到else),即使在if条件内的测试时也是如此这是真的。
我怀疑第三个问题可能是由于第一个问题。我不太确定。
预先包含的脚本是jquery.min.js 1.11.1,twitter bootstraps.min.js
<!DOCTYPE HTML>
<html>
<head>
<title>Live info a Sports Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Vide" />
<meta name="keywords" content="Live info Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
</head>
<?php
session_start();
include 'db.php';
if(isloggedin() == 0) {
include 'header.php';
?>
<br><br>
<form id="formdata">
<div class="contact signup-body">
<div class="login-body">
<div class="login-heading">
<h3>Sign up</h3>
</div>
<div class="login-info">
<input type="text" class="user" id="name" name="name" placeholder="Name" >
<div id="namem" style='text-align:center;color:red;'></div>
<input type="text" class="user" id="email" name="email" placeholder="Email">
<div id="emailm" style='text-align:center;color:red;'></div>
<input type="text" class="user" id="mobile" name="mobile" placeholder="Phone">
<div id="mobilem" style='text-align:center;color:red;'></div>
<input type="password" id="password" name="password" class="lock" placeholder="Password">
<div id ="passm" style='text-align:center;color:red;'></div>
<input type="password" id="repassword" name="repassword" class="lock" placeholder="Confirm Password" >
<div id = "repassm" style='text-align:center;color:red;'></div>
<input type="submit" id="signin" name="signin" value="Sign up">
<div class="signup-text">
<a href="#" data-toggle="modal" data-target="#myModal">Already have an account? Login here.</a>
</div>
</div>
</div>
<!-- Modal -->
<!-- // Modal -->
</div>
</form>
<!-- //contact -->
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$('#signin').click(function(event){
event.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var mobile = $('#mobile').val();
var password = $('#password').val();
var repassword = $('#repassword').val();
var email_filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var mob_fil = /^[0-9]{10}$/i;
var string = /^[ a-zA-Z]+$/;
var pass = /^[a-zA-Z0-9_\.\-\@\!]*$/;
if (!(name == '' || email == '' || mobile== '' || password == '' || repassword == '')){
if (!email_filter.test(email)) {$('#emailm').html('Please provide a valid email address');}
if (!mob_fil.test(mobile)) {$('#mobilem').html('Please enter a 10 digit number');}
if (!string.test(name)) {$('#namem').html('Please enter only alphabets');}
if (!pass.test(password)) {$('#passm').html('Only alphabets,digits and special characters allowed in password');}
if(password.length<3) {$('#passm').html('please enter a bigger password');}
if (password!=repassword) {$('#repassm').html('Password and Confirm password do not match');}
}
if((email_filter.test(email)==true) && (mob_fil.test(mobile)==true) && (string.test(name)==true) && pass.test(password) && (password.length>3) && (password=repassword))
{
var dataString = $('#formdata').serializeArray();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
dataType:"text",
contentType: 'application/x-www-form-urlencoded',
cache: false,
success: function(result){
var data="";
$("#message").html('success');
$("#name").val('');
$("#email").val('');
$("#mobile").val('');
$("#password").val('');
$("#repassword").val('');
},
error: function(error){console.log(error);}
});
}
else {$('#repassm').html("your form is not valid");}
});
});
</script>
<?php include 'login_modal.php';session_destroy();}
else { $url = 'index.php'; echo '<META HTTP-EQUIV=REFRESH CONTENT="0; '.$url.'">';} ?>
<!-- main content end-->
</div>
</div>
</div>
<?php include 'footer.php' ?>
</section>
</body>
</html>
我发布了a question previously并发现验证部分是错误的。
此外,控制台不会显示jQuery错误。
答案 0 :(得分:2)
我建议的第一件事是不要在JQuery中进行验证。将数据发送到PHP并在那里进行检查。
其次,你在这里遇到了拼写错误:event.prevetnDefault();
第三,你没有对register.php
返回的结果做任何事情success: function(result){
var data="";
$("#message").html('success');
$("#name").val('');
$("#email").val('');
$("#mobile").val('');
$("#password").val('');
$("#repassword").val('');
console.log(result); // Check the result in console
},
第四,您在删除验证时提到它有效。一次删除一步验证,直到找出导致问题的那一步。但就像我说的那样,你应该用PHP进行验证。
编辑:我可能错了,但我想也许这条线需要重写:
if (!(name == '' || email == '' || mobile== '' || password == '' || repassword == '')){
if (name != '' && email != '' && mobile != '' && password != '' && repassword != '') {
答案 1 :(得分:-1)
您可以使用普通按钮而不是提交按钮,然后像这样添加返回false:
if(mobile != ''){
if (!mob_fil.test(mobile)){
$('#mobilem').text('Please enter a 10 digit number');
return false;
}
}