On Enter hit authorization

Question

I'm trying to make authentication/registration page via bootstrap on wordpress Here is my code which I inserted with Bootstrap Modal.

The problem is that when I enter login/password and hit Enter button, it just closes modal. when I click to open the modal again, my typed information is there and I still can click login button to login. I coped code from WordPress login page (which engine I'm currently using).

How to make Enter log me automatically?

<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h5 id="Login">
    <ul class="nav nav-pills">
     <li class="active"><a href="#loginpill" data-toggle="pill">ავტორიზაცია</a></li>
     <li><a href="#registrationpill" data-toggle="pill">რეგისტრაცია</a></li>
    </ul>
   </h5>
 </div>
<div class="pill-content">
 <div class="pill-pane active" id="loginpill">
  <div class="modal-body">
   <form name="loginform" id="loginform" action="/wp-login.php" method="post">
    <p>
     <input type="text" name="log" id="user_login" class="input span5" style="height:50px;font-size:20px" placeholder="სახელი" size="40" /></label>
    </p>
    <p>
     <input type="password" name="pwd" id="user_pass" class="input span5" style="height:50px;font-size:20px"  placeholder="პაროლი" size="40" /></label>
    </p>
    <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> დამიმახსოვრე</label></p>
  </div>
  <div class="modal-footer">
   <a href="/wp-login.php?action=lostpassword" class="pull-left" title="Password Lost and Found">პაროლის აღდგენა</a>
   <button class="btn" data-dismiss="modal" aria-hidden="true">დახურვა</button>
   <input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary" value="შესვლა" />
   <input type="hidden" name="redirect_to" value="/" />
   <input type="hidden" name="testcookie" value="1" />
  </div>
   </form>
 </div>
 <div class="pill-pane" id="registrationpill">.v..</div>
</div>
</div>

Answer 1

Try putting the button that closes the modal outside of <form> :

<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h5 id="Login">
    <ul class="nav nav-pills">
     <li class="active"><a href="#loginpill" data-toggle="pill">ავტორიზაცია</a></li>
     <li><a href="#registrationpill" data-toggle="pill">რეგისტრაცია</a></li>
    </ul>
   </h5>
 </div>
<div class="pill-content">
 <div class="pill-pane active" id="loginpill">
  <div class="modal-body">
   <form name="loginform" id="loginform" action="/wp-login.php" method="post">
    <p>
     <input type="text" name="log" id="user_login" class="input span5" style="height:50px;font-size:20px" placeholder="სახელი" size="40" /></label>
    </p>
    <p>
     <input type="password" name="pwd" id="user_pass" class="input span5" style="height:50px;font-size:20px"  placeholder="პაროლი" size="40" /></label>
    </p>
    <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> დამიმახსოვრე</label></p>
   </form>
  </div>
  <div class="modal-footer">
   <a href="/wp-login.php?action=lostpassword" class="pull-left" title="Password Lost and Found">პაროლის აღდგენა</a>
   <button class="btn" data-dismiss="modal" aria-hidden="true">დახურვა</button>
   <input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary" value="შესვლა" />
   <input type="hidden" name="redirect_to" value="/" />
   <input type="hidden" name="testcookie" value="1" />
  </div>
 </div>
 <div class="pill-pane" id="registrationpill">.v..</div>
</div>
</div>