CODEWITHSUNDEEP
javascriptjqueryhtml
charan kumar
charan kumar

Reputation: 2157

Call Enter event on keypress javascript

I have the following code which validates the mobile number of maximum of 10 digits, and I am using input type="text" because minlength wont work on type="number" but the problem is when i am trying to submit form on click of keyboard enter, it is not submitting

$('#welcome_submit').on('click', function() {
  $.ajax({
    url: '/url',
    data: $('#entry_form').serialize(),
    type: "POST",
    datatype: 'JSON',
    success: function(data) {
      alert('success');
    },
    error: function(error) {
      console.log("Error: error");
    },
  });
});
$(document).ready(function() {
  document.querySelector("input").addEventListener("keypress", function(evt) {
    if (evt.which < 48 || evt.which > 57) {
      evt.preventDefault();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="entry_form">
  <input type="text" value="" placeholder="Enter your Mobile Number" class="form-class" name="phone_no" autocomplete="off" autofocus maxlength="10" />
  <button id="welcome_submit" class="btn btn-continue welcome_first" type="submit">Continue</button>
</form>

Any ideas of filtering the Enter event '13' in the above code?

Upvotes: 0

Views: 59

Answers (2)

jperez
jperez

Reputation: 21

You can listen to the submit event on the form instead of listening to the keyup/keypress events on the input:

$('#entry_form').on('submit', function(event) {
  event.preventDefault();
  var serializedData = $(this).serialize();
  // Ajax request ...
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="entry_form">
  <input type="text" value="" placeholder="Enter your Mobile Number" class="form-class" name="phone_no" autocomplete="off" autofocus maxlength="10" />
  <button id="welcome_submit" class="btn btn-continue welcome_first" type="submit">Continue</button>
</form>

Upvotes: 1

CodeF0x
CodeF0x

Reputation: 2682

Check for the keycode 13 and submit the form:

if (evt.keyCode == '13') {
  document.querySelector('#welcome_submit').click();
}


$('#welcome_submit').on('click', function() {
  $.ajax({
    url: '/url',
    data: $('#entry_form').serialize(),
    type: "POST",
    datatype: 'JSON',
    success: function(data) {
      alert('success');
    },
    error: function(error) {
      console.log("Error: error");
    },
  });
});
$(document).ready(function() {
  document.querySelector("input").addEventListener("keypress", function(evt) {
    if (evt.which < 48 || evt.which > 57) {
      evt.preventDefault();
    }
    if (evt.keyCode == '13') {
      document.querySelector('#welcome_submit').click();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="entry_form">
  <input type="text" value="" placeholder="Enter your Mobile Number" class="form-class" name="phone_no" autocomplete="off" autofocus maxlength="10" />
  <button id="welcome_submit" class="btn btn-continue welcome_first" type="submit">Continue</button>
</form>

Upvotes: 1

Related Questions