How to enable button if div not empty?

Question

I have this div and and button near the div:

<div id="tempData"></div>
<input type="button" text="status" disabled>

When page load the button is disabled.

At some point I add elements programmatically to div when div not empty it has to be enabld. How can I make button enabled when div not empty and disabled when it empty?

This SO post contains some great ideas: stackoverflow.com/questions/4665466/… — Ph0b0x
– Ph0b0x, Commented Oct 30, 2018 at 17:43
With CSS: #tempData:empty + input { pointer-events: none; } (although, honestly, it's probably a bad idea). — David Thomas
– David Thomas, Commented Oct 30, 2018 at 17:46
@DavidThomas doesn't stop tab focus from getting to the element. — rlemon
– rlemon, Commented Oct 30, 2018 at 17:50

clearshot66 · Accepted Answer · 2018-10-30 17:57:03Z

3

Pure javascript:

First check empty when your triggering action occurs, whatever that may be:

function whatevertriggeredthis(){
    if(document.getElementById("tempData").innerHTML === ""){

       // Give the button an ID then enable it
       document.getElementById("status_button").disabled = false;

    }
}

JQuery Version:

$("#tempData").on("change",function(){
   if($(this).text() !== ""){
      $("button").prop("disabled",false);
   }
});

edited Oct 30, 2018 at 17:57

answered Oct 30, 2018 at 17:40

clearshot66

2,2821 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit Bhoyar · Accepted Answer · 2018-10-30 17:46:12Z

1

function yourFunctionToUpdateDiv(){

  //YOUR CODE TO ADD/REMOVE DIV CONTENT
  //...
  //...
  
  
  if ($('#tempData').html()){ 
    $("input").prop('disabled', false);
  }
  else{
    $("input").prop('disabled', true);
  }
}

answered Oct 30, 2018 at 17:46

Amit Bhoyar

1,0677 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to enable button if div not empty?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related