Currently when text area is focused on it expands it's height and the post and cancel button appear. Now I'd like to disable the submit button by default and only make it active once the text area has been typed into.
Later on I'll add opacity to the inactive submit button then take it away when the button is active just for a nice effect. But anyway I've tried applying disabled many ways and it doesn't work. I've tried various other things such as define a click function as well as submit then apply disabled using attr() to the disabled attribute of my form and it seems to have no effect.
HTML
<div class="ment_container">
<%= link_to image_tag(default_photo_for_menter(ment), :class => "menter_photo"), menter(ment.user_id).username %>
<div class="menter_content"> <div class="userNameFontStyle"><%= link_to menter(ment.user_id).username.capitalize, menter(ment.user_id).username %> - <%= simple_format h(ment.content) %> </div>
</div><div class="ment_post_time"> <%= time_ago_in_words(ment.created_at) %> ago. </div>
</div>
<% end %>
<% end %>
<% if logged_in? %>
<%= form_for @ment, :remote => true do |f| %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.hidden_field :micropost_id, :value => m.id %>
<%= f.text_area :content, :placeholder => 'Post a ment...', :class => "ment_box", :rows => 0, :columns => 0 %>
<div class="mentButtons">
<%= f.submit 'Post it', :class => "mentButton" %>
<div class="cancelButton"> Cancel </div>
</div>
<% end %>
<% end %>
JQuery:
$(".microposts").on("focus", "ment_box", function() {
this.rows = 7;
var $mentBox = $(this),
$form = $(this).parent(),
$cancelButton = $form.children("mentButtons").children(".cancelButton");
// $mentButton = $form.children("mentButtons").children("mentButton");
$(this).removeClass("ment_box").addClass("ment_box_focused").autoResize();
$form.children("mentButtons").addClass("displayButtons");
$cancelButton.click(function() {
$mentBox.removeClass("ment_box_focused").addClass("ment_box");
$form.children("mentButtons").removeClass("displayButtons");
$mentBox.val("");
});
});
kind regards
Currently when text area is focused on it expands it's height and the post and cancel button appear. Now I'd like to disable the submit button by default and only make it active once the text area has been typed into.
Later on I'll add opacity to the inactive submit button then take it away when the button is active just for a nice effect. But anyway I've tried applying disabled many ways and it doesn't work. I've tried various other things such as define a click function as well as submit then apply disabled using attr() to the disabled attribute of my form and it seems to have no effect.
HTML
<div class="ment_container">
<%= link_to image_tag(default_photo_for_menter(ment), :class => "menter_photo"), menter(ment.user_id).username %>
<div class="menter_content"> <div class="userNameFontStyle"><%= link_to menter(ment.user_id).username.capitalize, menter(ment.user_id).username %> - <%= simple_format h(ment.content) %> </div>
</div><div class="ment_post_time"> <%= time_ago_in_words(ment.created_at) %> ago. </div>
</div>
<% end %>
<% end %>
<% if logged_in? %>
<%= form_for @ment, :remote => true do |f| %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.hidden_field :micropost_id, :value => m.id %>
<%= f.text_area :content, :placeholder => 'Post a ment...', :class => "ment_box", :rows => 0, :columns => 0 %>
<div class="mentButtons">
<%= f.submit 'Post it', :class => "mentButton" %>
<div class="cancelButton"> Cancel </div>
</div>
<% end %>
<% end %>
JQuery:
$(".microposts").on("focus", ".ment_box", function() {
this.rows = 7;
var $mentBox = $(this),
$form = $(this).parent(),
$cancelButton = $form.children(".mentButtons").children(".cancelButton");
// $mentButton = $form.children(".mentButtons").children(".mentButton");
$(this).removeClass("ment_box").addClass("ment_box_focused").autoResize();
$form.children(".mentButtons").addClass("displayButtons");
$cancelButton.click(function() {
$mentBox.removeClass("ment_box_focused").addClass("ment_box");
$form.children(".mentButtons").removeClass("displayButtons");
$mentBox.val("");
});
});
kind regards
Share Improve this question edited May 1, 2012 at 22:54 Whitewall 5971 gold badge7 silver badges18 bronze badges asked Apr 14, 2012 at 16:37 LondonGuyLondonGuy 11.1k12 gold badges82 silver badges160 bronze badges5 Answers
Reset to default 5Setting the disabled attribute doesn't work because if the disabled attribute is present, the field is disabled, regardless of the value of the attribute. You could use .removeAttr("disabled")
, but it really makes the most sense to manipulate the disabled
property which is more intuitive - it's just a boolean.
$mentButton.prop({ disabled: !$mentBox.val());
To be safe, bind to onkeyup
, oninput
, and onchange
:
$mentBox.on("keyup input change", function () {
$mentButton.prop({ disabled: !$mentBox.val() });
});
If you need to manually enable or disable the button, such as after clearing the form, you can pass true
or false
directly to a call to .prop()
.
$mentButton.prop({ disabled: true });
Edit: Detailed breakdown
The .prop()
method
The .prop()
method gets and sets property values on elements, similar to how .attr()
gets and sets attribute values on elements.
Considering this jQuery:
var myBtn = $("#myBtn");
myBtn.prop("disabled", true);
We can re-write that in plain JavaScript like this:
var myBtn = document.getElementById("myBtn");
myBtn.disabled = true;
Why we don't need an if
statement
The reason we don't need an if
statement is that the disabled
property takes a boolean value. We could put a boolean expression in an if
statement, and then depending on the result, assign a different boolean expression as the value of the property:
if (someValue == true) {
myObj.someProperty = false;
}
else {
myObj.someProperty = true;
}
The first problem is the redundancy in the if
statement: if (someValue == true)
can be shortened to if (someValue)
. Second, the whole block can be shortened to a single statement by using the logical not operator (!
):
myObj.someProperty = !someValue;
The logical not operator (!
) returns the negated result of an expression - ie true
for "falsey" values, and false
for "truthy" values. If you aren't familier with "truthy" and "falsey" values, here's a quick primer. Any time you use a non-boolean value where a boolean is expected, the value is coerced to boolean. Values that evaluate to true
are said to be "truthy" and values that evaluate to false
are said to be "falsey".
Type Falsey values Truthy values ———————— —————————————————— —————————————————————— Number 0, NaN Any other number String "" Any non-empty string Object null, undefined Any non-null object
Since an empty string evaluates to false, we can get a boolean indicating whether there is any text in the textarea by applying !
to the value:
var isEmpty = !$mentBox.val();
Or, use !!
to do a double negation and effectively coerce a string value to boolean:
var hasValue = !!$mentBox.val();
We could rewrite the jQuery from above to a more verbose form in plain JavaScript:
var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
var text = myTextBox.value;
var isEmpty = !text;
if (isEmpty) {
myBtn.disabled = true;
}
else {
myBtn.disabled = false;
}
Or, a little shorter, and more similar to the original:
var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
myBtn.disabled = !myTextBox.value;
You can try this:
var submit = $("input[type=submit]");
submit.attr("disabled","disabled");
$('textarea.ment_box').keyup(function() {
if ( !$(this).val() ) {
submit.attr("disabled","disabled");
} else {
submit.removeAttr("disabled");
}
});
Here's a JS Fiddle so that you can try this out: http://jsfiddle/leniel/a2BND/
You can first disable your submit button, and if textarea has a value enable it:
<form id="yourForm">
<textarea id="ta"></textarea>
<input id="submit" type="submit" disabled="disabled">
<form>
$("#yourForm").change(function() {
if ( $("#ta").val().length >= 1) {
$("#submit").removeAttr("disabled");
}
else {
$("input").attr("disabled", "disabled");
}
});
http://jsfiddle/dY8Bg/2/
You can achive this task using keyup event on text area. sample concept code below.
$("#textareaid").on('keyup', function (e) {
Count_Chars(this);
});
function Count_Chars(obj) {
var len = obj.value.length;
if (len >= 1) {
// do task
// enable post button
}
}
Added this to existing code to acplish what I wanted. Marked answer that help me the most as winning answer and marked up others that helped.
mentButton = form.children(".mentButtons").children(".mentButton");
mentButton.attr("disabled","disabled");
mentBox.keyup(function() {
if ( !$(this).val() ) {
mentButton.attr("disabled","disabled");
} else {
mentButton.removeAttr("disabled");
}
});