1. 程式人生 > >微信小程式form表單的應用

微信小程式form表單的應用

<form bindsubmit="formSubmit" bindreset="formReset">
 <view>選擇類別:</view>
  <view class="section section_gap">
    <radio-group name="radio-group">
      <label><radio value="radio1"/>愛情</label>
      <label><radio value="radio2"/>事業</label>
      <label><radio value="radio3"/>友情</label>
      <label><radio value="radio4"/>責任</label>
      <label><radio value="radio5"/>前途</label>
    </radio-group>
  </view>

 <text class="txt">我的姓名:</text>
  <view class="section">
    <input name="input" />
  </view>
 
  <text>我的頭銜:</text>
  <view class="section">
    <input name="input"/>
  </view>

<text class="txt">介紹一下我自己:</text> 
<view class="section1">
  <textarea placeholder="" focus="{{focus}}" />
</view>



  <text class="txt">需要支付:</text>
  <view class="section" type="number">
    <input name="input" placeholder="0.01" />
  </view>



  <view class="btn-area">
    <button formType="submit" style="background:#ff9900">提交</button>
  </view>
</form>
Page({
   data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit: function(e) {
    console.log(e.detail.value.textarea)
  },
  formSubmit: function(e) {
    console.log('form發生了submit事件,攜帶資料為:', e.detail.value)
  },
  formReset: function() {
    console.log('form發生了reset事件')
  }
})

.section{
    border:1px solid #ddd;
    width:96%;
    margin:auto;
    height:80rpx;
    margin-top:20rpx;
}
.section1{
    border:1px solid #ddd;
    width:96%;
    margin:auto;
    margin-top:20rpx;
}


相關推薦

程式form應用

<form bindsubmit="formSubmit" bindreset="formReset"> <view>選擇類別:</view> <vie

程式form提交到資料庫

        1.小程式目錄圖 js檔案是邏輯控制,主要是它傳送請求和接收資料, json 用於此頁面區域性 配置並且覆蓋全域性app.json配置, wxss用於頁面的樣式設定, wxml就是頁面,相當於html

程式-form-獲取使用者輸入文字框的值

微信小程式-form表單-獲取使用者輸入文字框的值 <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bi

程式--form訊息推送

小程式實現向用戶發推送訊息,需要前端傳formid給後臺。後臺便可以實現訊息推送。那麼formid怎麼獲取呢? formid 肯定是寫在form表單中的,通過button按鈕觸發,一個簡單的例子: <form bindsubmit="formSubmit" report-submit="true" &

程式 form提交 點選鍵盤的完成自動執行

注意:使用好bindconfirm屬性<form bindsubmit="searchSubmit" action="">    <view class="weui-search-bar">        <view class="weui-

程式獲取初始值,提交改變過的資料

 form表單,通過onload(options)獲取的引數給輸入框賦值,提交改變後的引數 <form bindsubmit="submitForm"> <view class='item'> <view class='label'>聯絡

程式驗證

表單驗證 何為表單驗證呢? 百度百科給出的回答是這樣的: 表單驗證是javascript中的高階選項之一。JavaScript 可用來在資料被送往伺服器前對 HTML 表單中的這些輸入資料進行驗證  [1]  。 被 Jav

程式獲取資料

最簡單的方式我們呼叫bindinput方法 當鍵盤進行輸入的時候會觸發input的事件 “` bindValue (e) { //value就是表單中的資料 let value = e.detail.value; }

程式獲取元素的輸入值

有時我們不想通過表單的submit事件來獲取表單元素的value值,但又不能通過jq那樣的方式,所以這裡列舉一下如何獲取表單元素的值 1.input的輸入值: 首先在input上繫結事件 <input bindinput="quzhi_input"></i

程式內獲取單元件的值

微信小程式中的input等表單元件在form中,可以直接通過submit的方法來獲取值 而在非form中,只能通過監聽input的鍵盤輸入獲取 WXML <input placeholder

[程式]提交返回成功後自動清空的值

 有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群   173683895  、 526474645 ; 正文: 實現思路: 給每一個input繫結相同的value

程式-02(元件應用主要是style應用

目錄  居中 不換行 邊學邊更新了 居中 <view class='labelStyle'><label>使用者登陸</label></view> .labelStyle{ display: flex;

程式 自定義選複選按鈕組的實現(用於實現購物車產品列表功能)

  (一)單選按鈕組 模型圖如下:  index.js Page({ data: { parameter: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模擬商

程式 form和input組合使用獲取value為空的原因

<form bindsubmit='replayComment'> <view class='reply'> <input placeholder='

程式開發:提高應用速度技巧

小程式科普類的文章已經很多了,今天這裡講的是針對小程式的優化方法,可以有效提高小程式的響應速度和使用者體驗。當然,開發體驗也提高不少。 一、提高頁面載入速度 在小程式這個環境下,怎樣提高頁面載入

程式入門六: WebSocket應用

例項內容 今天主要說一下微信的WebSocket介面以及在小程式中的使用。 WebSocket是什麼(簡述) 微信的WebSocket介面和HTML5的WebSocket基本一樣,是HTTP協議升級來的,做為一個新的Socket在B/S上使用,它實現了瀏覽器與伺服

django&程式 form提交遇到json轉換坑

老實說, 研究了一個下午, 覺得其實小程式還是蠻清晰的。 但。。在表單提交的時候遇到了坑。 有點坑大發。。。所以發文記錄一發。。。 1、報錯:’str’ object has no attribute ‘read’ 後臺接收json資料,網上能搜尋到

程式裡面的步除錯和變數檢視

在微信小程式開始學習與開發的過程中,總有一些東西,想看看它跑起來的內容與我們程式設計時想的是否一致,於是就想到了能不能單步除錯或者打出一些我們想要的變數的內容,以便我們做進一步的開發和調整,現在我就要介紹下微信小程式的一般用到的除錯方法和列印日誌以及看到變數裡面的執行值。

程式 TOP100 榜

  8 月 12 日,阿拉丁資料統計平臺釋出了國內第一份小程式 TOP100 榜單,摩拜單車成為全榜第一!   該榜單資料來源於阿拉丁小程式統計平臺檢測、合作、如有贊等,並經過企業電話調研和實地走訪企業等校準,選取人氣、搜尋、使用、分享四大指標來衡量一款小程式的活躍度。   目前阿拉丁收錄了超過 10

程式+ES6新特性應用】字串模板:美元符號$+大括號{}變數的寫法

1、字串模板簡介 ES6新特性中的字串模板允許使用英文字元抑音符號`(提示:這裡我們不能將其理解為單引號)來建立字串,並且在該字串中可以包含都【美元符號+大括號】包裹的變數格式:console.lo