javascript 在表单提交操作后显示隐藏的 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17989313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display a hidden DIV after a form submit action
提问by acr
I am trying to show a hidden div after submitting a form data
我试图在提交表单数据后显示隐藏的 div
Below is my form html where the input section will have a form to enter the data and after submitting the form I have to show hidden output section and show result there
下面是我的表单 html，其中输入部分将有一个表单来输入数据，提交表单后，我必须显示隐藏的输出部分并在那里显示结果
html code:
html代码：
<div id="input">
----- some form datas here ----
<div id="submit">
<input type="submit" id="generate" name="script" value="generate" />
</div>
</div>
<div id="output" style="display: none;">
--- php echo from above form------
</div>
</form>
css:
css：
#input{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;
}
#output{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;
}
After going through some previous discussion about the same topics, below is one of the answered solution for this
在经历了之前关于相同主题的一些讨论之后，下面是对此的回答之一
create a JavaScript like to show the hidden div after form submission.
创建一个 JavaScript，比如在表单提交后显示隐藏的 div。
$('form').submit(function(){
$('#output').show();
});
or
或者
$('form').submit(function(e){
$('#output').hide();
e.preventDefault();
// Or with: return false;
});
But both the solutions are not working for me.the second is able to show the hidden div outputbut it not showing actual form data.
但是这两个解决方案都不适合我。第二个能够显示隐藏的 divoutput但它不显示实际的表单数据。
How can I show it correctly ? I need to show this after form submission (type="submit")
我怎样才能正确显示它？我需要在表单提交后显示这个(type="submit")
UPDATE:
更新：
Removed the inline css to hide div
Added css function in style sheet to hide div
#output{ display:none; width:800px; margin: auto; border-width:1px; border-style:solid; border-color:#ddd; }Added below jquery to show div on form submit
$('form').submit(function(){ $('#output').css({ 'display' : 'block' }); });
删除了内联 css 以隐藏 div
在样式表中添加了 css 功能以隐藏 div
#output{ display:none; width:800px; margin: auto; border-width:1px; border-style:solid; border-color:#ddd; }在 jquery 下面添加以在表单提交时显示 div
$('form').submit(function(){ $('#output').css({ 'display' : 'block' }); });
Still I an not able to achieve the result. Any clue here ?
我仍然无法达到结果。这里有什么线索吗？
回答by
use
利用
<form id="form" action="">
</form>
To display output
显示输出
$(document).ready(function() {
$('#output').hide();
$('#form').submit(function(){
$('#output').show();
});
});
回答by Bhojendra Rauniyar
$('form').submit(function(e){
$('#doutput').hide();
e.preventDefault();
// Or with: return false;
});
Here in your script you are spelling doutput. replace it with output
在您的脚本中，您正在拼写 doutput。用输出替换它
and to show use .css() function and define display: block !important;because you have displayed it in your inline style so to override this you need to set !important.
并显示使用 .css() 函数并定义，display: block !important;因为您已以内联样式显示它，因此要覆盖它，您需要设置 !important。
Alternatively, define display: none;in the stylesheet instead of using in inline style and do the rest without setting !important
或者，display: none;在样式表中定义而不是使用内联样式，然后在不设置 !important 的情况下完成剩下的工作
回答by Salman Ali Khan
Remove Display: none;
移除显示：无；
And do this code
并执行此代码
$('form').submit(function(e){
$('#doutput').hide();
e.preventDefault();
// Or with: return false;
});
to hide and
隐藏和
$('form').submit(function(e){
$('#doutput').hide();
e.preventDefault();
// Or with: return false;
});
to show
以显示
回答by JoshMc
You could use .hide()and .show()as opposed to editing CSS attributes via .css().
您可以使用.hide()and.show()而不是通过.css().
$('document').ready(function() {
$('#output').hide();
$('form').submit(function(e) {
$('#output').show();
e.preventDefault();
});
});
回答by Garytje
if you want to show results within the DIV, there are many ways to do this.
如果你想在 DIV 中显示结果，有很多方法可以做到这一点。
- Javascript Give all your form data an ID, and then write a javascript function to fill the answers in the said DIV.
- Ajax Post your form to ajax, return the response to your DIV
- New page request After submitting, check to see if $_POST is set and then show the div with $_POST contents.
- Javascript 给你的所有表单数据一个ID，然后编写一个javascript函数来填写所说的DIV中的答案。
- Ajax 将您的表单发布到 ajax，将响应返回给您的 DIV
- 新页面请求提交后，检查是否设置了$_POST，然后显示带有$_POST 内容的div。
回答by Thanassis_K
You could try using the "action" attribute of the form element or you could try the jquery serializeArray method at the form element right after the submit.
您可以尝试使用表单元素的“action”属性，或者您可以在提交后立即在表单元素中尝试使用 jquery serializeArray 方法。
<form>
<input type="text" name="giveNameHere" />
<input type="submit" id="generate" name="script" value="generate" />
</form>
<div id="output" style="display: none;">
Output Content
</div>
$('form').submit(function () {
$('#output').show();
console.log($(this).serializeArray());
return false;
});
Please see this jsfiddle
请看这个jsfiddle
回答by pszaba
If I got it right you don't want to reload the page. In this case you need to send the form data via ajax call. Than you can display the response and the hidden div.
如果我做对了，您就不想重新加载页面。在这种情况下，您需要通过 ajax 调用发送表单数据。比您可以显示响应和隐藏的div。
CSS
CSS
#output {
display:none;
}
jQuery
jQuery
$(document).ready(function(){
$('form').submit(function(e){
// Prevent the default submit
e.preventDefault();
// Collect the data from the form
var formData = $('form').serialize();
//Send the from
$.ajax({
type: "POST",
url: "generator.php",
data: formData,
success: function(msg){
// Insert the response into the div
$('#ajaxResponse').html(msg);
// Show the hidden output div
$('#output').slideDown();
}
});
});
});
HTML
HTML
<div id="output">
--- php echo from above form------
<div id="ajaxResponse"></div>
</div>
