CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashley Blyth
Ashley Blyth

Reputation: 149

How to make enter click a button

I have a button in my form that simply unhides a div, which contains the submit button for the form. I am using the script

I want the user when pressing enter (whilst inside the text input field) to simply click the button and not submit the form. Currently when pressing the enter key I can see the button being clicked for a split second before the form is submitted. How do I make it so a certain input area can click enter and click the button, but another text area pressing enter submits the final form.

I know I can use this script however it stops the enter key from working on the submit form input.

window.addEventListener('keypress', function (e) {
if (e.keyCode === 13) {
    e.preventDefault();
    feedTheList();
}
});

This is the input that I want the user to be able to press enter on to click the button shown below.

<label for="userAccountName">username</label><br>
        <input class="textField" type="text" name="username" 
id="userAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>
        <label for="userPassword">Password</label><br>
        <input class="textField" type="password" name="password"
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>

This is the button input that shows the hidden div (I want the enter key when inside the above input to click this button below.

<input class="btn_green_white_innerfade btn_medium" type="button" 
name="submit" id="SteamLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv()">

This is the hidden div input, I want the enter key on this input to submit the form

<input name="authcode" class="twofactorauthcode_entry_input 
authcode_placeholder" id="twofactorcode_entry" type="text" 
placeholder="enter your code here" autocomplete="off"/>

All of these inputs are inside of the following form 

<form action="/loginaction.php" method="post" name="submit" id='submit'>

and finally the showDiv() function is

function showDiv() {
document.getElementById('SteamLogin').style.display = "none";
document.getElementById('loadingGif').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
var username = document.getElementById("userAccountName").value;
document.getElementById("login_twofactorauth_message_entercode_accountname")
.innerText = username
document.getElementById('showme').style.display = "block";
document.getElementById('unhideme').style.display = "block";
},2000);

Upvotes: 2

Views: 363

Answers (1)

tklg
tklg

Reputation: 2642

You could add event listeners to the individual inputs - The #twofactorcode_entry input will submit the form when enter is pressed, while the .textField inputs will click the button.

const inputs = document.querySelectorAll('.textField');
const button = document.getElementById('SteamLogin');
const form = document.getElementById('form');
const twofactor = document.getElementById('twofactorcode_entry');
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('keypress', e => {
    if (e.key === 'Enter') {
      e.preventDefault();
      button.click();
    }
  });
}
button.addEventListener('click', e => {
  // submit the form instead of showing the hidden input if the input has text
  // if (twofactor.value.length) form.submit();
  showDiv();
});
twofactor.addEventListener('keypress', e => {
  if (e.key === 'Enter') {
    e.preventDefault();
    form.submit();
    alert('submitted form');
  }
});
function showDiv() {
  twofactor.classList.remove('hidden');
}
.hidden {
  display:none;
}
<form id="form">
  <label for="userAccountName">username</label><br>
  <input class="textField" type="text" name="username" 
  id="userAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>

  <label for="userPassword">Password</label><br>
  <input class="textField" type="password" name="password" 
  id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
  <!-- removed name="submit" so form.submit() works -->
  <input class="btn_green_white_innerfade btn_medium" type="button" id="SteamLogin"       value="Sign in" width="104" height="25" border="0" tabindex="5"><br>

  <input name="authcode" class="twofactorauthcode_entry_input 
  authcode_placeholder hidden" id="twofactorcode_entry" type="text" 
  placeholder="enter your code here" autocomplete="off"/>
</form>

Upvotes: 3

Related Questions