Comparing two text boxes for Integer value in jquery with number validation

Question

I have two text box. one is From date and another is To date. i validate both text box with number. but my requirement is if i fill from date 700 than TO date accept greater than 700.
Here is my HTML

$("#from").keypress(function(e) {
  //if the letter is not digit then display error and don't type anything
  if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    //display error message
    $("#errmsg").html("Digits Only").show().fadeOut("slow").css("color", "red");;
    return false;
  }
});
$("#to").keypress(function(e) {
  //if the letter is not digit then display error and don't type anything
  if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    //display error message
    $("#errmsg").html("Digits Only").show().fadeOut("slow").css("color", "red");;
    return false;
  }
});
$("#searchsubmit").click(function() {
  var to = $("#to").val();
  var from = $("#from").val();
  if (to == "" && from == "") {
    //alert('Please Provide Era Value For From And To');
    $("#response").html("Please Provide Era Value For From And To").show().fadeOut(3000).css("color", "red");
    //window.location();
  } else {
    var info = 'to=' + to + '&from=' + from; {
      if (info) {
        //alert(info);
        window.location.href = "timeline.php?from=" + from + '&to=' + to;;
      } else {
        alert('No Data Found');
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="info"> From </span>
<input class="erainput" name="from" id="from" type="text" placeholder="UP To 700" required />
</span>
<span class="eraform">
    <span id="errmsg"></span>
<span class="info"> To </span>
<input class="erainput" name="to" id="to" type="text" placeholder="2000" required />
</span>
<span class="eraform">
  <button type="submit" id="searchsubmit" name="submit" class="eraBtn"> Search <i class="fa fa-search"></i> </button>
</span>

Thanks

mplungjan · Accepted Answer · 2017-05-11 06:27:26Z

DRY (don't repeat yourself)
use parseInt
use Ajax
test isNaN
test pasting (on input)
use a button - please see changes to your HTML, I also added a response div
NEVER call anything in a form name="submit" it hides the form submit event

info will ALWAYS be true - you do not have an empty string

$("#from, #to").on("keypress input", function(e) {
  //if the letter is not digit then display error and don't type anything
  if (isNaN($(this).val()) || (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))) {
    //display error message
    $(this).val("");
    $("#errmsg").html("Digits Only").show().fadeOut("slow").css("color", "red");;
    return false;
  }
});
$("#searchsubmit").click(function() {
  var to = parseInt($("#to").val(), 10);
  var from = parseInt($("#from").val(), 10);
  if (to == ""    || from == "" ||
      isNaN(to)   || isNaN(from)|| // not likely possible now
      to   < from ||
      from < 700  ||
      to   > 2000 
  ) {
    $("#response").html("Please provide valid Era values for From and To").show().fadeOut(3000).css("color", "red");
  } else {
    var info = 'to=' + to + '&from=' + from;
    console.log(info);
    $("#response").load("timeline.php?from=" + from + '&to=' + to);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<span class="info"> From </span>
<input class="erainput" name="from" id="from" type="text" placeholder="UP To 700" required />
</span>
<span class="eraform">
    <span id="errmsg"></span>
<span class="info"> To </span>
<input class="erainput" name="to" id="to" type="text" placeholder="2000" required />
</span>
<span class="eraform">
  <button type="button" id="searchsubmit" class="eraBtn"> Search <i class="fa fa-search"></i> </button>
</span>
<div id="response"></div>

Hi Sir, sorry for my answer when I see yours I felt there is a great difference between our experience.

mplungjan · Accepted Answer · 2017-05-11 06:24:31Z

Use below code and modify with your requirements.

$("#searchsubmit").click(function (e) {
  var from = parseInt($("#from").val());
  var to = parseInt($("#to").val());
  if(to < from)
  {
     alert("TO value must be greater than FROM");
  }
  else 
  {
     //submit form
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="info"> From </span>
<input class="erainput" name="from" id="from" type="text" placeholder="UP To 700" required  />
</span>
<span class="eraform">
<span id="errmsg"></span>
<span class="info"> To </span>
<input class="erainput" name="to" id="to"  type="text" placeholder="2000" required  />
</span>
<span class="eraform">
<button type="submit" id="searchsubmit" name="submit" class="eraBtn"> Search <i class="fa fa-search"></i> </button>
</span>

Collectives™ on Stack Overflow

Comparing two text boxes for Integer value in jquery with number validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related