Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to check if period sign(.) is removed from the word in textbox in jQuery?

I want to know if it is possible to hit an event if the period sign . is removed from textbox. for example I have a textbox#Quantity which takes numeric values as input with period sign

enter image description here

and i have a drop down control#unitValue which have three option

I had successfully hit an event on period sign . key press as follows

$("#Quantity").keypress(function(e) {
    if(e.which == 46) {
        //successfully disabled Gram in Unit
    }
}); 

Now I want to enable "Gram" option in the drop down if the period sign . is removed from the textbox. I have an idea but don't if it is right to do so. Idea is:- On any key press add each letter to an array, Then on backspace key press, I check if the letter on the array index is period sign . or not if it is the . sign then enable the "Gram"

Any help will be Appreciated

Thank you

like image 975
Avinash Avatar asked Jan 21 '16 07:01

Avinash


People also ask

Is number validation in jQuery?

The jQuery $. isNumeric() method is used to check whether the entered number is numeric or not. $. isNumeric() method: It is used to check whether the given argument is a numeric value or not.


2 Answers

JS Fiddle - updated -using .prop() instead

// attach the functionality on multi events
$('#inpt').on('keypress input change', function() {
  var Gram = $('#slct').children('[value="1"]');

  // if the indexOf "." is > -1, then there's a dot 
  if ($(this).val().indexOf('.') > -1) {

    // disable the Gram option
    Gram.prop('disabled', true);

    // ====================== this part was added by @SarathChandra 
    // reset the drop down if Gram option was selected
    if ($('#slct').val() === "1" || $('#slct').val() === null) {
      $('#slct').val("0");
    }
      // ====================== @SarathChandra Thank you for the improvement

  } else {

    // if it the dot was removed, we set the disabled prop to false
    Gram.prop('disabled', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="inpt" type="text">
<select id="slct">
  <option value="0">- select -</option>
  <option value="1">Gram</option>
  <option value="2">Kilo</option>
  <option value="3">Quntal</option>
</select>

EDIT: Thanks to @SarathChandra added these couple lines:

if($('#slct').val() == "1" || $('#slct').val() == null){
      $('#slct').val("0");
}

To fix it when the entered value doesn't contain a ., and Gram was selected THEN period was add, it resets the dropdown.

like image 57
Mi-Creativity Avatar answered Oct 25 '22 22:10

Mi-Creativity


JsFiddle Demo

You could use this.

$(document).on('keyup paste', '#Quantity', function() {        
  if ($(this).val().indexOf('.') > -1) {
    // disable the Gram option
    $('#Unit').children('[value="1"]').prop('disabled', true);
  } else{
    $('#Unit').children('[value="1"]').prop('disabled', false);
	  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="Quantity" type="text">
    <select id="Unit">
      <option value="0">- select -</option>
      <option value="1">Gram</option>
      <option value="2">Kilo</option>
      <option value="3">Quntal</option>
    </select>
like image 29
Uttam Kumar Roy Avatar answered Oct 25 '22 21:10

Uttam Kumar Roy