• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序-form表单-获取用户输入文本框的值

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序-form表单-获取用户输入文本框的值

<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事件\')
  }
})

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序之页面跳转传递参数问题发布时间:2022-07-18
下一篇:
社区团购小程序开发 平邑网站建设网店制作发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap