CODEWITHSUNDEEP
javascript
Frank Ford
Frank Ford

Reputation: 73

Auto Submit Form with Javascript

function onSubmit() {
  if (document.getElementById('password').value == '1' &&   document.getElementById('password2').value == '1') {
  window.location.href = 'http://google.co.in'; 
  }
  else{ 
    alert('Please check your passcode and try again');
  }
}
<fieldset>
    <form class="hero-form" action="#">
      <div class="row-fluid">
        <label>Enter your passcode</label>
        <input type="password" name="password" maxlength="1" class="span7" id="password"  required/>
        <input type="password" name="password" maxlength="1" class="span7" id="password2"  required/>
      </div>
    </form>
</fieldset>
 <button class="btn btn-info btn-large span5" id="joe_btn" onclick="onSubmit()">Enter</button>

Is it possible to have the form auto submit after the password is entered, instead of having to press a submit button? For example, allowing the user to keep trying numbers until they get it correct.

Upvotes: 1

Views: 302

Answers (2)

wxsm
wxsm

Reputation: 586

function onSubmit() {
  if (document.getElementById('password').value && document.getElementById('password2').value) {
    if (document.getElementById('password').value == '1' && document.getElementById('password2').value == '1') {
      window.location.href = 'http://google.co.in';
    } else {
      alert('Please check your passcode and try again');
    }
  }
}
<fieldset>
  <form class="hero-form" action="#">
    <div class="row-fluid">
      <label>Enter your passcode</label>
      <input type="password" name="password" maxlength="1" class="span7" id="password" required oninput="onSubmit()" />
      <input type="password" name="password" maxlength="1" class="span7" id="password2" required oninput="onSubmit()" />
    </div>
  </form>
</fieldset>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177694

You mean something like this? I delegate the test of input to the form

I also fixed your weird HTML structure

window.addEventListener("load", function() {
  document.getElementById("heroForm").addEventListener("input", function(e) {
    const val1 = document.getElementById('password').value;
    const val2 = document.getElementById('password2').value;
    if (val1 && val2) {
      if (val1 === '1' && val2 === '1') {
        window.location.href = 'http://google.co.in';
      } else {
        alert('Please check your passcode and try again');
      }
    }
  })
})
<form id="heroForm" class="hero-form" action="#">
  <fieldset class="row-fluid">
    <label>Enter your passcode</label>
    <input type="password" name="password" maxlength="1" class="span7" id="password" required/>
    <input type="password" name="password" maxlength="1" class="span7" id="password2" required/>
  </fieldset>
</form>

Upvotes: 1

Related Questions