怎样用js创建Form表单并提交

最新推荐文章于 2021-12-29 10:53:09 发布
转载 最新推荐文章于 2021-12-29 10:53:09 发布 · 2.3w 阅读 · 3
文章标签：

#javascript #function #input

本文介绍了一种使用JavaScript动态创建并提交表单的方法。通过创建一个表单元素，并设置其属性如method、action等，再添加一个隐藏域来传递特定值，最后调用submit()方法完成表单提交。这种方法常用于跳转页面并携带参数。

<script >

//js动态创建form 提交表单
function formSubmit(elementValue) {

    var turnForm = document.createElement("form");   
    //一定要加入到body中！！   
    document.body.appendChild(turnForm);
    turnForm.method = 'post';
 turnForm.action = '/product/detail.htm';
 turnForm.target = '_blank';
 //创建隐藏表单
 var newElement = document.createElement("input");
    newElement.setAttribute("name","id");
    newElement.setAttribute("type","hidden");
    newElement.setAttribute("value",elementValue);
    turnForm.appendChild(newElement);
 
    turnForm.submit();
}

</script>

 

<a href="javascript:formSubmit('1')">点击我</a>

使用 JavaScript 提交表单（Form）的完整指南
CyberOI的博客
09-29 1385
通过监听表单的提交事件，并在事件处理函数中获取表单字段的值，你可以对表单数据进行处理，比如发送到服务器进行保存或进行其他操作。在网页开发中，表单（Form）是一种常见的交互元素，它允许用户输入数据并将其发送到服务器进行处理。接下来，我们将使用 JavaScript 来捕获表单的提交事件，并编写处理函数来提交表单数据。通过将上述代码保存为 HTML 文件并在浏览器中打开，你将能够看到一个包含文本输入框和提交按钮的表单。最后，我们执行了提交操作，这里只是简单地将获取到的数据打印到控制台中。
JavaScript高级 - 纯js实现文件上传大文件切片上传断点续传（客户端）
lixiaosenlin的专栏
03-18 7704
文章目录前言一、环境准备及依赖库二、项目结构三、 功能实现1、axios二次封装2、 单文件上传FROM-DATA，先选文件再上传3、 单文件上传BASE64，只能上传小于100K的png或jpg图片文件4、多文件上传FORM-DATA5、多文件拖拽上传FORM-DATA6、大文件切片上传，断点续传FORM-DATA总结 前言 在另一篇文章JavaScript高级 - nodejs+koa2实现文件上传大文件切片上传断点续传(服务器端)中已经介绍了文件上传的服务器端实现，并实现了几个不同上传形式的服务
JavaScript动态创建form表单并提交的实现方法
10-23
主要介绍了JavaScript动态创建form表单并提交的实现方法,涉及JavaScript动态创建页面元素及模拟表单提交的技巧,需要的朋友可以参考下
js动态创建form以post方式提交
iteye_6607的博客
01-31 1237
&lt;script &gt;//js动态创建form 提交表单function formSubmit(elementValue) {     var turnForm = document.createElement("form");       //一定要加入到body中！！       document.body.appendChild(turnForm);    turnForm.met...
用js创建form表单并提交.pdf
11-15
在给定的文件中，标题“用js创建form表单并提交”涉及到使用JavaScript来创建和处理HTML表单（form）的过程。下面将详细介绍这个过程。 1. **创建HTML表单**： HTML表单是用户与网页进行交互的重要元素，通常通过`...
用js创建form表单并提交.docx
11-15
以上就是对给定文档中涉及的JavaScript创建表单并提交的相关知识点的详细说明，以及与之相关的Web开发技术。在实际开发中，理解并熟练运用这些知识能帮助构建功能丰富、用户体验良好的Web应用。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新的数据或重新编辑已存在的数据。 首先，我们需要确保父组件能够正确地向子组件传递数据。在父组件中，...
javascript动态创建form表单
TO
03-13 372
//helper function to create the form function getNewSubmitForm(){var submitForm = document.createElement("FORM");document.body.appendChild(submitForm);submitForm.method = "POST";return submitForm;}//h...
JavaScript 创建一个 form 表单并提交
热门推荐
NULL BLOG
06-26 2万+
页面布局有些复杂的情况下，可能需要在页面中动态创建一个 form，JavaScript 创建 form 演示如下： // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; ...
js创建Form表单并提交
mmoxmoai的博客
09-16 1652
//js动态创建form 提交表单 function formSubmit(elementValue) { var turnForm = document.createElement("form"); //一定要加入到body中！！ document.body.appendChild(turnForm); turnForm.method = 'post'
Javascript动态生成Form表单
Wiki.M's development
03-21 836
主要是在利用Struts中的DispatchAction开发的使用，用于隐藏方法参数。因为在使用DispatchAction的时候，可能在地址栏会暴露后台方法名，所以采用了这种动态生成Form表单，并利用Post方式提交的方法对DispatchAction中的方法参数进行隐藏。这样在超链接或者利用button进行提交的时候可以在一定程序上对后台代码方法进行隐藏。当然这种方法也并不能做到绝对的方法隐...
js创建表单提交
Choco1ove的博客
12-29 1103
var form = document.createElement(‘form’); form.style = “display:none;”; form.method = ‘post’; form.action = ‘login/userLogin.html’; var inputEl = document.createElement(‘input’); inputEl.type = ‘hidden’; inputEl.name = ‘xxxName’; inputEl.value = ‘xxxValue
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
weixin_29985807的博客
06-20 648
本文实例讲述了JavaScript动态创建form表单并提交的实现方法。分享给大家供大家参考，具体如下：页面布局有些复杂的情况下，可能需要在页面中动态创建一个 form，JavaScript 创建 form 演示如下：// JavaScript 构建一个 formfunction MakeForm(){// 创建一个 formvar form1 = document.createElement("...
js动态生成form表单并提交
a1470037986的博客
01-31 1万+
在提交json数据时，可能会出后台无法解析数据的bug，碰到这个不要怕，在提交数据前用js转一下json就好了，下面我写的代码里有转json的代码，如果只是传单个数据，就没必要写成json格式了。 $("#exceldown").click(function() { var data5 = []; //获取当前页的数据行 var rows = $('#month_
使用js，根据对象数组中对象属性值的不同将数组进行分组-2
qq_42127308的博客
06-11 1467
需求：将下面数组-对象中的index_name相同的对象抽离出来，放入一个新数组中 let tempArr = [ { domain: 'a', index_name: '云淡风轻' }, { domain: 'b', index_name: '递归' }, { domain: 'c', index_name: '云淡风轻' }, { domain: 'd', index_na...
JS window.open 参数示例
mingwei
02-16 581
简介　　window.open(url, name, features, replace) 　　Arguments - 参数　 　　url 　　可选字符串参数，指向要在新窗口中显示的文档的URL。如果省略该参数，或者参数为空字符串，新窗口不会显示文档。 　　name 　　可选字符串参数，该参数可以设置新窗口的名称。 　　相同name的窗口只能创建一个，要想创建多个窗口则name...
JavaScript操作form表单
zyt1204732670的博客
07-18 450
1. 获取输入的值 <input id="aa" /> <input type="button" value="查询" onclick="t1()" /> <script> document.getElementById("aa").focus(); function t1() { var element = document.getElementById("aa"); console.log(eleme
js form 表单自动提交
09-02
JS 中的表单自动提交通常是利用表单元素的 `submit()` 方法来实现的。下面我来详细说明一下： 首先，在 HTML 中，我们需要创建一个表单，并为其指定一个 ID，以方便在 JavaScript 中访问和操作。例如： ```html <form id="myForm" action="submit.php" method="POST"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="提交"> </form> ``` 然后，在 JavaScript 中，我们可以使用 `document.getElementById()` 方法来获取表单元素，并调用 `submit()` 方法来实现表单自动提交。例如： ```javascript window.onload = function() { var form = document.getElementById("myForm"); form.submit(); // 自动提交表单 }; ``` 当页面加载完成后，上述 JavaScript 代码会自动获取表单元素，并调用 `submit()` 方法来提交表单，从而实现自动提交的效果。 需要注意的是，由于表单的提交通常会触发页面刷新或跳转，为了避免页面刷新，在提交表单之前，可以使用 `preventDefault()` 方法来阻止默认的表单提交行为。例如： ```javascript window.onload = function() { var form = document.getElementById("myForm"); form.addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为 form.submit(); // 自动提交表单 }); }; ``` 以上就是利用 JavaScript 实现表单自动提交的方法。当页面加载完成后，表单会自动提交而不需要用户手动点击提交按钮。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值