微信小程序-获取input 输入框的value值

最新推荐文章于 2024-06-26 15:00:21 发布

原创最新推荐文章于 2024-06-26 15:00:21 发布 · 1.2w 阅读

12 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍微信小程序中如何使用input组件的bindinput方法及button组件的form-type属性进行表单数据的动态绑定与提交。通过具体代码示例，展示了如何在.wxml文件中设置input和button组件属性，并在.js文件中定义数据处理函数，实现数据的实时更新与表单提交功能。

部署运行你感兴趣的模型镜像

给大家看一下具体的使用：

input组件上有一个方法bindinput，

button组建上有一个方法form-type，用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件，这里我不采用表单提交的方式咯

在.wxml中：

<input type="text" name='goodsname' class="inputGoods" placeholder="名称" bindinput="goodsNameInput" />
<input type="text" name='goodsstyle' class="inputGoods" placeholder="品牌" bindinput="goodsStyleInput" />
<button class="loginBtn" size="default" bindtap="clickButton" form-type="submit">提交</button>

.js代码

data: {
    goodsName: '',
    goodStyle: ''
 },
/*获取名称***/
goodsNameInput: function (e) {
   this.setData({
      goodsName: e.detail.value
    })
 },
/*获取品牌***/
goodsStyleInput: function(e){
   this.setData({
      goodStyle:e.detail.value
   })
},
/**查询提交 */
clickButton: function(e){
    console.log("名称：" + this.data.goodsName + " 品牌：" + this.data.goodStyle);
},

您可能感兴趣的与本文相关的镜像