当前位置：文档之家 › 怎样用js创建Form表单并提交

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

  • 格式：docx
  • 大小：12.60 KB
  • 文档页数：2

怎样用js创建Form表单并提交
var f = document.createElement("form");
document.body.appendChild(f);
var i = document.createElement("input");
i.type = "hidden";
f.appendChild(i);
i.value = "5";
i.name = "price";
f.action = "aa.asp";
f.submit();
--------------------如何在两个html的网页间传递变量？--------





onclick="javascript:textcontent('x');">





text.htm页面




-------------怎么让用户不能输入"\"这个字符啊? ---------

对像标签里加入：onKeyDown="if(window.event.keyCode==220){return false;};"
如：onKeyDown="if(window.event.keyCode==220){return false;};">

onKeyDown="alert(event.keyCode);"
想知道哪个就按哪个

合集下载

form表单提交时，action怎么带参数

form表单提交时，action怎么带参数

form表单提交时，action怎么带参数在提交form表单的时候，action 不填就默认为提交到当前的页⾯。

今天遇到的当前页⾯是已经带了参数了，⽐如:/index.php? id=1，按照action留空的⽅法来提交，就不能提交到这个带参数的url了，也不能到把表单中的直拼接在uri后⾯。

那怎么办呢，可以⽤js的⽅法拼接好在submit<body><form action="ss.do?" method="get"><input type="text" id ="input"/><input type="button" value="提交" onClick="test()"></form ></body><script>function test(){var f = document.getElementsByTagName("form")[0];f.action=f.action+"id="+document.getElementById("input").value;alert(f.action);}</script>原⽂连接：这种⽅法在每次提交的时候，会⼀直拼接uri，在我的项⽬上⽤不了，不过给了我启发，那就是js中重定向，代码如下:<form action="" method="get"><input type='text' name='gid'/><input type='text' name='type'/><input type="button" value="搜索" onClick="tpformsubmit()"></form><script>function tpformsubmit(){var gid = $('input[name=gid]').val();var type = $('input[name=type]').val();url = '/index/web?style=tp&gid='+gid+'&type='+type;window.location.href = url;}</script>。

form的原生方法

form的原生方法

form的原生方法【原创版2篇】目录（篇1）1.form 对象的概念和作用2.form 的原生方法a.form.submit()b.form.reset()c.form.close()正文（篇1）在 HTML 中，表单（form）是一种常用的交互元素，用户可以通过填写表单内容并与服务器进行数据交换。

表单对象（form object）在网页加载过程中由浏览器自动创建，它对应的 JavaScript 对象则可以用来操作表单。

接下来，我们将介绍三个常用的 form 原生方法：submit()、reset() 和 close()。

1.form.submit()当用户点击表单的提交按钮时，浏览器会自动触发表单的 submit 事件。

此时，页面将发送一个请求到服务器，服务器处理数据后将结果返回给客户端。

表单的 submit() 方法可以用 JavaScript 触发，以实现异步提交或一些客户端验证等功能。

示例代码如下：```javascriptdocument.getElementById("myForm").submit();```2.form.reset()表单的 reset() 方法用于清空表单中的所有数据，使表单恢复到初始状态。

这个方法同样可以由 JavaScript 触发，方便实现表单的重置功能。

示例代码如下：```javascriptdocument.getElementById("myForm").reset();```3.form.close()表单的 close() 方法用于关闭表单。

当表单被关闭后，用户将无法继续提交表单。

这个方法通常在表单验证失败或用户主动关闭表单时触发。

示例代码如下：```javascriptdocument.getElementById("myForm").close();```需要注意的是，在实际开发过程中，我们通常会使用 jQuery 等库来简化表单操作，提高代码可读性和可维护性。

Form表单

Form表单

Form表单由输⼊框、选择器、单选框、多选框等控件组成，⽤以收集、校验、提交数据典型表单包括各种表单项，⽐如输⼊框、选择器、开关、单选框、多选框等。

在 Form 组件中，每⼀个表单域由⼀个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker1<el-form ref="form" :model="form" label-width="80px">2<el-form-item label="活动名称">3<el-input v-model=""></el-input>4</el-form-item>5<el-form-item label="活动区域">6<el-select v-model="form.region" placeholder="请选择活动区域">7<el-option label="区域⼀" value="shanghai"></el-option>8<el-option label="区域⼆" value="beijing"></el-option>9</el-select>10</el-form-item>11<el-form-item label="活动时间">12<el-col :span="11">13<el-date-picker type="date" placeholder="选择⽇期" v-model="form.date1" style="width: 100%;"></el-date-picker>14</el-col>15<el-col class="line" :span="2">-</el-col>16<el-col :span="11">17<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>18</el-col>19</el-form-item>20<el-form-item label="即时配送">21<el-switch v-model="form.delivery"></el-switch>22</el-form-item>23<el-form-item label="活动性质">24<el-checkbox-group v-model="form.type">25<el-checkbox label="美⾷/餐厅线上活动" name="type"></el-checkbox>26<el-checkbox label="地推活动" name="type"></el-checkbox>27<el-checkbox label="线下主题活动" name="type"></el-checkbox>28<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>29</el-checkbox-group>30</el-form-item>31<el-form-item label="特殊资源">32<el-radio-group v-model="form.resource">33<el-radio label="线上品牌商赞助"></el-radio>34<el-radio label="线下场地免费"></el-radio>35</el-radio-group>36</el-form-item>37<el-form-item label="活动形式">38<el-input type="textarea" v-model="form.desc"></el-input>39</el-form-item>40<el-form-item>41<el-button type="primary" @click="onSubmit">⽴即创建</el-button>42<el-button>取消</el-button>43</el-form-item>44</el-form>45<script>46 export default {47 data() {48return {49 form: {50 name: '',51 region: '',52 date1: '',53 date2: '',54 delivery: false,55 type: [],56 resource: '',57 desc: ''58 }59 }60 },61 methods: {62 onSubmit() {63 console.log('submit!');64 }65 }66 }67</script>View CodeW3C 标准中有如下：When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request tosubmit the form.即：当⼀个 form 元素中只有⼀个输⼊框时，在该输⼊框中按下回车应提交该表单。

form表单的两个方法

form表单的两个方法

form表单的两个方法
1. GET方法：表单中的提交操作使用GET方法时，表单数据
会被附加在URL的后面，以查询字符串的形式发送到服务器。

这种方法常用于获取数据，当提交表单时，用户可以直接看到提交的数据，也可以通过URL的参数传递数据到其他页面。

2. POST方法：表单中的提交操作使用POST方法时，表单数
据会被放在HTTP请求的请求体中发送到服务器。

这种方法常用于提交数据，当提交表单时，用户无法直接看到提交的数据，数据也不会暴露在URL中，因此更加安全。

POST方法适合
于敏感数据的传输。