I have an issue try to achieve this result, pretty much what I need is to disable the submit button until text is entered in the input field. I've trying some functions but without results.
HTML Markup
<form action="" method="get" id="recipename">
<input type="text" id="name" name="name" class="recipe-name"
value="Have a good name for it? Enter Here"
onfocus="if (this.value == 'Have a good name for it? Enter Here') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Have a good name for it? Enter Here';}"
/>
<input type="submit" class="submit-name" value="" />
</form>
Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty.
1.1 To disable a submit button, you just need to add a disabled attribute to the submit button. $("#btnSubmit"). attr("disabled", true); 1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.
To disable a button when an input is empty with React, we can set the input's value as a state's value. Then we can use the state to conditionally disable the button when the state's value is empty. to create the name state with the useState hook.
You can use this:
var initVal = "Have a good name for it? Enter Here";
$(document).ready(function(){
$(".submit-name").attr("disabled", "true");
$(".recipe-name").blur(function(){
if ($(this).val() != initVal && $(this).val() != "") {
$(".submit-name").removeAttr("disabled");
} else {
$(".submit-name").attr("disabled", "true");
}
});
});
See in jsfiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With