PHP and Javascript - Disable a Submit button if textarea is empty

Question

In the form of my website, I have a field textarea and a button Submit. Follow the code of both:

<textarea name='texto1' id="txtBriefing" rows="5" style="font-family: Trebuchet MS; font-size: 16px; width: 394px; height: 100px" onkeyup="doSomething(this.value)" ></textarea>
<input name="btnEnvia" type="submit" value="Enviar" style="font-family: Trebuchet MS; font-size: 20px" />

However, I would like that button to be enabled only if the textarea txtBriefing not empty. I’ve tried some javascript codes with the functions onkeyup and onchange looking on the internet, but none worked so far.

What can be done for this case?

Answer 1

Javascript-enabled

Just add the ID to your button, and change your onkeyup of textarea for onkeyup="javascript: doSomething(this)"

function doSomething(input) {
    document.getElementById('btnEnvia').disabled = (input.value.length == 0);
}

Example: http://jsfiddle.net/5kdy8L63/2/

---

With jQuery

$(function(){
   $('#txtBriefing').on('keyup', function(){
      $('#btnEnvia').prop('disabled', ($(this).val().length == 0)); 
   });
});

Example: http://jsfiddle.net/b9kzwjmt/

Answer 2

I believe the event oninput is ideal for this type of situation, I say this pq it is triggered only when the value of the input is changed.

In any case, I advise you to avoid setting JS and Styles events in the HTML file.

var txtBriefing = document.getElementById("txtBriefing");
var btnEnvia = document.getElementById("btnEnvia");

var onBriefingInput = function (event) {
  btnEnvia.disabled = !event.target.value;
}

txtBriefing.addEventListener("input", onBriefingInput);
txtBriefing.dispatchEvent(new Event('input'));

#txtBriefing {
  font-family: Trebuchet MS; 
  font-size: 16px; 
  width: 394px; 
  height: 100px
}

#btnEnvia {
  font-family: Trebuchet MS; 
  font-size: 20px
}

<textarea id="txtBriefing" name="texto1" rows="5"  ></textarea>
<input id="btnEnvia" name="btnEnvia" type="submit" value="Enviar" />

another option is to use HTML5 validation textarea[required], this way the form will not be sent if the textarea is empty.

#txtBriefing {
  font-family: Trebuchet MS; 
  font-size: 16px; 
  width: 394px; 
  height: 100px
}

#btnEnvia {
  font-family: Trebuchet MS; 
  font-size: 20px
}

/* O Estilo abaixo é valido apenas no FireFox. */
#form1:invalid #btnEnvia {
  color: grey;
}

<form id="form1">
  <textarea id="txtBriefing" name="texto1" rows="5" required ></textarea>
  <input id="btnEnvia" name="btnEnvia" type="submit" value="Enviar" />
</form>