simran dhamija simran dhamija - 1 year ago 65
jQuery Question

jquery php form submission bug

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 1st 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 3rd 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

Please, please help me out.

<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" />



include 'db.php';
if(isloggedin() == 0) {
include 'header.php';


<form id="formdata">
<div class="contact signup-body">
<div class="login-body">
<div class="login-heading">
<h3>Sign up</h3>
<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>

<!-- Modal -->

<!-- // Modal -->
<!-- //contact -->

<script src="js/jquery-1.11.1.min.js"></script>

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();

type: "POST",
url: "register.php",
data: dataString,
contentType: 'application/x-www-form-urlencoded',
cache: false,
success: function(result){
var data="";
error: function(error){console.log(error);}
else {$('#repassm').html("your form is not valid");}



<?php include 'login_modal.php';session_destroy();}
else { $url = 'index.php'; echo '<META HTTP-EQUIV=REFRESH CONTENT="0; '.$url.'">';} ?>

<!-- main content end-->
<?php include 'footer.php' ?>

i posted a question previously and found out that the validation part is bugged. here is my previous question:

Jquery form validation and submission

Also, the console shows no JQuery errors.

Answer Source

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

success: function(result){
  var data="";
  console.log(result); // Check the result in console

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:

if (!(name == '' || email == '' || mobile== '' || password == '' || repassword == '')){

if (name != '' && email != '' && mobile != '' && password != '' && repassword != '') {