微信小程序提交表单

article/2025/9/21 3:01:14

先看效果
在这里插入图片描述
身份选择使用了picker

具体代码：

form.wxml

<view class="modify-form">
<form bindsubmit='getForm'><view class="label-list"><view class="label">姓名</view><view class="input-box"><input placeholder="请输入您的姓名"  placeholder-class="place" name="name" value="{{name}}"/></view></view><view class="label-list"><view class="label">性别</view><radio-group class="radio-group" bindchange="radioChange"><label class="radio" wx:for="{{sex}}" wx:key="index"><radio value="{{item.id}}" checked="{{sexId == item.id}}"/>{{item.name}}</label></radio-group></view><view class="label-list"><view class="label">E-mail</view><view class="input-box"><input placeholder="请输入您的E-mail" value='{{Email}}' placeholder-class="place" name='Email'/></view></view><view class="label-list"><view class="label">所在公司/学校</view><view class="input-box"><input placeholder="请输入您的公司/学校" value="{{school}}"  placeholder-class="place" name='school'/></view></view><view class="label-list"><view class="label">身份</view><picker bindchange="bindPickerChange" range="{{identity}}" value="{{index}}"><view  class="picker-show">{{identity[index]}}</view></picker></view><button formType="submit" bindtap="saveData" class="submit">确定</button>
</form>
</view>

form.wxss

.modify-form{display: block;padding: 30rpx;
}
.label-list{display: flex;width: 100%;height: 120rpx;align-items: center;border-bottom: 1px solid #e8e8e8;
}
.label-list .label {color: #333;font-size: 36rpx;font-weight: bold;
}
.input-box{position: relative;left:20px;
}
.place {align-items: center;font-size: 36rpx;left: 30rpx;vertical-align:middle;
}
.radio-group label{padding-left: 30rpx;font-size: 36rpx;
}
.submit {margin-top: 45rpx;background-color: rgb(39, 114, 16);color: #fff;
}
.picker-show{position: relative;left: 80%;
}

form.js


const app = getApp()
Page({data:{sex: [{ id: "0", name: "男", checked:"true" }, { id: "1", name: "女" }],name:'',sexId:"0",   // 默认是0 => 男sex1:'',Email:'',school:'',index:0,identity:["请选择","教师","学生","其他"],occupation:''},getForm:function(e){var formdata = e.detail.valuethis.setData({name:formdata.name,sex1:this.data.sex[this.data.sexId].name,Email:formdata.Email,school:formdata.school,occupation:this.data.identity[this.data.index],})},radioChange:function(e){this.setData({sexId:e.detail.value})},bindPickerChange:function(e){this.setData({index: e.detail.value})},saveData:function(e){//提交后的操作，例如将信息写入数据库等}
})

--------------------------12.11更--------------------------------------------
这种常用的form bindsubmit方式在部分安卓真机上可能出现获取不到form内容的情况，若出现，可换成bindinput方式，见这篇博文 微信小程序bindsubmit真机提交表单失败