Geek asks and answers

How to disable the default submit button until 1 character or more is entered in the text area?

Currently, when the text area is focused on it, it expands its height and the post and cancel button appears. Now I would like to disable the default submit button and activate it only after entering the text area.

Later, I will add opacity to the inactive submit button, and then remove it when the button is active only for a nice effect. But in any case, I tried to use the disabled in different ways, and it did not work. I tried other things, such as defining a click function, and then submit, then apply the disabled using attr () to the disabled attribute of my form and it seems to have no effect.

HTML

        <div class="comment_container">
                    <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>

                    <div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %> </div>
                </div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>


           </div>


                    <% end %>
                <% end %>


            <% if logged_in? %>
            <%= form_for @comment, :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 comment...', :class => "comment_box", :rows => 0, :columns => 0 %>

    <div class="commentButtons">         
      <%= f.submit 'Post it', :class => "commentButton" %>
   <div class="cancelButton"> Cancel </div>
    </div>   
            <% end %>

            <% end %>

JQuery

$(".microposts").on("focus", ".comment_box", function() {
    this.rows = 7;


    var $commentBox = $(this),
        $form = $(this).parent(),
        $cancelButton = $form.children(".commentButtons").children(".cancelButton");
       // $commentButton = $form.children(".commentButtons").children(".commentButton");
            $(this).removeClass("comment_box").addClass("comment_box_focused").autoResize();  
            $form.children(".commentButtons").addClass("displayButtons");

                $cancelButton.click(function() {
                    $commentBox.removeClass("comment_box_focused").addClass("comment_box");
                    $form.children(".commentButtons").removeClass("displayButtons");
                    $commentBox.val("");



                });

});

Yours faithfully

+3
5

, , , . .removeAttr("disabled"), disabled, - .

$commentButton.prop({ disabled: !$commentBox.val());

, onkeyup, oninput onchange:

$commentBox.on("keyup input change", function () {
    $commentButton.prop({ disabled: !$commentBox.val() });
});

, , , true false .prop().

$commentButton.prop({ disabled: true });



:

.prop()

.prop() method , , .attr() .

jQuery:

var myBtn = $("#myBtn");
myBtn.prop("disabled", true);

JavaScript :

var myBtn = document.getElementById("myBtn");
myBtn.disabled = true;

if

, if, , disabled . if, :

if (someValue == true) {
    myObj.someProperty = false;
}
else {
    myObj.someProperty = true;
}

if: if (someValue == true) if (someValue). -, , (!):

myObj.someProperty = !someValue;

(!) - .. true "falsey" false "" . "" "" , . , , , boolean. , true, "", , false, "".

 Type     Falsey values      Truthy values
 ———————— —————————————————— ——————————————————————
 Number   0, NaN             Any other number
 String   ""                 Any non-empty string
 Object   null, undefined    Any non-null object

false, , , - , ! :

var isEmpty = !$commentBox.val();

, !!, boolean:

var hasValue = !!$commentBox.val();

jQuery 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;
}

, :

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
myBtn.disabled = !myTextBox.value;
+5

:

var submit = $("input[type=submit]");
submit.attr("disabled","disabled");

$('textarea.comment_box').keyup(function() {
    if ( !$(this).val() ) {
       submit.attr("disabled","disabled");
    } else {
       submit.removeAttr("disabled");
    }
});

JS Fiddle, : http://jsfiddle.net/leniel/a2BND/

+2

, textarea , :

<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.net/dY8Bg/2/

+1

, keyup . .

$("#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
    }
}

0

Added this to existing code to accomplish what I wanted. The marked answer that helps me the most as a winning answer and highlights the others that helped.

commentButton = form.children(".commentButtons").children(".commentButton");

       commentButton.attr("disabled","disabled");

        commentBox.keyup(function() {
            if ( !$(this).val() ) {
               commentButton.attr("disabled","disabled");
            } else {
               commentButton.removeAttr("disabled");
            }
        });
0
source

More articles:


All Articles