Detailed description of form submission and value examples in WeChat applets, and small program form

Detailed descriptions of form submission and value examples in the applet, And the applet form

Detailed description of form submission and value examples in the Applet

We know that if we directly add bindinput to input, for example, <input bindinput = "onUsernameInput"/>, we can directly use e. detail. value in onUsernameInput, that is:

onUsernameInput : function(e) {  e.detail.value;}

However, if there are multiple input controls, we cannot add bindinput and bindchange methods for each control to obtain the value. We have to do this:

Step 1: add the from control and specify the bindsubmit attribute value for it.
Step 2: add the input control to form and specify the name attribute value for it.
Step 3: add the button control and specify form-type = "submit" for it ".
Step 4: Use e. detail. value. xxx or e. detail. value ["xxx"] When setting a value in js, where xxx is the name attribute value.

. Wxml code

<Form bindsubmit = "reg"> <view> User: <input type = "text" name = "username"/> </view> <view> password: <input password name = "password"/> </view> <view> interest: <checkbox-group name = "cb"> <label> <checkbox value = "A"/> Table Tennis </label> <checkbox value = "B" checked =" false "/> badminton </label> <checkbox value =" C "checked =" {checked} "/> volleyball </label> </checkbox-group> </view> <view> level: <radio-group name = "r"> <label> <radio value = "a"/> beginner </label> <radio value = "B"/> intermediate </label> <radio value = "c"/> advanced </label> </radio-group> </view> <button type = "primary "form-type =" submit "> Registration </button> </view> </form>

. Js Code

reg: function(e) {  console.log(e.detail.value);    wx.showToast({    title: e.detail.value["cb"].join(","),    icon: "success",    duration: 2000  });}

Important

<Type in input type = "text" is different from type in HTML,

The input attribute of the applet is type, which has several optional values:

Text: No need to explain
Number: Numeric keyboard (no decimal point)
Idcard: Numeric keyboard (no decimal point, X key)
Digit: Numeric keyboard (with decimal point)

Note:: Number indicates that there is no decimal point, and digit indicates that there is a decimal point. I seriously suspect this is a BUG.

<Input password/> indicates the password box (I personally think it is too strange to directly call the password tag ).

For the "badminton" item, we intentionally wrote checked = "false". We tried to make it unselected, but we did not wish it, but it was selected, which is the same as HTML, the checked attribute value is not recognized. Only the checked attribute value is recognized. However, if we use {}, it will be different. For example, if we select the "Volleyball" item, the selection or not will be affected by data. checked.

The value of input is described above. e. detail. value. xxx or e. detail. value ["xxx"] is used, where xxx is the name attribute.

The checkbox value is similar to input, but xxx is the name of the checkbox-group. The obtained value is an array consisting of the value of the selected item, for example, if "Table Tennis" and "Volleyball" are selected, the result is: ["1", "3"]. In particular, this order is related to our selection. For example, we select "Volleyball" and then "Table Tennis". The result is ["3", "1"].

The value of radio is the same as that of input. The value of the selected item is returned, and the value of the selected item is "".

If you do not know the value type, you can also use console. log (e. detail. value); to output all values, and then observe the values in the debugging Console.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!