I have a dropdown menu with a couple of values that link to functions. I also have a textbox and submit button. Basically what I want to do is if a certain value in the drop down box is selected it disables or hides the submit button and possibly the textbox is made blank and once another value is selected it turns both back on.
My HTML Code:
<body>
<p><label>Drawing tool: <select id="dtool">
<option value="line">Line</option>
<option value="rect">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="eraser">Eraser</option>
</select></label></p>
//Some canvas code
<form id="frmColor">
<input type='color' id='color' />
</form>
<input type='submit' value='Change Color' id="colorSubmit"/>
Javascript in a linked file called canvas.js:
...
tools.eraser = function () {
var tool = this;
this.started = false;
var varPenColor = "White";
context.strokeStyle = varPenColor;
document.frmColor.colorSubmit.disabled=true;
Basically when I select the eraser from the drop down it all works but the submit button will not disable.
Im new to JS and not sure if I need to add some sort of listener or get element id any ideas?
You have the submit button outside of the form. (as seen in the example code..)
should be