在我先前的博文 微信小程序提交表单
中,使用了form bindsubmit提交,这也是一种比较常见的方式,但是,在部分安卓真机上会出现获取不到表单内容的情况。
遇到这种情况,可以换成bindinput方式,不再使用form,给input标签加上bindinput属性,在js中通过e.detail.value获取input框中的值
先放效果
wxml
<view class="modify-form">
<view class="label-list">
<view class="label">姓名</view>
<view class="input-box">
<input placeholder="请输入您的姓名" placeholder-class="place" name="name" value="{{name}}" bindinput="inputName"/>
</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' bindinput="inputEmail"/>
</view>
</view>
<view class="label-list">
<view class="label">所在公司/学校</view>
<view class="input-box">
<input placeholder="请输入您的公司/学校" value="{{school}}" placeholder-class="place" name='school' bindinput="inputSchool"/>
</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>
</view>
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%;
}
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:''
},
radioChange:function(e){
this.setData({
sexId:e.detail.value
})
},
bindPickerChange:function(e){
this.setData({
index: e.detail.value
})
},
inputName:function(e){
this.setData({
name:e.detail.value
})
},
inputEmail:function(e){
this.setData({
Email:e.detail.value
})
},
inputSchool:function(e){
this.setData({
school:e.detail.value
})
},
saveData:function(e){
//提交后的数据库存储操作
}
})