CODEWITHSUNDEEP
javascripthtml
Mark
Mark

Reputation: 315

Javascript: Disable button on Drop Down Select

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?

Upvotes: 0

Views: 1916

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

You have the submit button outside of the form. (as seen in the example code..)

<form id="frmColor">
        <input type='color' id='color' />
    </form>
        <input type='submit' value='Change Color' id="colorSubmit"/>

should be

<form id="frmColor">
    <input type='color' id='color' />
    <input type='submit' value='Change Color' id="colorSubmit"/>
</form>

Upvotes: 3

Related Questions