时间戳

首页 > 解决方案 > 如何使用 Javascript 在同一个 div 中显示表单数据？

javascript - 如何使用 Javascript 在同一个 div 中显示表单数据？

问题描述

我试图在单击提交按钮后在同一个 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>

标签： javascripthtmlcss

解决方案

好吧，有几件事是错的。

  1. if如果您不验证字段中的输入，则在这种情况下不需要该功能的一部分（如果需要，您可以发表评论，我会为您添加）
  2. 添加和取消的按钮是submit类型的，所以，一旦你点击它，即使你在JS上有写代码，它们在显示后也会消失，因为它们是作为表单提交的。
  3. 您正在调用事件add()，Cancel()这些onClick事件尚未在任何 JS 函数中声明。

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

.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>

有什么问题，可以评论和提问。

推荐阅读