Hiding a submit button

[andrewsmd]

I have this form
<div id = "div53" class = "newDiv" style="display: none;">
<center><form name = "newForm" method = "post">
<h2>New Job</h2><br>

<table>
<tr>
<td class = "divTitle">Job Name:</td>
<td><input type = "text" name = "newJobName" onblur="checkName(this.value, 53)"><br><span id = "newText53"></span></td>
</tr>

<tr>
<td class = "divTitle">Notes:</td>
<td><textarea name = "newNotes"></textarea></td>

</tr>
</table>

<input type = "submit" name = "newSubmit" value = "Add Job"> <!-- onclick="hide('div53')" -->

</form></center>

</div>

All I want is for the submit button to be grayed out or unclickable if either of the two previous text boxes are blank. How would I do that? Thanks,

[whoisgregg]

To disable a form input, you can set the disabled attribute:

 document.getElementById('someInput').disabled=true; // grays out input
document.getElementById('someInput').disabled=false; // makes input usable again

Since you already have an onblur function being called, you could add an ID to the submit, then toggle that disabled attribute based on the length of the textarea.

Now, it may still be possible to submit the form in some browsers by hitting the enter key, so you should still do an onsubmit for the <form> itself that checks the textareas before allowing the form to be submitted.

Give this a shot and post back your code attempt if you run into trouble. :)