编写 $.cookie 以在多表单页面中提交时显示表单 [英] Writing a $.cookie to show a form upon submit in a multi form page
本文介绍了编写 $.cookie 以在多表单页面中提交时显示表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 $.cookie 编写页面以在多表单页面中提交时显示表单.当涉及到此特定代码时，我已经看到类似的问题没有得到解答.我已经阅读和阅读，似乎这应该工作.是的，对 jquery 非常陌生，1 周.
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.
我有容器 div(类)，每个都有一个 p 切换来显示/隐藏每个表单.提交后，我希望表单保留 .show() 以便看到错误甚至响应.必须单击 p 才能隐藏表单；这样一个人就可以打开所有的表格.
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;
}
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>
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');
});
推荐答案
好的，总的来说，我们将有一个包含表单的页面和一个 php 处理页面.我在评论中解释了大部分内容.如果您有任何问题，请告诉我！
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
第 1 页 - send-ajax-form.php - CSS
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>
第 1 页 - send-ajax-form.php - HTML
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>
第 1 页 - send-ajax-form.php - 脚本(按钮)
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>
第 1 页 - send-ajax-form.php - 脚本(Ajax 调用)
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>
第 2 页 - process-ajax-form.php - PHP
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>";
}
}
?>
这篇关于编写 $.cookie 以在多表单页面中提交时显示表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
