CODEWITHSUNDEEP
javascriptjqueryhtmlonkeypress
Jesse
Jesse

Reputation: 59

how do i use an an enter key stroke to submit a username and password

I have a login button that works fine,it logs a user in etc.. but i want to allow the user to press the enter key to login as well. how do i do this.I tried a test using onkeypress but it didnt do anything as bellow

<form>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Username id="username" />
       </div>
      <div class="form-group">
      <input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction() /> //i just tried this myFunction() to see if it would give an alert but it doesnt
      </div>
     <div class="form-group">
   <button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>

  </div>
  </div>
  </form>

function myFunction()
 { alert("button pressed")}

so how do i use the enter key to submit my request in javascript and jquery

Upvotes: 1

Views: 219

Answers (2)

user6063698
user6063698

Reputation:

First you need to send the Event to the myFunction() function and add ID to your form to add submit manually::

HTML 

<form id='myForm'>
<!-- form actions (etc..) -->
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction(e) />
<!-- form actions (etc..) -->
</form>

Now in ASCII the reenter code is 13 all you need to check is when the pressed key is reenter (13) then you need to take the event key code and call the submit function:: 

function myFunction(e)
var code = (e.keyCode ? e.keyCode : e.which);
{
   if (code == "13")
    {
        //Calling the submit or clicking manually it 
        $( "#myForm" ).submit();   
    }
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337691

As you've placed the input within a form element which contains a submit button, you get this behaviour by default. To hook to it, use the submit event of the form, like this:

$('form').on('submit', function(e) {
  e.preventDefault(); // only used to stop the form submission in this example
  console.log('form submitted');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Username" id=" username" />
  </div>
  <div class="form-group ">
    <input type="password" class="form-control" placeholder="........" id="password" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
  </div>
</form>

Note that I fixed the missing " after the placeholder attribute in the first input. You also don't need the trailing space after all the attribute values, so I removed those too.

Upvotes: 1

Related Questions