1. 程式人生 > >微信小程式(十九)——表單資料提交和小程式表單賦值(組裝資料)

微信小程式(十九)——表單資料提交和小程式表單賦值(組裝資料)

前端表單程式碼.wxml:

<form >
  <view class='form-box'>
    <view class='form-item'>
      <view class='form-title cur'>姓名</view>
       <input placeholder='請輸入患者姓名' data-type='name' bindinput='changeOrderData' type='text' confirm-type='next'></input>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>年齡</view>
       <input placeholder='請輸入患者年齡' data-type='age' type='number' bindinput='changeOrderData' maxlength='3' confirm-type='next'></input>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>性別</view>
      <radio-group class="radio-group"  name='sex' data-type='sex' bindchange='changeOrderData'>
      <label class="radio" wx:for="{{sex}}" wx:key="id">
        <radio value="{{item.name}}"  checked="{{item.checked}}" />{{item.value}}
      </label>
    </radio-group>
    </view>
    <view class='form-item'>
      <view class='form-title cur'>手機</view>
      <input data-type='phone' bindinput='changeOrderData' type="number" placeholder="請輸入聯絡手機號"  maxlength='11'class='form-input'></input>
    </view>
  </view>

  <view class="doc-main">
  <button class='btn success block lg' bindtap='submitOrder' formType="reset"> 提交
    <text class='iconfont icon-roundright ml-xs'></text>
  </button>
</view>
</form>

事件繫結:

bindchange='changeOrderData'

.js程式碼:

 /**
   * 表單賦值
   */
  changeOrderData(e){
    let order_data = this.data.orderData;
    let data_type = e.target.dataset.type;
    let value = e.detail.value;
    order_data[data_type] = value;
    this.setData({
      'orderData': order_data
    })
  },

表單提交:

 submitOrder: function () {
    let _this = this;
    let order = this.data.orderData;

//驗證。。。

    util.ajax('請求路徑', order, 'POST', res1 => {
    
     })
}

相關推薦

程式——資料提交程式組裝資料

前端表單程式碼.wxml: <form > <view class='form-box'> <view class='form-item'>

程式學習筆記video視訊

<view class="section tc"> <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/

程式把玩radio元件

radio元件為單選元件與radio-group組合使用,使用方式和checkbox沒啥區別 主要屬性: wxml <!--設定監聽器,當點選radio時呼叫--> &

Python白學習之路—【檔案操作步驟】【檔案操作模式】

一、檔案操作步驟 step1:開啟檔案,得到檔案控制代碼並賦值給一個變數step2:通過控制代碼對檔案進行操作step3:關閉檔案 舉例: a = open('hello world', 'r', encoding = 'utf-8') #開啟 ‘hello world’ 檔案,得到檔案控制

強化學習案例

強化學習的小案例:假設有一個表格,4*4的,想要從其中的一個點到達左上角的點和右下角的點。比如這樣一個表格,想要從中間其中的一個點到達左上角的點,(0,0)或者是右下角的點(3,3)。首先先要創造一個環境。''' 建立一個格子世界 ''' import numpy as np

聊聊高並發理解並發編程的幾種&quot;性&quot; -- 可見性,有序性,原子性

sock clas 關註 條件 infoq zed 應該 單獨 ssa 這篇的主題本應該放在最初的幾篇。討論的是並發編程最基礎的幾個核心概念。可是這幾個概念又牽扯到非常多的實際技術。比方Java內存模型。各種鎖的實現,volatile的實現。原子變量等等,每個都可以展開

安裝命令

配置文件 軟件包 import 認證 安裝命令:yum,rpm19.1.rpm功能:rpm軟件包管理器常用選項:-ivh 安裝軟件包-Uvh 升級軟件包,如果原來軟件包不存在則安裝-Fvh 升級軟件包,如果原來的軟件包不存在則停止升級-e 卸載軟件包--nodeps 忽略依

selenium測試Java--截圖

int tput apache [] catch take screens umt ott package com.test.screenshot; import java.io.File; import java.io.IOException; import org

Python學習筆記

