How can I de-activate the submit button until some data is entered in a form?

I have a simple form with a text area and submit button.  I would like the submit button to be inactive until the user changes something in the text area.  How can I do this?
<form action="<?php echo $editFormAction; ?>" method="POST" name="textEdit">
   <textarea name="websiteText" style="width: 300px; height: 100px;">
      <?php echo $row_getPage['html']; ?>
   </textarea>
   <input name="submit" type="submit" value="submit">
</form>

Open in new window

CheeserTheAverageAsked:
Who is Participating?
 
iGottZConnect With a Mentor Frontend EngineerCommented:
what you also could do is something like this:

<script type="text/javascript">
var validatesubmit = function (e) {
    if (document.getElementById("websiteText").value.length < 1) {
        e.preventDefault();
        alert("you need to fill out the form before proceeding");
    }
};
</script>
 
<form action="<?php echo $editFormAction; ?>" method="POST" name="textEdit">
   <textarea id="websiteText" name="websiteText" style="width: 300px; height: 100px;"><?php echo $row_getPage['html']; ?></textarea>
   <input name="submit" type="submit" value="submit" onclick="validatesubmit(event);">
</form>

Open in new window



example: http://jsfiddle.net/FVAnG/
0
 
Tomarse111Connect With a Mentor Commented:
Try the below code for you:
<script type="text/javascript">
function activate(elm){
 	if(elm.value!=''){
		document.getElementById('submit').disabled=false;
	}
}
</script>
 
<form action="<?php echo $editFormAction; ?>" method="POST" name="textEdit">
   <textarea name="websiteText" style="width: 300px; height: 100px;" onBlur="activate(this);">
      <?php echo $row_getPage['html']; ?>
   </textarea>
   <input name="submit" id="submit" type="submit" value="submit" disabled="disabled">
</form>

Open in new window

0
 
cyberhiteshCommented:
Other way is to place is around the DIV box and show/hide depending upon the data entered inside the form.

<script type="text/javascript">
function activate(elm){
       if(elm.value!=''){
            document.getElementById(submit_buttont').style.display=none;
      } else {
               document.getElementById(submit_buttont').style.display=block;
       }
}
</script>


<form action="<?php echo $editFormAction; ?>" method="POST" name="textEdit">
   <textarea name="websiteText" style="width: 300px; height: 100px;">
      <?php echo $row_getPage['html']; ?>
   </textarea>
   <div id="submit_button"><input name="submit" type="submit" value="submit"></div>
</form>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.