CODEWITHSUNDEEP
jqueryhtmlinput-field
Muchtar
Muchtar

Reputation: 122

html check if input is greater than other input after submit

I have two input fields and want to check if one field is greater than the other. I want to check this before the submit-Button is clicked. 

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>


<button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>

Do I need jquery? I want to do this check before checking the submt button.

Upvotes: 2

Views: 12577

Answers (5)

Anna Jeanine
Anna Jeanine

Reputation: 4125

Try adding some JavaScript to your code! Maybe like such:

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>


<button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>
<div id=log><div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $('#submit_check').on('submit', function (e) {
        if (parseInt($("#min_value").val()) > parseInt($("#max_value").val())) {
            document.getElementById('log').innerHTML = "min is larger than max";
        } else {
            document.getElementById('log').innerHTML = "max is larger than min";
        }
    }
);

</script>

Upvotes: 3

Tonmoy Nandy
Tonmoy Nandy

Reputation: 381

You can try like his also

HTML

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>

<button type = "submit" name = "submitcheck" id = "submit_check" onclick="return validate();"> Let´s Go </button>

Script

function validate(){
     var max = parseInt(document.getElementById('max_value').value);
     var min = parseInt(document.getElementById('min_value').value);
     if(min > max){
         alert('Minvalue is greter than Maxvalue');
          return false;
     }else{
           alert('Maxvalue is greter than Minvalue');
          return false;
     }

}

Thanks,

Upvotes: 0

frnt
frnt

Reputation: 8795

Try as below, it checks if value of first input is greater then second or not, but using blur event Listener before clicking submit button.

var frst = document.querySelector("#min_value");
var secnd = document.querySelector("#max_value");
var para = document.createElement("p");
function blr(){
  var ab = frst.value;
  var vc = secnd.value;
  if(ab == "" && vc == ""){
  para.textContent = "Please enter value in both.";
  document.body.appendChild(para);
  }
  else if(ab >= vc){
  para.textContent = "Value present in first input is greater then second.";
  document.body.appendChild(para);
  }
  else if(vc >= ab){
    para.textContent = "Value present in Second input is greater then First.";
  document.body.appendChild(para);
  }
}
secnd.addEventListener("blur",blr);
<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>


<button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>

Upvotes: 2

Edu
Edu

Reputation: 810

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form onsubmit="return validate();">
    <input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

    <input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>

    <button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>

</form>

<script>
function validate() {
if ($("#min_value").val() > $("#max_value").val()) {
    
    alert("min_value field > max_value");
} else {
    alert("max_value field > min_value");
}
}
</script>

Upvotes: 0

Zdeněk Bednař&#237;k
Zdeněk Bednař&#237;k

Reputation: 257

HTML is only a markup language. If you want your web to have some functionality you have to use JavaScript Jquery or Php.

You can try something like this:

Ust <form> tag attribute onsubmit:

<form name="myForm" onsubmit="return validateForm()" method="post">

Upvotes: 0

Related Questions