{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 别忘想泡老子 的问题《jQuery PHP form submission bug》','https://www.manongdao.com/q-1109218.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to submit a form using jquery and ajax.Basically, the issues are:
1.POST request not being sent
2.Form data not being validated
3.The form is not taking data on the second click of the submit button
For the first problem, a POST Request is being sent once I remove the validation portion. However, I do not know why the code mentioned below should not work.
I have no idea why the second problem exists. I have changed the structure of my code time and again, but data is not being validated. I have tested the functions separately and they work, however they do not work when the submit button is pressed, i.e. the if condition that is supposed to send the post data returns false (goes to else), even when the tests inside the if condition are true individually.
The third problem, I suspect, is probably due to the first. I am not so sure though.
scripts pre included are 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>
I posted a question previously and found out that the validation part is buggy.
Also, the console shows no jQuery errors.
You can use a normal button instead of submit button, then add return false like this:
First thing I'd suggest is don't do your validation in JQuery. Send the data to PHP and do the checking there.
Second, you've got a spelling error here: event.prevetnDefault();
Third, you're not doing anything with the results returned from register.php
Fourth, you mentioned it working when you removed the validation. Remove the validation one step at a time until you figure out which one is causing the problem. But like I said, you should be doing your validation in PHP.
Edit: I could be wrong, but I think maybe this line needs to be re-written: