Element: how do you make a button as a submit button i.e. pressing enter should work

Created on 5 Jun 2017  ·  6Comments  ·  Source: ElemeFE/element

<template>
  <div class="app">
    <el-card class="box-card" style="margin-top: 10%;">
      <div  slot="header" class="clearfix">
          <span style="line-height: 36px;font-size:30px;float:left">Login Form</span>
          <a href="/register"><el-button size="large" style="float: right;">Register</el-button></a>
      </div>
      <el-form style="padding:17px" ref="form" :model="form"  :rules="rules2" label-width="100px">
        <el-form-item label="Username" prop="user">
          <el-input icon="edit" type="text" v-model="form.user"placeholder="john23"></el-input>
        </el-form-item>
        <el-form-item label="Password" prop="pass">
          <el-input icon="more" type="password" v-model="form.pass"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button id="doLogin" type="primary" @click="validate('form')" style="float: left;" :loading="form.isLoading">Login</el-button>
        </el-form-item>
        <el-form-item>
          <a href="/forgot_pass"><el-button type="text" @click="forgot" style="float: left;">Forgot Password?</el-button></a>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

THIS IS JUST MY FORM WHERE EL-BUTTON WITH ID="DOLOGIN SHOLUD RESPOND TO ENTER ..

Most helpful comment

  1. add native-type=submit to the button
  2. make sure there is a <el-form>
  3. <el-form @submit.native.prevent="submit">
  4. hit enter in any input

All 6 comments

Hello, this issue has been closed because it does not conform to our issue requirements. Please submit issues with issue-generator. More info can be found in #3693.

Add a hidden button[type=submit] to the form.
It works for me.

Forget above.
native-type is better.

<el-button id="doLogin" type="primary" native-type="submit" type @click="validate('form')" style="float: left;" :loading="form.isLoading">Login</el-button>

this not working!!!!

  1. add native-type=submit to the button
  2. make sure there is a <el-form>
  3. <el-form @submit.native.prevent="submit">
  4. hit enter in any input

@FrankFang thank you . works like a charm.

Was this page helpful?
0 / 5 - 0 ratings