微信小程序bindsubmit真机提交表单失败

在我先前的博文 微信小程序提交表单
中,使用了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){
    //提交后的数据库存储操作
    }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值