精华内容
下载资源
问答
  • 微信小程序 提交表单

    2021-04-03 00:41:25
    wxml <form bindsubmit='res'> <van-field id="vipAccount" name="vipAccount" required clearable left label="会员号" title-width="3.2em" bind:click-icon="onClickIcon" ...

    wxml

    <form bindsubmit='res'>
    
    	<van-field 
    		id="vipAccount" 
    		name="vipAccount" 
    		required clearable left 
    		label="会员号" 
    		title-width="3.2em"
    		bind:click-icon="onClickIcon" 
    		custom-style="width:472rpx;float:left;padding-right:20rpx" />
    	
    	 <van-button form-type='{{ sub }}' id="bindBtn" disabled='{{ disable }}' type="primary" custom-style="width:100%;"
    	      size="large">绑定账号
    	    </van-button>
    	
    </form>
    

    js

    data: {
    	sub:"submit"
    },
    
    res: function (e) {
      console.log(666);
      vipAccount = e.detail.value.vipAccount
      console.log(vipAccount )
    },
    
    展开全文
  • 微信小程序提交表单

    2020-12-08 13:20:55
    先看效果 身份选择使用了picker 具体代码: form.wxml <view class="modify-form"> <form bindsubmit='getForm'> ...若出现,可换成bindinput方式,见这篇博文 微信小程序bindsubmit真机提交表单失败

    先看效果
    在这里插入图片描述
    身份选择使用了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.value
          this.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真机提交表单失败

    展开全文
  • 微信小程序提交表单清空输入框

    千次阅读 2020-03-26 22:37:09
    一、在input中绑定对象value,在提交成功后的回调中重新设置值为空。个人觉得这种方式适合表单数据比较少。 wxml代码 <form bindsubmit="submitForm"> <input name="title" maxlength="20" value="{{title...

    这里简单记录两种方法:
    一、在input中绑定对象value,在提交成功后的回调中重新设置值为空。个人觉得这种方式适合表单数据比较少。
    wxml代码

    <form bindsubmit="submitForm">
        <input name="title"  maxlength="20" value="{{title}}" />
        <input name="txt"  value="{{txt}}" />
        <button  formType="submit">提交</button>
    <form>
    

    js代码

    submitForm: function(e) {
      var that = this;
      var formData = e.detail.value;
      wx.request({
        url: apiurl,  //你要提交的接口
        data: formData,
        header: { 'Content-Type': 'application/json' },
        success: function (res) {
          if (res.data.status == 200) {
            wx.showToast({
              title: '提交成功',
            })
            that.setData({
              title: '',
              txt: ''
            })
          }
        }
      })
    }
    

    二、通过表单reset重置事件,不过这种方式不能直接使用form表单为我们提供的submit方法中的 e.detail.value提交数据。所有我们要利用input的bindinput或bindblur事件来获取表单数据,将数据setData保存下来。然后就可以用formReset方法将保存的数据传到后台。但是在提交之前要注意的一点,就是要检查下数据是否为空和数据格式是否符合规定。

    <form bindreset="formReset">
      <input name="title" data-name="title" maxlength="20" bindblur="getData" />
      <input name="txt" data-name="txt" bindblur="getData" />
      <button  formType="reset">提交</button>
    </form>
    

    js代码

    data:{
        cont:{
          title: "",
          txt: ""
        }
      },
      getData:function(e){
        //console.log(e)
        var name = e.currentTarget.dataset.name;
        this.data.cont[name] = e.detail.value;
        this.setData({
          cont: this.data.cont
        })
        console.log(this.data.cont)
      },
      formReset:function(e){
        //在此将保存的表单数据传递给后台
      }
    
    展开全文
  • 数据提交后台后设置为空 var that = this wx.request({ …… …… success: function (res) { if (res.data.code == 200) { ………… //直接将input值设置空 that.setData
    • 数据提交后台后设置为空
        var that = this
        wx.request({
            ……
            ……
          success: function (res) {
            if (res.data.code == 200) {
               …………
    
              //直接将input值设置空
              that.setData({
                userName: ''
           }
    展开全文
  • 微信小程序提交form表单 php后端附代码微信小程序form表单提交流程及前后端代码form表单提交界面示意图前端wxml代码js代码(只给出formSubmit部分)php代码(接受微信提交的信息,写入数据) 微信小程序form表单提交...
  • 微信小程序表单提交和验证以及正则表达式的用法介绍(附代码),字符,正则表达式,边界,符号,单词微信小程序表单提交和验证以及正则表达式的用法介绍(附代码)易采站长站,站长之家为您整理了微信小程序表单提交和...
  • minipro微信小程序提交带图片的表单目录说明upload_images├── pages│ ├── upload_info 提交表单│ └── display_info 信息展示├── utils│ └── util.js 工具├── cmf_banana.sql MySQL数据库表├─...
  • 小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSON的形式返回给...
  • 效果html代码是否公开信息手机号密码性别男女提交重置{{warn ? warn : "是否公开信息:"+isPub+",手机号:"+phone+",密码:"+pwd+",性别:"+sex}}css代码.section{display: flex;flex-direction: row;margin: 20...
  • 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的 ...       1.小程序相对于...
  • 本文实例讲述了微信小程序提交form操作。分享给大家供大家参考,具体如下: 在微信小程序中也存在form组件,bindsubmit这个属性可以用于携带 form 中的数据触发 submit 事件,它鞋带的参数形式如下: event.detail ...
  • 在我先前的博文 微信小程序提交表单 中,使用了form bindsubmit提交,这也是一种比较常见的方式,但是,在部分安卓真机上会出现获取不到表单内容的情况。 遇到这种情况,可以换成bindinput方式,不再使用form,给...
  • bindsubmit //绑定一个提交事件 report-submit //是否返回formId用于发送模板消息 模板消息官方解释:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html form表单...
  • 微信小程序无法操作DOM 也找不到代码调用form的reset的接口 也无法数据双向绑定 解决思路 form使用bindreset事件提交数据,而不是使用bindsubmit事件,这样点击提交后会自动清空表单内容 但是这样会带来一个新问题 ...
  • JS处理很多数据获取与提交! // pages/mine/index.js const Api = require("../../config/method.js"); const Session = require('../../common/auth/session') const tips = require('../../common/tips.js'); ...
  • 微信小程序form表单提交到数据库

    万次阅读 2018-11-28 12:39:32
    1.小程序目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html 2.Wxml文件代码 &lt;form ...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 实现思路: 给每一个input绑定相同的value对象,提交成功后把这个对象赋值为空. 下面看代码: <form bindsubmit='formsubmit'&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 625
精华内容 250
关键字:

微信小程序提交表单

微信小程序 订阅