JS控制表单提交的方法
更新时间：2023年05月01日 19:01:11 作者：chunxia
这篇文章主要介绍了JS控制表单提交的方法,可实现基于javascript提交表单信息的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS控制表单提交的方法。
分享一段代码实例，它完全是由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>
如果需要两个提交按钮，type=""的属性值一个高为"submit"一个为"button",也就是一个用按钮本身提交，一个用JS控制提交
<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程序设计有所帮助。
相关文章
JavaScript剩余操作符Rest Operator详解
在本篇文章里小编给各位分享的是关于JavaScript剩余操作符Rest Operator知识点用法总结，有需要的朋友们跟着学习下。2019-07-07
这篇文章主要介绍了JS实现选项卡的方法,结合实例形式详细讲述了JavaScript实现选项卡的布局与功能实现的完整步骤及相关技巧,需要的朋友可以参考下2015-11-11
这篇文章主要为大家介绍了JavaScript常规加密技术实现方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
URL 参数查询是指在 URL 中使用问号（?）后面附加的键值对参数,本文为大家详细介绍了前端实现URL查询参数的方法,希望对大家有所帮助2025-02-02
下面小编就为大家带来一篇JS判断form内所有表单是否为空的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
关于iframe之间的通信问题与自适应高度问题网上有很多，那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题，有需要的可以参考借鉴。2016-08-08
这篇文章主要为大家详细介绍了JavaScript Canvas绘制动态线框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从后端API获取数据并处理返回值,文章展示了如何使用.then()链式操作和async/await语法来访问Promise对象的返回值,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了NestJs使用Mongoose对MongoDB操作的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
根据分辨率不同，调用不同的css文件...2006-07-07
最新评论