[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

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

0
CheeserTheAverage
Asked:
CheeserTheAverage
2 Solutions
 
Tomarse111Commented:
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
 
iGottZFrontend 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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now