如何使用JavaScript在同一div中显示表单数据？
[英]How to show form data in same div using Javascript?
问题描述
I am trying show form data within same div after click on submit button but without form.In current code,after click on submit button hidden div is not appearing. 
我试图在单击提交按钮后显示同一div内的表单数据，但没有表单。在当前代码中，单击提交按钮后未显示隐藏的div。 Please go through below code which I have tried and refer to image attached of desire output. 请通过下面我尝试过的代码，并参考期望输出的图像。 In which title and description should come in same div in replace of form. 其中标题和说明应以格式代替在同一个div中。
Someone help me out where I am going wrong with code.Thanks. 有人帮助我解决代码出了问题。 https://commons.wikimedia.org/wiki/File:Lorem_Ipsum_Helvetica.png https://commons.wikimedia.org/wiki/File:Lorem_Ipsum_Helvetica.png
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script> function fn(){ var fn = document.getElementById("f1").value; var des = document.getElementById("t1").value; var mainDiv = document.getElementById("d2"); var div = document.getElementById("d1"); if(mainDiv.style.display==="block"){ mainDiv.style.display="none"; div.style.display="block"; } document.getElementById("fn1").innerHTML = fn; document.getElementById("t2").innerHTML = des; } </script> </head> <body> <div style ="height:400px; width:500px; border:1px solid black; display:block;" id="d2"> <form> First Name: <input type="text" name="fn" id="f1" /><br /><br /> Description: <textarea id="t1" rows="5" cols="20"></textarea><br /><br /> <input type="submit" name="b1" id="b1" value="Add" onclick="add()" /> <input type="submit" name="b1" id="b2" value="Cancel" onclick="Cancel()" /> </form> </div> <div style ="height:400px; width:500px; border:1px solid black; display:none;" id="d1"> <p><span id="fn1"></span></p> <p><span id="t2"></span></p> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2019-05-14 19:00:21
Well, few things were wrong. 好吧，几件事都错了。
- The
ifpart of the function isn't needed in this case if you're not validating the imput in the field (if you need so, you can comment and I'll add it for you)在这种情况下，如果您不验证字段中的输入，则不需要函数的if部分（如果需要的话，可以进行注释，我会为您添加） - The buttons to Add and Cancel were
submittype, so, as soon as you click it, even if you had the write code on JS, they'd vanish right after showing, because they'd be submited as a form.“ 添加”和“ 取消 ”按钮是submit类型，因此，即使您在JS上编写了代码，只要单击它们，它们就会在显示后立即消失，因为它们将作为表单submit。 - You were calling
add()andCancel()on theonClickevents, which haven't been declared in any JS functions.您在onClick事件上调用了add()和Cancel()，但尚未在任何JS函数中声明它们。
Well, after all, I just changed the type of the inputs from submit to button , added a CSS part for better view of the elements that you're working with and changed the JavaScript part just to do what you were asking to. 好吧，毕竟，我只是将输入的类型从“ submit更改为“ button ，添加了一个CSS部分以更好地查看您正在使用的元素，并更改了JavaScript部分以完成您要执行的操作。 See if it helps : 看看是否有帮助：
.d2 { width: 500px; height: 400px; border: 1px solid black; display: block; } .d1 { width: 500px; height: 400px; border: 1px solid black; display: none; }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script> function myFunction(){ var fn = document.getElementById("f1").value; var des = document.getElementById("t1").value; var fDiv = document.getElementById("d2"); //fDiv stands for "Form Div" var hDiv = document.getElementById("d1"); // hDiv stands for "Hidden Div" hDiv.style.display = "block"; document.getElementById("fn1").innerHTML = fn; document.getElementById("t2").innerHTML = des; fDiv.style.display = "none"; } </script> </head> <body> <div name="form" id="d2" class="d2"> <form> First Name: <input type="text" name="fn" id="f1" /><br /><br /> Description: <textarea id="t1" rows="5" cols="20"></textarea><br /><br /> <input type="button" name="b1" id="b1" value="Add" onclick="myFunction()" /> <input type="button" name="b1" id="b2" value="Cancel" onclick="Cancel()" /> </form> </div> <div name="hidden" id="d1" class="d1"> <p><span id="fn1"></span></p> <p><span id="t2"></span></p> </div> </body> </html>
Any questions, you can comment and ask. 如有任何疑问，您可以发表评论并提问。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.