CODEWITHSUNDEEP
javascriptjqueryhtml
Mayuresh Patil
Mayuresh Patil

Reputation: 2200

Disable of button works only first time and when i refresh a page

I am using following code to disable the button if my textarea is empty but it works only first time and when i refresh the whole page, after taking first input i clear the textarea but the button will not disable... what is wrong in my code PLEASE HELP...

html code is

<div id='box'>
                 <form id="stat">
                     <textarea type="text" name="status" id="status" placeholder="Anything You Want To Say...?"></textarea>
                 </form>     
                <button id='statbtn' type="submit" onclick="update()">Update</button>
             </div>

i am using this code to display the status and to refresh my textarea in same function as

function update() {
        var x,y;
        x=document.getElementById("stat");
        y=x.elements["status"].value;
        document.getElementById("bigbox").innerHTML += "<div id='box1'>"+ y + "</div>";
        $('#status').val('');
    }

using this code to disable the button

$(document).ready(function(){
$('#statbtn').prop('disabled',true);
$('#status').keyup(function(){
    $('#statbtn').prop('disabled', this.value == "" ? true : false);     
})

});

i had doubt about refreshing line of js so i used jquery code but also button not disabled at next all times.

Upvotes: 1

Views: 1469

Answers (2)

Christos
Christos

Reputation: 53958

I think that something like the following snippet does what you are looking for. I used plain JavaScript. Apparently, you could use jQuery to do the same thing. However, keep in mind that a good practice is to use only of them for doing the same thing. I mean it's better using plain JavaScript - document.getElementById and the rest corresponding methods of document - to grab your elements rather than using for the half of them plain JavaScript and for the rest of them jQuery.

// We grab the elements of our UI.
var btn = document.getElementById('statbtn');
var stat = document.getElementById("status");
var bigBox = document.getElementById("bigbox")

// The function that is called on statbtn click event.
function update() {
    var status = stat.value;
    bigBox.innerHTML += "<div id='box1'>"+ status + "</div>";
    stat.value = '';
    btn.setAttribute('disabled','disabled');
}

// Register the event listeners.
document.addEventListener('DOMContentLoaded', function(){
    btn.setAttribute('disabled','disabled');
});

btn.addEventListener('click', function(){
    update();
});

stat.addEventListener('keyup', function(){
    var btn = document.getElementById('statbtn');
    if(this.value){
        btn.removeAttribute('disabled','');
    } else {
        btn.setAttribute('disabled','disabled');
    }
});
<div id='box'>
    <form id="stat">
        <textarea type="text" name="status" id="status" placeholder="Anything You Want To Say...?"></textarea>
    </form>     
    <button id='statbtn' type="submit">Update</button>
</div>
<div id='bigbox'>
</div>

Upvotes: 1

MSH
MSH

Reputation: 297

This will work : 

$(document).ready(function(){
  $('#statbtn').prop('disabled',true);
     // textarea is the id of your textbox. 
    $('#textarea').change(function(){
      if($('#textarea').val() == ""){
      $('#statbtn').prop('disabled',true);
      }else{
      $('#statbtn').prop('disabled',false);
      }
  })
})

Upvotes: 0

Related Questions