jQuery not reacting to number input

user_9966984 0
Viewed 89

I have this code, where if I fill in specific input fields then it will 'enable' or in this case remove a class but when it comes to filling in an input field of a number it won't react to the input value of the number what is filled. I want it to when something is filled in then enable the button.

I'm setting up a validation that when not all the fields are filled in, you can't go to the next page but before that you need to fill in all the fields.

HTML

<input id="LAMINAAT" type="radio" name="group1" onclick="myFunction()" 
value="Laminaat" />
<label for="LAMINAAT">Laminaat</label>
<input id="PARKET" type="radio" name="group1" onclick="myFunction()" value="Parket" />
<label for="PARKET">Parket</label>
<input id="PVC" type="radio" name="group1" onclick="myFunction()" value="Pvc" />
<label for="PVC">PVC</label>
<hr>
<input id="JA2" type="radio" name="group3" value="Ja">
<label for="JA2" class="form-field__radio__label">Ja, meerprijs €1.50 per m<sup>2</sup></label><br>
<input id="NEE2" type="radio" name="group3" onclick="JaNeeFirst()" value="Nee">
<label for="NEE2">Nee</label>

<div id="form_JA2" class="desc desc3" style="float: inherit;">
  <h5>Hoeveel m<sup>2</sup> ondervloer wil je laten leggen?</h5>
  <input type="number" id="ondervloer" name="ondervloeren">
</div>
<hr>
<input id="JA3" type="radio" name="group4" value="Ja">
<label for="JA3" class="form-field__radio__label">Ja</label><br>
<input id="NEE3" type="radio" name="group4" onclick="JaNeeSecond()"     value="Nee">
<label for="NEE3">Nee</label>
<hr>
<input id="JA4" type="radio" name="group5" value="Ja">
<label for="JA4" class="form-field__radio__label">Ja, meerprijs €5.00 per meter</label><br>
<input id="NEE4" type="radio" name="group5" onclick="JaNeeThirth()" value="Nee">
<label for="NEE4">Nee</label>
<hr>
<input id="JA5" type="radio" name="group6" value="Ja">
<label for="JA5" class="form-field__radio__label">Ja, meerprijs €2.50 per m<sup>2</sup></label><br>
<input id="NEE5" type="radio" name="group6" onclick="JaNeeFourth()" value="Nee">
<label for="NEE5">Nee</label>
<hr>
<input id="JA6" type="radio" name="group7" value="Ja">
<label for="JA6" class="form-field__radio__label">Ja, meerprijs €20.00 per deur</label><br>
<input id="NEE6" type="radio" name="group7" onclick="JaNeeFifth()" value="Nee">
<label for="NEE6">Nee</label>
<hr>
<input id="JA7" type="radio" name="group8" value="Ja">
<label for="JA7" class="form-field__radio__label">Ja, meerprijs €20.00 per plint</label><br>
<input id="NEE7" type="radio" name="group8" onclick="JaNeeSixth()" value="Nee">
<label for="NEE7">Nee</label>
<hr>

<input id="tweedebutton" type="button" value="volgende stap" onclick="show_next('user_details','qualification','bar2'); topFunction()" />

jQuery

$(document).ready(function () {
  $("#tweedebutton").addClass("disabledbuttonNext");
  $('input[type="radio"]').on('change', function () {
    if ($('#LAMINAAT').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
      $("#tweedebutton").removeClass("disabledbuttonNext");
    } else if ($('#PARKET').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") && $('input[name="group6"]').is(":checked") ){
      $("#tweedebutton").removeClass("disabledbuttonNext");
    } else if ($('#PVC').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
      $("#tweedebutton").removeClass("disabledbuttonNext");
    }
    else{
      $("#tweedebutton").addClass("disabledbuttonNext");
    }
  });
});

$(document).ready(function () {
  $('input[type="radio"], input[type="number"]').on('change', function () {
    if ( $('#JA2').is(":checked") && $('#ondervloer').val() == '' ) {
      $("#tweedebutton").addClass("disabledbuttonNext");
    }
  });
});

CSS

.disabledbuttonNext {
pointer-events: none;
opacity: 0.5;
}

I want the result to be when I filled in everything and I filled something in the number input(example: '1') that it reacts to it immediately and enables the button or in this case adds a class.

jquery javascript
1 Answers

Here's the code similar for your application.

It interacts with both "radio buttons" as well as "input box" & accordingly triggers the "Submit button".

function checkout() {
  alert("It worked");
}

$(document).ready(function() {
  //console.log("Document loaded !");

  $("input").change(function() {

    var snacksValue = $('input[name="snacks"]:checked').val();
    var extrasValue = $('input[name="extras"]:checked').val();
    var quantity = $('#input1').val();

    if (snacksValue != undefined && extrasValue != undefined && quantity != '') {
      //console.log("go");
      $('#checkout').removeClass("disabled");
      $('#checkout').addClass("enabled");
    } else {
      //console.log("error");
      $('#checkout').removeClass("enabled");
      $('#checkout').addClass("disabled");
    }

  });

});
div {
  margin: 10px 5px;
}

.enabled {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.disabled {
  background-color: #e7e7e7;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  pointer-events: none;
  /* display:none; */
  /* If you wanna hide it */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div>

  <label>
  <input type="radio" name="snacks" value="burger" />
  Burger</label>
  <label>
  <input type="radio" name="snacks" value="pizza" />Pizza</label>
  <label>
  <input type="radio" name="snacks" value="hotdog" /> Hotdog</label>

</div>

<div>

  <label>
  <input id="extra1" type="radio" name="extras" value="cheese">
  With Cheese</label>

  <label>
  <input id="extra2" type="radio" name="extras" value="nocheese">
  Without Cheese</label>

</div>

<div>

  <label>Quantity</label>
  <input id="input1" type="number" value="" min=1>

</div>

<div>

  <input id="checkout" class="disabled" type="button" value="Next" onclick="checkout();" />

</div>

user_74728010
Related