Question

我试图在单击提交按钮后显示同一div内的表单数据，但没有表单。在当前代码中，单击提交按钮后未显示隐藏的div。请通过下面我尝试过的代码，并参考期望输出的图像。标题和说明应在同一个div中以形式代替。

有人帮助我解决我的代码错误。谢谢。 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>

Answer 1

好吧，几件事错了。

在这种情况下，如果您不验证字段中的输入，就不需要该函数的if部分（如果需要，您可以进行注释，我会为您添加它）< / li>
添加和取消的按钮是submit类型，因此，您单击它，即使您具有JS上的编写代码，它们也将在显示后消失，因为它们将作为表单提交。
您正在{{1上拨打 add() 和 Cancel() }}事件，尚未在任何JS函数中声明。

好吧，毕竟，我只是将输入的类型从onClick更改为submit，添加了CSS部分以更好地查看正在使用的元素，并更改了JavaScript部分只是按照您的要求去做。看看是否有帮助：

button

.d2 {
  width: 500px;
  height: 400px;
  border: 1px solid black;
  display: block;
}

.d1 {
  width: 500px;
  height: 400px;
  border: 1px solid black;
  display: none;
}

任何问题，您都可以评论并询问。

如何使用JavaScript在同一div中显示表单数据？

1 个答案: