同一个页面内实现html+js表单提交输出功能

以你之姓@ 2022-08-12 15:29 166阅读 0赞

<html>
    <head>
    <title>同一个页面内实现html+js表单提交输出功能</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style>
    	
    </style>
    </head>
    
    <body>
    	<div id="d2">
    		<form name="myform" action="#">
    			name:<input type="text" name="name">
    			age:<input type="text" name="age">
    			<input type="button" id="but" value="ok";>
    		</form>
    	</div>
    	<div id="d1" class="b" style="display:none;">asdf</div>
    </body>
    <script>
    	function aaaaa(){
    		var name=document.myform.name.value;
    
    		var age=document.myform.age.value;
    		document.getElementById("d1").style.display="";
    		document.getElementById("d2").style.display="none";
    		document.getElementById("d1").innerHTML="name:"+name+"<br>age:"+age;
    	}
    	document.getElementById("but").onclick = aaaaa;
    </script>
    </html>

点击前：![Center][]

点击后：![Center 1][]

[Center]: /images/20220810/7a9262e71b514cabb67953fdbbca7f7b.png
[Center 1]: /images/20220810/54ab1ebcd38a46a9bdf452e4d6b9a6eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关 html禁止form表单提交表单提交,onsubmit阻止表单提交

在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 Bootstrap 实例 - 提交表单验证 //---> function checksubm

骑猪看日落/ 2022年10月07日 11:57/ 0 赞/ 425 阅读

相关同一个页面内实现html+js表单提交输出功能

<html> <head> <title>同一个页面内实现html+js表单提交输出功能</title> <meta http-equiv="C

以你之姓@/ 2022年08月12日 15:29/ 0 赞/ 167 阅读

相关 HTML同一个table中不同的按钮提交不同表单

> 在同一个页面的table中提交用不同的按钮提交不同的表单通常需要多个form，如果为了排版需要对齐不同的button，可以用table的tbody标签实现将tbo

左手的ㄟ右手/ 2022年07月15日 07:56/ 0 赞/ 259 阅读

相关 FORM表单防止页面重复提交

应用场景：因为考虑系统安全以及数据准确性的问题，表单提交后应该拒绝重复提交。分析：我们可以给页面做标记，进入表单创建页面时设置一个唯一标记值同时把这个标记值用SESSION

ゝ一纸荒年。/ 2022年07月15日 07:11/ 0 赞/ 260 阅读

相关 form表单提交不刷新页面

form表单提交时，往往会刷新页面，数据提交到后台会跳转到其他页面如果不需要刷新页面时，可以通过ifame实现无刷新。在form表单下定义一个ifame <if

叁歲伎倆/ 2022年06月18日 05:58/ 0 赞/ 269 阅读

相关 action输出from标签形成提交表单页面

现象：在Java程序中直接输出html，形成表单，且自动提交表单。在程序中直接response写回浏览器浏览器将自动提交表单到指定路径适用范围: 适用于参数在后

小灰灰/ 2022年06月07日 23:18/ 0 赞/ 184 阅读

相关页面表单提交的几种方式

一,简单的表单提交页面; submit提交方式: <table style="width:0px;"> <tbody> <tr> <td style="b

﹏ヽ暗。殇╰゛Y/ 2022年05月26日 08:30/ 0 赞/ 238 阅读

相关 ajax不跳转页面提交表单

一、普通表单 1. 表单 <form action="/handleForm1" method="post"> name: <input type=

水深无声/ 2022年02月23日 19:20/ 0 赞/ 336 阅读

相关 ajax提交表单页面刷新很快

注：使用ajax 提交表单时 type类型最好不用submit 用button合适 <form> <div class="col-md-9 col

末蓝、/ 2021年10月08日 05:42/ 0 赞/ 371 阅读

相关表单提交

form表单提交可以使用以下两种方式 1. input <input class="btn btn-main" type="submit" placeholder

太过爱你忘了你带给我的痛/ 2021年09月28日 22:34/ 0 赞/ 542 阅读