I am trying to use jquery to prevent whole page refreshes on form submit events.
It is OK if i have only one form with the below technique. but problem occurs when i have multiple forms.
Actually my first form's output contains another form and it is displayed in the DIV with id results. When i post the second form whole page is refreshing. Javascript code does not work to validate it like the first one.
At this point i am not able to prevent whole page refreshes. My aim is to maintain all form submits here.
I have tried to include all formX.phps in diffrerent hidden divs and making them visible again also. But it did not help me also.
Any help is appreciated.
Here is my index.php which i am trying prevent refresh on it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate({
debug: true,
rules: {
name: "required",
},
messages: {
name: "Please let us know your firstname.",
},
submitHandler: function(form) {
$.post('form2.php', $("#form1").serialize(), function(data) {
$('#results').html(data);
});
$("#myDiv1").hide("slow");
}
});
$("#form2").validate({
debug: true,
rules: {
surname: "required",
},
messages: {
surname: "Please let us know your surname.",
},
submitHandler: function(form) {
$.post('form3.php', $("#form2").serialize(), function(data) {
$('#results').html(data);
});
}
});
$("#form3").validate({
debug: true,
rules: {
pet: "required",
},
messages: {
pet: "Please let us know your pet name.",
},
submitHandler: function(form) {
$.post('form4.php', $("#form3").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<style>
label.error { width: 250px; display: inline; color: red;}
</style>
</head>
<body>
<div id="myDiv1" style="visibility: visible">
<?php include 'form1.php';?>
</div>
<div id="results">
</div>
</body>
</html>
==========================
Here is form1.php
==========================
<?php echo "Hello new user !! Lets start !";?>
<form id='form1' method='post' accept-charset='UTF-8' class="question_form">
<label for='name' >Your FirstName*: </label>
<input type='text' name='name' id='name' maxlength="50" />
<label for='email' >Email Address*:</label>
<input type='text' name='email' id='email' maxlength="50" />
<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password*:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' id="submit1" name='Submit1' value='Submit1' />
</form>
==========================
Here is form2.php
==========================
<?php
echo "Welcome ".$_POST['name']." please give us some other info about you ....!";
//suppose that i have recorded somethings to db sent email vs vs and displaayed another form here something like below
?>
<form id='form2' method='post' accept-charset='UTF-8' class="question_form">
<label for='surname' >Your surname*: </label>
<input type='text' name='surname' id='surname' maxlength="50" />
<label for='job' >Job*:</label>
<input type='text' name='job' id='job' maxlength="50" />
<label for='town' >Town*:</label>
<input type='text' name='town' id='town' maxlength="50" />
<label for='eyeColor' >Eye Color*:</label>
<input type='text' name='eyeColor' id='eyeColor' maxlength="50" />
<input type='submit' name='Submit2' id="submit2" value='Submit2' />
</form>
==========================
Here is form3.php
==========================
<?php
echo "Dear ".$_POST['surname']." Dont give up entering more information !";
//suppose that i have recorded somethings again to db sent email vs vs and displaayed another form here something like below again and again
?>
<form id='form3' method='post' accept-charset='UTF-8' class="question_form">
<label for='age' >Your age*: </label>
<input type='text' name='age' id='age' />
<label for='pet' >Pet Name*:</label>
<input type='text' name='pet' id='pet' />
<label for='motherName' >Mother Name*:</label>
<input type='text' name='motherName' id='motherName' />
<input type='submit' name='Submit3' id="submit3" value='Submit3' />
</form>
==========================
Here is form4.php
==========================
<?php
echo "Dear ".$_POST['motherName']." Dont give up entering more information !";
//suppose that i have recorded somethings again to db sent email vs vs and displaayed another form here something like below again and again
?>
<form id='form4' method='post' accept-charset='UTF-8' class="question_form">
<label for='sex' >Your sex*: </label>
<input type='text' name='sex' id='sex' />
<input type='submit' id="submit4" name='Submit4' value='Submit4' />
</form>
Any idea about it ?