Writing a page with use of $.cookie to show a form upon submit in a multi form page. I have seen similar questions go unanswered when it got to this specific code. I have read and read, seems like this should work. Yes, very new to jquery, 1 week.
I have container divs (class) each with an p toggle to show/hide each form. Upon submit I want the form to remain .show() so that errors or even response will be seen. p must be clicked to .hide form; so a person could open all the forms.
I know there are much more complicated ways to do this. I just want to learn the simple, possibly long hand version so help me understand what is going on. I added a number of alerts for hints. Some reason loops back to undefined.
Sorry I am so 'green'. I am sure this is too simple for most here.
css:
.set {
}
.set form {
display: none;
}
.set p {
color: #996600;
cursor: pointer;
}
.set p.hover {
background-color: #00CCCC;
}
the html:
<div class="set"><p>Click</p>
<form id="form1">
<div id="here" style="text-align:center; border:1px solid black; width:60px;">form 1</div>
<button id="form1button" class="button">BUTTON form1</button>
</form>
</div>
<div class="set"><p>Click2</p>
<form id="form2" >
<div id="here" style="text-align:center; border:1px solid black; width:60px;">Click</div>
<button id="form2button" class="button">BUTTON form2</button>
</form>
</div>
<div class="set"><p>Click3</p>
<form id="form3" >
<div id="here" style="text-align:center; border:1px solid black; width:60px;">Click</div>
<button id="form3button" class="button">BUTTON form3</button>
</form>
</div>
the jquery:
if($.cookie('toogle')=== undefined) {
$('.set form#form1').show();
alert('undefined');
if ($.cookie('toogle') == 'form1') {
$('.set form#form1').show();
$('.set form#form2').hide();
$('.set form#form3').hide();
} else if ($.cookie('toogle') == 'form2') {
$('.set form#form2').show();
$('.set form#form1').hide();
$('.set form#form3').hide();
} else if ($.cookie('toogle') == 'form3') {
$('.set form#form3').show();
$('.set form#form1').hide();
$('.set form#form2').hide();
} else {
$('.set form#form1').show();
$('.set form#form2').hide();
$('.set form#form3').hide();
};
alert($.cookie('toggle'));
$('#form1button').on('click', function() {
$.cookie('toggle', 'form1');
alert('form1 button!!!');
});
$('#form2button').on('click', function() {
$.cookie('toggle', 'form2');
alert('form2 button!!!');
});
$('#form3button').on('click', function() {
$.cookie('toggle', 'form3');
alert('form3 button!!!');
});
$('.set p').click(function() {
$(this).toggleClass('active').next().slideToggle('slow');
});
Ok so overall we will have a page with the forms, and a php processing page. I explained most of it in the comments. Let me know if you have any questions!
This is a quick validation to see if the value is empty or not, you can do whatever validating you need to
Page 1 - send-ajax-form.php - CSS
<style type="text/css">
button.close {display:none;}
form {display:none;}
.form-wrapper {margin:10px; padding:10px; background-color:#E8E8E8;}
.error {color:red;}
.success {color:green;}
</style>
Page 1 - send-ajax-form.php - HTML
<div class="form-wrapper">
<div>Form One</div>
<form id="form1">
<input type="text" name="formval" />
<button type="submit">Submit</button>
<div id="form1status"></div>
</form>
<button class="edit">Edit</button>
<button class="close">Close</button>
</div>
<div class="form-wrapper">
<div>Form Two</div>
<form id="form2">
<input type="text" name="formval" />
<button type="submit">Submit</button>
<div id="form2status"></div>
</form>
<button class="edit">Edit</button>
<button class="close">Close</button>
</div>
<div class="form-wrapper">
<div>Form Three</div>
<form id="form3">
<input type="text" name="formval" />
<button type="submit">Submit</button>
<div id="form3status"></div>
</form>
<button class="edit">Edit</button>
<button class="close">Close</button>
</div>
Page 1 - send-ajax-form.php - Script (Buttons)
<script type="text/javascript">
// Edit and Close Button Functions
$('body').on('click', '.edit', function(){
$(this).hide().siblings('.close').show().siblings('form').slideDown();
});
$('body').on('click', '.close', function(){
$(this).hide().siblings('.edit').show().siblings('form').slideUp();
});
</script>
Page 1 - send-ajax-form.php - Script (Ajax Calls)
<script type="text/javascript">
// Each form will have its own ajax call, all posted to the same php page.
// Form 1
$('#form1').submit(function(e){
e.preventDefault(); // Stop regular form submission
var randnum = Math.floor(Math.random()*1001); // This works around IE caching, as you see, I attach it to the end of the post below
$.ajax({
type: "POST", // Obviously we are posting to the php page.
url: "process-ajax-form.php", //the php page to post to.
cache: false, // This is needed to prevent caching, the random number from above will reinforce this as well.
// Serialize the form data, then add the formname key/value so php knows which form is coming over.
data: $('#form1').serialize() + "&formname=form1&random=" + randnum, // random number at the end for no-caching.
dataType: "html", // I am using html here, so it will expect html to be spit back from the php processing page.
//You could use other data types as well just make sure the php echos that type of data.
timeout: 5000, // This will through an error after 5 seconds if it cannot connect with the server
error: function(){
// Show some server error message somehow (This has nothing to do with your php proccessing page)
},
success: function(response){ // Variable 'response' will hold the html that comes back from the php echos
// Success means something was received back from the php page (No matter if your php outputs succes or error)
// So lets do something with the results!!!!
$('#form1status').html('').html(response); // Clear current status message then insert PHP results
}
});
});
// Form 2
$('#form2').submit(function(e){
e.preventDefault(); // Stop regular form submission
var randnum = Math.floor(Math.random()*1001); // This works around IE caching, as you see, I attach it to the end of the post below
$.ajax({
type: "POST", // Obviously we are posting to the php page.
url: "process-ajax-form.php", //the php page to post to.
cache: false, // This is needed to prevent caching, the random number from above will reinforce this as well.
// Serialize the form data, then add the formname key/value so php knows which form is coming over.
data: $('#form2').serialize() + "&formname=form2&random=" + randnum, // random number at the end for no-caching.
dataType: "html", // I am using html here, so it will expect html to be spit back from the php processing page.
//You could use other data types as well just make sure the php echos that type of data.
timeout: 5000, // This will through an error after 5 seconds if it cannot connect with the server
error: function(){
// Show some server error message somehow (This has nothing to do with your php proccessing page)
},
success: function(response){ // Variable 'response' will hold the html that comes back from the php echos
// Success means something was received back from the php page (No matter if your php outputs succes or error)
// So lets do something with the results!!!!
$('#form2status').html('').html(response); // Clear current status message then insert PHP results
}
});
});
// Form 3
$('#form3').submit(function(e){
e.preventDefault(); // Stop regular form submission
var randnum = Math.floor(Math.random()*1001); // This works around IE caching, as you see, I attach it to the end of the post below
$.ajax({
type: "POST", // Obviously we are posting to the php page.
url: "process-ajax-form.php", //the php page to post to.
cache: false, // This is needed to prevent caching, the random number from above will reinforce this as well.
// Serialize the form data, then add the formname key/value so php knows which form is coming over.
data: $('#form3').serialize() + "&formname=form3&random=" + randnum, // random number at the end for no-caching.
dataType: "html", // I am using html here, so it will expect html to be spit back from the php processing page.
//You could use other data types as well just make sure the php echos that type of data.
timeout: 5000, // This will through an error after 5 seconds if it cannot connect with the server
error: function(){
// Show some server error message somehow (This has nothing to do with your php proccessing page)
},
success: function(response){ // Variable 'response' will hold the html that comes back from the php echos
// Success means something was received back from the php page (No matter if your php outputs succes or error)
// So lets do something with the results!!!!
$('#form3status').html('').html(response); // Clear current status message then insert PHP results
}
});
});
</script>
Page 2 - process-ajax-form.php - PHP
<!-- For each form on the page, set up your validation -->
<!-- Here I am doing a simple validation to see if the form value is empty or not -->
<?php
//Check if its form 1
if($_POST['formname']==='form1'){
$formval = $_POST['formval']; //Put value posted into variable
// Validate however you would like
if($formval===""){
echo "<span class='error'>Uh oh, something went wrong with form 1!</span>";
}else{
echo "<span class='success'>Great, everything is all good with form 1!</span>";
}
}
?>
<?php
//Check if its form 2
if($_POST['formname']==='form2'){
$formval = $_POST['formval']; //Put value posted into variable
// Validate however you would like
if($formval===""){
echo "<span class='error'>Uh oh, something went wrong with form 2!</span>";
}else{
echo "<span class='success'>Great, everything is all good with form 2!</span>";
}
}
?>
<?php
//Check if its form 3
if($_POST['formname']==='form3'){
$formval = $_POST['formval']; //Put value posted into variable
// Validate however you would like
if($formval===""){
echo "<span class='error'>Uh oh, something went wrong with form 3!</span>";
}else{
echo "<span class='success'>Great, everything is all good with form 3!</span>";
}
}
?>
来源：https://stackoverflow.com/questions/21615605/writing-a-cookie-to-show-a-form-upon-submit-in-a-multi-form-page