JS如何使用隐藏控件为表单添加参数
JS 使用 如何 参数 添加 控件 表单 隐藏
2023-06-13 09:17:21 时间
前言
在一些前端动态网页的表单里,并不是所有的参数都需要填写或选择,有些需要隐藏起来,然后跟着小单一起提交传递给后台,发送到服务器端
那这个是怎么实现的呢
示例展示
具体示例,可见
https://coder.itclan.cn/fontend/js/24-hide-input-params/
01
原生js
对于不显示在界面上的元素,但在提交表单时,却又要携带上去,是有这种需求的,比如用户修改某件商品信息时,商品的id,商品的id并不是用户想要关心的
但是这个id又是数据库表格的标识,往往是一个必传的字段,因此使用隐藏变量把这个参数隐藏起来,可以很好的解决这个问题
具体如下代码所示
// 展示表单参数的函数
function showParams() {
// 设置萤囊变量的值,这个值也可以通过标签的value指定
document.forms[0].myhidden.value = "我是隐藏的参数";
var str = "表单将提交的参数包括" // 定义字符拼接变量
// 拼接年份参数
str += '\n年份:'+document.forms[0].myyear.value;
// 拼接姓名参数
str += '\n姓名:'+document.forms[0].myname.value;
// 拼接隐藏参数
str += '\n隐藏变量'+document.forms[0].myhidden.value;
alert(str); // 展示字符拼接的值
}
如下是html
<input type="hidden" name="myhidden" />
年份:
<select name="myyear">
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2022">2020</option>
<option value="2021">2019</option>
</select>
<br />
姓名: <input type="text" name="myname" />
<input type="button" value="提交" onclick="showParams()" />
02
Vue版本实现
如下是vue方式实现,其实都是类似的
<template>
<div class="wrap">
<el-form :inline="true" :model="formParams">
<el-form-item>
<el-input v-model="formParams.id" type="hidden" ></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="formParams.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="年份">
<el-select v-model="formParams.year" placeholder="请选择年份" @change="handleSelect">
<el-option v-for="item in formParams.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "hideInputParams",
data() {
return {
formParams: {
id: '我是隐藏携带的参数',
name: "",
year: "",
options: [
{
label: '2022',
value: '2022'
},
{
label: '2021',
value: '2021'
},
{
label: '2020',
value: '2020'
},
{
label: '2019',
value: '2019'
},
{
label: '2018',
value: '2018'
},
{
label: '2017',
value: '2017'
},
{
label: '2016',
value: '2016'
}
]
},
};
},
methods: {
handleSelect(val) {
console.log(val);
this.formParams.year = val;
},
onSubmit() {
console.log("submit!");
const {id,name,year} = this.formParams;
if(name && year) {
this.$alert(`id:${id},名字:${name},年份:${year}`, '提交的数据', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
}else {
this.$message.error('名字或年份不能为空');
}
},
},
};
</script>
<style lang="scss" scoped>
.wrap {
text-align: center;
}
</style>
总结
一些需要隐藏的表单参数控制,有时是需要传给后端的,传统的方法,隐藏表单的数据,然后在提交时,传递给后端,是一个比较常见的操作
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- 【说站】js生成器中next的使用
- 【说站】js中Array.filter()方法如何使用
- 【说站】js中Date()方法如何使用
- 如何使用 ethers.js 监听待处理交易
- 在 Node.js 里使用 multiparty 上传文件
- JS的异步编程过程中的问题集锦、echarts使用记录。
- Uncaught SyntaxError: Cannot use import statement outside a module的解决方法(使用Es6语法引入js对象文件报错)
- Js如何模拟继承机制分别使用Es5和Es6来实现
- Ratchet:使用 HTML,JS,CSS 创建 iPhone App 原型
- JS中的 async 和 await 使用技巧
- js中使用ajax请求数据的时候,如何实现return详解编程语言
- JS截取数组:使用splice()和slice()方法
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- JS在Oracle中的应用(js如何oracle)
- 脚本吧-幻宇工作室用到js,超强推荐expand.js
- 使用JS操作页面表格,元素的一些技巧
- js的with语句使用方法
- JS正则中的match与exec使用说明
- 如何使用jquery动态加载js,css文件实现代码
- js作用域及作用域链概念理解及使用
- 使用js如何实现全选与全不选
- JS获取下拉列表所选中的TEXT和Value的实现代码
- js使用eval解析json(js中使用json)
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- asp.net使用js分页实现异步加载数据
- node.js中的fs.fstat方法使用说明
- node.js中的fs.renameSync方法使用说明
- node.js中的fs.chownSync方法使用说明