CODEWITHSUNDEEP
javascriptjqueryinput
Sikander
Sikander

Reputation: 2835

jQuery : get values of text field when typing

I want to get text field value while typing.

<input type="text" name="noofppl">

I want to get its value while typing, so if someone types less than 20 I give an alert that the minimum number allowed is 20.

Please help me with this.

This is what I've tried: 

$( "#people" ).focusout(function() {
  if($(this).val()<20){
    alert("Minimum number of people should be  20"); 
  }
});

Upvotes: 1

Views: 15748

Answers (7)

anteAdamovic
anteAdamovic

Reputation: 1468

$('#myInput').on('keyup', function() {
  console.log($('#myInput')[0].value.length);
});
<input id="myInput" type="text" name="noofppl">

Upvotes: 0

Maulik
Maulik

Reputation: 785

See the below Example :

$("#txt").keyup(function(event) {
  text = $(this).val();
  $("div").text(text);
});
$('#txt').focusout(function(){
  if($(this).val().length < 20){
  	alert(" Minimum 20 Words required...!! ");
	}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="noofppl" id="txt">
<div>

</div>

Upvotes: 3

Melcma
Melcma

Reputation: 618

I'd use input event listener or something similar, here is quick example how you can achieve it: jsbin

const $input = $('#input');
let t;
$input.on('input', (el) => {
  clearTimeout(t);
  t = setTimeout(() => {
    if ($input.val().length < 20) {
      alert('shorter than 20 characters');      
    } else {
      alert('longer or equal than 20 characters');
    }
  }, 400);
})

More: MDN input reference

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution

$('input[name="noofppl"]').keyup(function(){
  console.log($(this).val());
});
 
$('input[name="noofppl"]').focusout(function(){
  if($(this).val().length < 20){
    alert("Minimum character is 20!!!");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="noofppl">

I've used jQuery keyup & focusout method.

keyup for getting the continous value while typing.

focousout is for checking the number of characters.

Reference document: https://api.jquery.com/keyup/

Hope this will help you.

Upvotes: 1

Narendra Dharajiya
Narendra Dharajiya

Reputation: 11

please check this :

<input type="text" name="noofppl">
$('input').keyup(function(){var yourvalue = $(this).val(); })

This should work for you

Upvotes: 0

Awais
Awais

Reputation: 117

Use jQuery function keyup. Get the value every time valitate. Display message every time every time when keyup You have to use keyup evet.

Upvotes: -1

mrdeadsven
mrdeadsven

Reputation: 774

Could it be that you are looking for something like this? Add a label behind your input to show the text and give your input field an ID 'noofppl'. Made this code a while ago to limit my textarea.

var textarea = document.getElementById('noofppl');

textarea.on("keypress", function() {
              var char_label = document.getElementById('charcount_text');

              var count = textarea.value.length;
              var max = 20;

              var remaining = max - count;
              if (remaining <= 0) {
                char_label.innerHTML = '20 character limit reached.';
              } else {
                char_label.innerHTML = remaining +"/20 left";
              }
            });

Upvotes: 0

Related Questions