Adding a button to form

Viewed 127
<form class="user" method="POST" action="{{ url('login') }}?next={{next_url}}">
   {{ csrf_token()|raw }}
   <div class="form-group">
      <input type="email" name="email" required="required" id="email" aria-describedby="emailHelp" placeholder="{{ _('Enter Email Address...') }}">
   </div>
   <div class="form-group">
      <input type="password" name="password" required="required" autocomplete="false" id="password" placeholder="{{ _('Password') }}">
   </div>
   <button type="submit">
   {{_("Login")}}
   </button>
</form>

I need to add a button for register (example.com/register) below the login button. But when I add that when the user clicks on the Register button, It says that Email and password fields are required. How to resolve this issue?

Register button code: <button href="{{ url('register') }}">{{_("Create an Account!")}}</button>

4 Answers

Set type to button instead of submit (default value).

 <button type="button">Register</button>

Just do a seperate Form

<form action="{{ url('register') }}"
    <button type="submit">Create an Account!</button>
</form>

The HTML button tag can be of 3 types: submit, reset and button. If you do not specify the type it will default to submit. If the button then happens to be inside a form, it will try to submit it, hence the error you are getting.

There are a couple options you have here:

  • Specify the type of the button:

    <button type="button" href="{{url('register')}}">{{_("Create an Account!")}}</button>
    
  • Put the button outside the form:

    <form>
    </form>
    <button ....>
    
  • Use e.preventDefault() in javascript if you have an onclick method for the button:

    function buttonClick(e) {
        e.preventDefault();  // this will prevent the default behavior of a submit
                             // button which is to submit a form
        // ...
    }
    

Another Solution if you are using MVC.

You can create the button in your Function register (Controller) then just call it to form

Controller: <div class=\"col-lg-5 col-xs-5\"> <button type='button' class='btn btn-success btn-block' id='register' > Create Account </button> </div>

$data['btn']=$btn;

View:

<form>
     <?=@$btn ?>
</form>

Or just do other form

<form> 
 <button type='button' class='btn btn-success btn-block' id='register'> Create Account</button>
</form>
Related