插入 imp 集合類 屬性 counter 以及 雙向 ror 簡單的 一、collections介紹   collections是Python中內建的一個集合模塊,提供了許多有用的集合類 二、namedtuple   namedtuple是一個函數,用來創建一個類似類的自

Linux系列教程——Linux文件系統管理之手工分區

image u盤 true 掛載 但是 常用 選項 光盤 幫助   上篇博客我們首先介紹了硬盤為什麽要分區,以及Linux系統的幾種分區類型,然後介紹了Linux系統幾個常用的文件系統命令,最後講解了掛載命令,並通過實例演示了如何掛載光盤和U盤。   本篇博客我們將介紹l

Linux命令 查看系統負載 uptime

time 長時間 連接 時間間隔 過大 post 依次 查看 local 一、命令介紹 Linux 系統中 uptime 命令主要用於獲取主機運行時長和查詢Linux系統負載等信息。 uptime 命令可以顯示系統已經運行了多長時間,信息顯示依次為:現在時間、系統已經運行時

JmeterLogic Controller 之 Module Controller and Include Controller

log and sampler control gpo nbsp jmx pos 開始 Module Controller ---模塊控制器   測試計劃設置“獨立運行沒每個線程組”     線程組2中使用Module Controller執行線程組1中的Sampler:

ShaderLab學習小結RenderToCubemap創建能反射周圍環境的效果

隨著 思路 edi 繼續 size material cubemap 緩沖區 方法 繼續用“ShaderLab學習小結(十八)cubemap”中所做的shader想要讓它能對周圍的環境進行反射思路就是要讓它的cubemap裏的內容是周圍環境的映射shader不變,就要想辦法

python學習筆記面向對象編程,類

時代 alt 類名 rst tps 玉溪 connect nbsp nco 一、面向對象編程 面向對象,是一種程序設計思想。 編程範式:編程範式就是你按照什麽方式去編程,去實現一個功能。不同的編程範式本質上代表對各種類型的任務采取的不同的解決問題的思路,兩種最重要的編程範式

Linux學習筆記文件壓縮

文件壓縮一、常見的壓縮文件 Windows .rar .zip .7z Linux .zip,.gz,.bz2,.xz,.tar.gz,.tar.bz2,.tar.xz文件壓縮可以節省內存,也可以節省傳輸速度 二、gzip首先創建了一個文件夾 /tmp/d6z/找了些比較大的文件寫入1.txt例如find

Linux 學習總結正則三劍客之grep

grepgrep 過濾器,egrep可以理解為grep的升級版1 格式:grep [-cinvABC] ‘word‘ filename-c:統計符合要求的行數例如 : grep -c ‘root‘ /etc/passwdgrep -c ‘‘ /etc/passwd 統計文件總行數-i:忽略大小寫-n:行號輸出

Hadoop學習之路MapReduce框架排序

ati ioe extends 一個用戶 必須 idt 構造 sta gpo 流量統計項目案例 樣本示例 需求 1、 統計每一個用戶(手機號)所耗費的總上行流量、總下行流量,總流量 2、 得出上題結果的基礎之上再加一個需求:將統計結果按照總流量倒序排序 3

QT之布局管理器

QT 布局管理器 水平 垂直 我們在之前的 GUI 開發中都是使用的是絕對定位,何謂絕對定位呢?就是我們直接在像素級指定各個組件的位置和大小。比如我們之前使用的 void QWidget::move(int x, int y);void QWidget::resize(int

C之宏定義

C語言 宏定義 #define 我們在 C 語言中經常會用到宏定義,那麽我們今天就對宏做個簡單的介紹。#define 是預處理期處理的單元實體之一;它定義的宏可以出現在程序的任意位置;它定義之後的代碼都可以使用這個宏。 #define 定義的宏常量可以直接使用,其本質

經典問題解析二

C++ 構造順序 const 成員函數 const 對象 this 指針 今天我們來探討下當程序中存在多個對象時,如何確定這些對象的析構順序?那麽單個對象創建時構造函數的調用順序是:a> 調用父類的構造過程(我們會在後面進行講解);b> 調用成員變量的構造函數(