好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

小程序提交表单的功能-获取用户输入文本框的值

<input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>

 

  // 获取昵称

  nickname: function(e) {

    this.setData({

      nickname: e.detail.value,

    })

    console.log("昵称" + this.data.nickname);

  },

  // 获取姓名

  realName: function(e) {

    this.setData({

      realName: e.detail.value,

    })

    console.log("姓名" + this.data.realName);

  },

  // 获取详细地址

  detailAddress: function(e) {

    this.setData({

      detailAddress: e.detail.value,

    })

    console.log("详细地址" + this.data.detailAddress);

 

    this.setData({

      detailAddress: e.detail.value,

    })

    console.log("详细地址" + this.data.detailAddress);

  },

  保存

  baocun: function(e) {

    console.log("昵称:" + this.data.nickname + " 真实姓名:" + this.data.realName + "性别:" + this.data.sex + "详细地址" + this.data.detailAddress);

  },



<input class="input" name="userName" placeholder="请输入用户名"

    bindinput ="userNameInput"/>

 

<input class="input" name="password" placeholder="请输入密码"

     bindinput="passWdInput" />

 

<button class="loginBtn" bindtap="loginBtnClick">登录</button>


data: {

    userName: '',

    userPwd:""

  },

  //获取用户输入的用户名

  userNameInput:function(e)

  {

    this.setData({

      userName: e.detail.value

    })

  },

  passWdInput:function(e)

  {

    this.setData({

      userPwd: e.detail.value

    })

  },

  //获取用户输入的密码

  loginBtnClick: function (e) {

    console.log("用户名:"+this.data.userName+" 密码:" +this.data.password);

  }



form表单


<form bindsubmit="formSubmit" bindreset="formReset">

    <view class='item'>

      \r\n\r\n\r\n\r\n\r\n\r\n\r\n昵称:

      <view class='bk'>

        <!-- <textarea class="textarea" placeholder='昵称' auto-height value='{{geren.nickname}}' maxlength='15'></textarea> -->

        <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>

      </view>

    </view>

 

    <view class='item'>

      真实姓名:

      <view class='bk'>

        <!-- <textarea class="textarea" placeholder='真实姓名' auto-height value='{{geren.sysUserDetail.realName}}' maxlength='10'></textarea> -->

        <input name='formrealName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>

 

      </view>

    </view>

 

    <view class='item'>

      \r\n\r\n\r\n\r\n\r\n\r\n\r\n性别:

      <radio-group class="radio-group" bindchange="radioChange" name='formsex'>

 

        <!-- <label class="radio" wx:for="{{items}}"> -->

        <label class='radio'>

          <!-- checked="{{item.checked}}" -->

          <radio value="{{items[0].name}}" checked='{{boy}}' /> {{items[0].value}}

          <radio value="{{items[1].name}}" checked='{{gril}}' /> {{items[1].value}}

        </label>

 

      </radio-group>

    </view>

 

    <view class='item'>

      \r\n\r\n\r\n\r\n\r\n\r\n\r\n生日:

      <view class='bk'>

        <view class='time'>

          <picker mode="date" value="{{date}}" start="1800-01-01" end="2222-01-01" bindchange="changeDate" name="formdate">

            <view>

              {{date}}

            </view>

          </picker>

        </view>

      </view>

    </view>

 

    <view class='item'>

      \r\n\r\n\r\n\r\n居住地:

      <view class='bk'>

        <!-- <textarea class="textarea" placeholder='居住地' auto-height value='{{geren.sysUserDetail.address}}' maxlength='10'></textarea> -->

        <view class="tui-picker-content">

          <picker name="formaddress" bindchange="changeRegin" mode="region" value="{{region}}">

            <!-- <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view> -->

            <view class="tui-picker-detail">{{region}}</view>

          </picker>

        </view>

 

      </view>

    </view>

 

    <view class='item'>

      详细地址:

      <view class='bk'>

        <!-- <textarea class="textarea" placeholder='详细地址' auto-height value='{{geren.sysUserDetail.detailAddress}}' maxlength='100'></textarea> -->

        <input name="formdetailAddress" class="textarea" placeholder="{{detailgeren.detailAddress}}" value='{{detailgeren.detailAddress}}' bindinput="detailAddress" maxlength='100' auto-height/>

 

      </view>

    </view>

 

    <!-- <button class='btn' bindtap='baocun'>保存</button> -->

    <view class='anniu'>

      <button class='btn' formType="submit">保存</button>

      <button class='btn' formType="reset">重置</button>

    </view>

 

  </form>



formSubmit: function (e) {

    console.log('form发生了submit事件,携带数据为:', e.detail.value);

  },

 

let app = getApp();

Page({

  data: {

    phone: "",

    pwd: "",

 

    sex: "男"

  },

  formSubmit: function (e) {

    console.log('form发生了submit事件,携带数据为:', e.detail.value);

    let { phone, pwd, isPub, sex } = e.detail.value;

 

    this.setData({

      warn: "",

      isSubmit: true,

      phone,

      pwd,

      isPub,

      sex

    })

  },

  formReset: function () {

    console.log('form发生了reset事件')

  }

})


查看更多关于小程序提交表单的功能-获取用户输入文本框的值的详细内容...

  阅读:3356次