I'm playing around with jQuery and was wondering how you would enable a button once the user has typed into the input field? and if they delete the contents of the input field then the button will be disabled again. I've created this little demo to help.
Would I have to use 'keyup' to do this?
$( "#target" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
You need to use .prop() to add/remove disabled attribute of button. The function get true/false in second parameter that add/remove target attribute.
$( "#target" ).keyup(function() {
$("button").prop("disabled", !this.value);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="target" />
<button disabled>Next</button>See result of code demo on your code
I like to use .on() with jQuery, like so:
$("#InputFName").on("keyup", function() {
$("#BtnNext").prop("disabled", false);
if( $("#InputFName").val() == '') {
$("#BtnNext").prop("disabled", true);
}
});
If you want to disable your button :
$('#MyButton').prop('disabled', true);
And if you want to enable it again :
$('#MyButton').prop('disabled', false);
Replace #MyButton by what you need :
$('#id') to get the element by ID
$('.class') to get the element by class
$('tag') to get the element by tag name
Yes, you could also do the check on the blur event of the input
$( "#target" ).blur(function() {
//check if your need to disable the button
});
Keep in mind that is really easy to bypass the disabled state of the button.
Yes, you can use the keyup event, and even better would be the input event, since it catches pasting and other types of inputs.
Inside that event handler, you can just check the inputs value, and make a condition that returns a boolean, that can then be used to set the disabled property of a button
$( "#target" ).on('input', function() {
var val = this.value;
$('#button').prop('disabled', val === "some value")
});
And it will update as the user types
In your case, it looks like you want to check three inputs, and if they all have a value, you enable the button, and you'd do that like this
var elems = $('#InputFName, #InputLName, #InputAge').on('input', function() {
var bool = elems.filter(function() {
return this.value.trim() !== "";
}).length !== elems.length;
$('#BtnNext').prop('disabled', bool);
});
$(document).ready(function() {
// Hide the inputs
$("#InputFName").hide();
$("#InputLName").hide();
$("#InputAge").hide();
$("#BtnNext").prop("disabled", true);
// When the user clicks the First name button
$("#BtnFName").click(function() {
$("#InputFName").show();
$("#InputLName").hide();
$("#InputAge").hide();
});
// When the user clicks the Last name button
$("#BtnLName").click(function() {
$("#InputFName").hide();
$("#InputLName").show();
$("#InputAge").hide();
});
// When the user clicks the Age button
$("#BtnAge").click(function() {
$("#InputFName").hide();
$("#InputLName").hide();
$("#InputAge").show();
});
var elems = $('#InputFName, #InputLName, #InputAge').on('input', function() {
var bool = elems.filter(function() {
return this.value.trim() !== "";
}).length !== elems.length;
$('#BtnNext').prop('disabled', bool);
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container">
<h3>User Form</h3>
<p>Fill out details:</p>
<button id="BtnFName" class="SrcButton">First name</button>
<button id="BtnLName" class="SrcButton">Last name</button>
<button id="BtnAge" class="SrcButton">Age</button>
<br />
<!-- Input Container -->
<input id="InputFName" placeholder="First Name" />
<input id="InputLName" placeholder="Second Name" />
<input id="InputAge" placeholder="Age" />
<!-- Next Button Container -->
<br />
<button id="BtnNext" class="BtnNext">Next</button>
</div>
$('#InputFName').keyup(function() {
if ($("#InputFName").val() != null) {
$("#BtnNext").removeAttr('disabled');
}
if ($("#InputFName").val() == '') {
$("#BtnNext").attr('disabled', true);
}
});
