Carlos Jhon manlulu Carlos Jhon manlulu - 4 months ago 12
Javascript Question

how will i enabled button when two textbox is equal

i tried this codes but it seems not working. my problem is how will i enabled the button when the two textbox is equal the value? the selected textbox is automatic will change depend on the quanity of item selected in multiple select.

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function getCount(){
var comboBoxes = document.querySelectorAll("#tags");
var selected = [];
for(var i=0,len=comboBoxes.length;i<len;i++){
var combo = comboBoxes[i];
var options = combo.children;
for(var j=0,length=options.length;j<length;j++){
var option = options[j];
if(option.selected){
selected.push(option.text);
}
}
}
$('#selected').val(selected.length);;

}

</script>
<script>
function disableSubmit(){
var firstValue = $("#quantitytotransfer").val();
var secondValue = $("#selected").val();
if ((firstValue == secondValue)) {
$("#submit").attr("disabled", false);
}else{
$("#submit").attr("disabled", true);
}
}

$("#selected").on("keyup", disableSubmit);
$("#quantitytotransfer").on("keyup", disableSubmit);

</script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">

<select id="tags" onchange="getCount()"multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>

<script>

</script>

Answer

It's very easy here is the code

<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">

<select id="tags" multiple style="width: 200px;">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>
<button id="submit" disabled type="button">Get Values</button>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

$(function() {
  $("#tags").on("change", function(e) {//Whenever tags are changed it will be called 
    $('#selected').val($(this).find('option').filter(":selected").length);//this will set the count or length of selected length
    $("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
  });

  var delay = (function() {// a delay function
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

  $('#quantitytotransfer, #selected').keyup(function() {//both text box are binded to event
    delay(function() {
      $("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
    }, 1000 );//a 1 second delay used you can change to more less
  });  
});
Comments