I have this code that disable the button when the text is empty, but I have a textarea html code. How can I include this that when the text and textarea are both empty the button will be disabled and when both are filled it enables. I tried the code below and it works on text only. Any ideas?
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"]').on('keyup',function() {
if($(this).val() != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
<script src=".1.1/jquery.min.js"></script>
<input type="text" name="textField" />
<textarea rows="4" cols="30" ></textarea>
<input type="submit" value="next" />
I have this code that disable the button when the text is empty, but I have a textarea html code. How can I include this that when the text and textarea are both empty the button will be disabled and when both are filled it enables. I tried the code below and it works on text only. Any ideas?
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"]').on('keyup',function() {
if($(this).val() != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textField" />
<textarea rows="4" cols="30" ></textarea>
<input type="submit" value="next" />
Share
Improve this question
edited Apr 21, 2018 at 15:53
Ivar
6,83812 gold badges56 silver badges67 bronze badges
asked Nov 6, 2013 at 7:15
joe.devjoe.dev
1152 gold badges2 silver badges12 bronze badges
2
- you have missed the textarea selector in jquery.... so it's not workin.....? – Bhojendra Rauniyar Commented Nov 6, 2013 at 7:23
- That's my problem I need to check also the textarea if it is fill in before the button gets enabled. – joe.dev Commented Nov 6, 2013 at 7:27
8 Answers
Reset to default 9You miss the textarea
selector in jQuery
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $("#texta").val();
var text_value = $('input[name="textField"]').val();
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textField" /><br>
<textarea rows="4" cols="30" id="texta"></textarea><br>
<input type="submit" value="next" />
You can do this using the .prop()
method like:
// Cache the elements first
var $text = $('input[type="text"]');
var $textarea = $('textarea');
var $submit = $('input[type="submit"]');
// Set the onkeyup events
$submit.prop('disabled', true);
$text.on('keyup', checkStatus);
$textarea.on('keyup', checkStatus);
// Set the event handler
function checkStatus() {
var status = ($.trim($text.val()) === '' || $.trim($textarea.val()) === '');
$submit.prop('disabled', status);
}
F.Y.I.
As mentioned in the .prop() API Documentation
:
Before jQuery 1.6, the
.attr()
method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the.prop()
method provides a way to explicitly retrieve property values, while.attr()
retrieves attributes.
FIDDLE DEMO
Just check both input feild and textarea. For that you can bind the both fields to keyup event and check the value
$('input[type="submit"]').prop('disabled', true);
$("#yourtextfield,#yourtextarea").on("keyup","#parentdiv",function(){
if($("#yourtextfield").val() == '' || $("#yourtextarea").val() == ''){
$('input[type="submit"]').prop('disabled' , true);
}
else{
$('input[type="submit"]').prop('disabled' , false);
}
})
use prop
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],textarea ').on('keyup',function() {
if($(this).val()) {
$('input[type="submit"]').prop('disabled' , false);
}else{
$('input[type="submit"]').prop('disabled' , true);
}
});
by attr we can do by
$('input[type="submit"]').attr('disabled', 'disabled');
$('input[type="text"],textarea ').on('keyup',function() {
if($(this).val()) {
$('input[type="submit"]').removeAttr('disabled');
}else{
$('input[type="submit"]').attr('disabled','disabled');
}
});
see .prop() vs .attr()
I think you have to check space.
$("textarea").on('mouseout', function(){
if (!$.trim($("textarea").val())) {
alert("empty");
}
});
test it : http://jsfiddle.net/mehmetakifalp/ef5T9/
<input type="text" name="textField" />
<textarea rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />
<script type="text/javascript">
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $("#texta").val();
var text_value = $('input[name="textField"]').val();
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled' , false);
}else{
$('input[type="submit"]').attr('disabled' , true);
}
});
});
</script>
The selected answer does the job but it is not enough. A text area and text field filled with spaces ( pressing the space bar several times) will enable the submit button.
You therefore need to apply $.trim()
to the values from these fields before passing them to the if statement as shown below
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $.trim($("#texta").val());
var text_value = $.trim($('input[name="textField"]').val());
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
I needed a solution where there are 2 text fields and a Submit button. The business logic was that the user should type in a value in any one of the text fields at a minimum to enable the Submit button.
Here is my solution which I used in my code. It is not the best/optimal solution possibly but it did the job. Do comment if you have a better way.
//Enable Submit button for search only on text input
$(".inputFieldCSSClass").on('keyup', function(){
var isEmpty = !($.trim($("#inputText1").val()).length > 0 ||
$.trim($("#inputText2").val()).length > 0);
$("#btnSubmit").prop('disabled', isEmpty);
});