JavaScript动态创建表单并提交的方法
作者:函数茶馆时间:2026-10-29 12:25:53浏览:273
本文介绍如何利用JavaScript动态创建表单元素并提交数据。通过代码实例展示如何手动构建form对象,设置method和action属性,并添加input元素。同时演示了两种提交按钮的区别:submit类型由浏览器默认处理,button类型需结合JS调用form.submit()实现控制提交。
JavaScript动态表单提交概述
本文通过具体实例讲解如何使用JavaScript控制表单的提交过程。
动态创建表单的代码示例
以下代码完全由JavaScript动态实现表单的创建与提交效果。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>本站</title>
<script type="text/javascript">
window.onload=function(){
var obt=document.getElementById("bt");
var obox=document.getElementById("box");
var oform=document.createElement("form");
var oinput=document.createElement("input");
oform.method="post";
oform.action="index.php";
oinput.value="jb51.net";
obox.appendChild(oform);
oform.appendChild(oinput);
obt.onclick=function(){
oform.submit();
}
}
</script>
</head>
<body>
<div id="box"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>供读者参考使用,具体实现如下。
<Script Language="JavaScript">
function autoSubmit(){
var form = document.forms[0];
var actionPath = "?mo=phone";
form.action = actionPath;
form.submit();
return true;
}
</Script>
提交按钮类型与JS控制
若需设置两个提交按钮,可将type属性分别设为"submit"和"button"。前者利用按钮默认行为提交表单,后者则通过JavaScript脚本控制提交逻辑。
<form method="post" name="form1" id="form1" action="?mo=phone&do=opreat" >
<input type="hidden" value="" name="phoneid" id="phoneid">
<table border="0px" style="font-size:12px" width="630px" >
<tr>
<td align="right">手机型号:</td>
<td><input type="text" id="phonetype" name="phonetype" style="width:120px" <?# if $pinfo.pass_var.phonetype ?>value="<?# $pinfo.pass_var.phonetype ?>" <?# /if ?> /></td>
<td><div id="phonetypeTip" style="width:250px"></div></td>
</tr>
<tr>
<td align="right">类型:</td>
<td><select name="type" id="type">
<?# foreach from=$types item=value ?>
<option value="<?# $value.type ?>"
<?# if $pinfo.pass_var.type== $value.type ?>selected="selected"<?# /if ?>><?# $value.type ?>
</option>
<?# /foreach ?>
</select></td>
<td><div id="typeTip" style="width:250px"></div></td>
</tr>
<tr>
<td align="right">厂商:</td>
<td><select name="brandid" id="brandid">
<?# foreach from=$brand item=value ?><option value="<?# $value.brandid ?>" <?# if $pinfo.pass_var.brandid== $value.brandid ?>selected="selected"<?# /if ?> ><?# $value.name_zh ?></option><?# /foreach ?>
</select></td>
<td><div id="brandidTip" style="width:250px"></div></td>
</tr>
</table>
<input type="submit" value="增加手机" >
<input type="button" onclick="autoSubmit();" value="搜索手机" >
</form>
希望上述内容对JavaScript程序设计有所帮助。
作者最新文章
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
