Reputation: 83
I need to disable the button when no value is inserted in the input text
<form>
<div class="form-group">
<p class="description">Please Enter Your Tracking Number.</p>
<input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)"onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
</div>
<br>
<button type="submit" id="register" class="full-width btn-medium">Track</button>
</form>
Have tried this but doesn't work
<script>
function buttonState(){
$("input").each(function(){
$('#register').attr('disabled', 'disabled');
if($(this).val() == "" ) return false;
$('#register').attr('disabled', '');
})
}
$(function(){
$('#register').attr('disabled', 'disabled');
$('input').change(buttonState);
})
</script>
Upvotes: 0
Views: 405
Reputation: 22574
You can use keyup
event to check for disabled
property of button based on the value
$(document).ready(function(){
$('#register').prop('disabled',true);
$('#tracking-input').keyup(function(){
$('#register').prop('disabled', this.value === "");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<p class="description">Please Enter Your Tracking Number.</p>
<input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)"onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
</div> <br>
<button type="submit" id="register" class="full-width btn-medium">Track</button>
</form>
Upvotes: 1
Reputation: 43
$("#register").prop("disabled",true);
$("#tracking-input").keyup(function(){
var valuee=$("#tracking-input").val().trim();
if(valuee==""){
$("#register").prop("disabled",true);
}else{
$("#register").prop("disabled",false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<p class="description">Please Enter Your Tracking Number.</p>
<input type="text" id="tracking-input" class="input-text full-width" placeholder="Enter your Tracking number(s)">
</div> <br>
<button type="submit" id="register" class="full-width btn-medium">Track</button>
</form>
Upvotes: 0