Article From:https://segmentfault.com/q/1010000011140330
Question:

This is the case. I made a simple form template.

<template name='form1'>
  <form bindsubmit='formsubmit'>
    <input name='name'></input>
    <button form-type='submit'>Submit < /button>< /form>< /template>

Then, when calling this template, it is found that the submit button is invalid.

What I don’t understand is that if I don’t call temlate in the page, the submit button is normal.
Ask

Answer 0:

It shouldn’t be < input type=’submit’>? < button form-type> where did it come from?

Answer 1:

The reason was found because I had more than one view layer in CSS, which affected the click of button.

Answer 2:

What is the specific situation?
I don’t quite understand. Also encountered a button failure, now do not know how to do.

wxml

<view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="itemContainer">
      <view class="iconAndText">
        <image class="icons" src="../../images/must_write.png"></image>
        <view class="icon_text">Enterprise name < /view>< /view>< view class= "placeholderCon" >< input ClAss= "placeholder" placeholder-style='text-align:right'placeholder= "please enter" auto-focus/>< /View>< /view>< view class= "itemContainer" >< view class= "iconAndText">< image class= "icons" src= "../../images/must_write.png" > < /image>< view class= "icon_text" > contact telephone < /view>< /view>< view class= "placeholderCoN ">< input type= "number" maxlength= "11" class= "placeholder" placeholder-style='text-alIgn:right'placeholder= "please enter" auto-focus/>< /view>< /view>< view clasS= "itemContainer" >< view class= "iconAndText" >< image class= "icons" src= "../../images/must_write.png "> < /image>< view class= "icon_text" > model < /view>< /view>< view class= "placeholderCon" >< input class= "placeholder" PLaceholder-style='text-align:right'placeholder= "please enter" auto-focus/>< /view>< /vIew>< view class= "itemContainer" >< view class= "iconAndText" >< ImAge class= "icons" src= "../../images/must_write.png" > < /image>< view class= "icon_tExt "> engine < /view>< /view>< view class= "placeholderCon" >< INput class= "placeholder" placeholder-style='text-align:right'placeholder= "please enter" auto-focus/>< /view>< /view>< view class= "itemContainer" >< view class= "iconAndText ">< image class= "icons" src= "../../images/must_write.png" > < /image>< view class= "icon_text" > sell theme < /view>< /view>< view class= "placeHolderCon ">< input class= "placeholder" placeholder-style='text-align:right'placeholdeR= "please enter" auto-focus/>< /view>< /view>< view class= "itemContainer" >< view class= "iconAndText" >< image class= "icons" src= "../../images/must_writ"E.png "> < /image>< view class= "icon_text" > selling price < /view>< /view>< view class= "placeholderCon" >< input class= "placeholder" type= "number" placeHolder-style='text-align:right'placeholder= "please enter" auto-focus/>< /view>< /view≫< view class= "itemContainerDetail" >< view class= "iconAndTextDetail" >< image class= "icons" src= "../../images/must_write.png" > < /image>< view class= "icon_text" > selling content < /view>< /view>< /view>< view class= "itemContAinerDetailDetail ">< view class= "DetailDetail" >< textarea class= "placeholdErDetail "placeholder-style='text-align:right'placeholder=" please enter "name=" detail "/>";< /view>< /view>< view class= "btn-area" >< button class= "sub_but" formType= "" "Submit "> release the sale of < /button>< /view>< /form>< /view>

wxss

.icons {
  width: 30rpx;
  height: 30rpx;
  padding: 15rpx 15rpx 15rpx 15rpx;
}

.grayCon {
  background-color: #fff;
}

 .itemContainer {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  border-bottom: 1rpx solid #e5e5e5;
  padding: 10rpx 25rpx;
} 
.itemContainerDetail {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  /* border-bottom: 1rpx solid #e5e5e5; */
  padding: 10rpx 25rpx;
}
.itemContainerDetailDetail{
  display: flex;
  background-color: #fff;
  /* justify-content: space-between; */
  border-bottom: 1rpx solid #e5e5e5;
  padding: 10rpx 25rpx;
  border-radius: 13rpx;
}
 .DetailDetail{
  padding: 30rpx;
} 

.icon_text {
  padding: 15rpx;
  font-size: 33rpx;
}

.iconAndText {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.iconAndTextDetail{
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
}
 .placeholderCon{
  display: flex;
  flex-direction: row;
  width: 480rpx;
  align-items: center;
} 
.placeholder {
  font-size: 33rpx;
  width: 480rpx;
}
.placeholderDetail {
  font-size: 33rpx;
  width: 650rpx;
}
.sub_but{
  margin-top: 20rpx;
  width: 80%;
  color: #fff;
  background-color:red;
}

js

  formSubmit: function (e) {
    console.log('formA submit event occurred, carrying data: ', e.detail.value).},

Leave a Reply

Your email address will not be published. Required fields are marked *