Homemade "Captcha" System - One minor glitch in javascript, can't enable submit button

Question

So basically what I'm trying to do as a measure of security (and a learning process) is to my own "Capthca" system. What happens is I have twenty "label's" (only one shown below for brevity), each with an ID between 1 and 20. My javascript randomly picks one of these ID's and makes that picture show up as the security code. Each label has its own value which corresponds to the text of the captcha image.

Also, I have the submit button initially disabled.

What I need help with is figuring out how to enable the submit button once someone types in the proper value that matches the value listed in the HTML label element.

I've posted the user input value and the ID's value and even when they match the javascript won't enable the submit button.

I feel like this is a really really simple addition/fix. Help would be much much appreciated!!!

HTML code

    <div class="security">
        <label class="captcha enabled" id="1" value="324n48nv"><img src="images/security/1.png"></label>      
    </div>

    <div id="contact-div-captcha-input" class="contact-div" >
        <input class="field" name="human" placeholder="Decrypt the image text here">
    </div>      

    <input id="submit" type="submit" name="submit" value="Send the form" disabled>

Javascript code

//Picks random image

function pictureSelector() { 
    var number = (Math.round(Math.random() * 20));
        //Prevents zero from being randomly selected which would return an error
        if (number === 0) {
            number = 1;
        };
    console.log(number);

//Set the ID variable to select which image gets enabled

    pictureID = ("#" + number);

//If the siblings have a class of enabled, remove it
    $(pictureID).siblings().removeClass("enabled");
//Add the disabled class to all of the sibling elements so that just the selected ID image is showing 
    $(pictureID).siblings().addClass("disabled");
//Remove the disabled class from the selected ID
    $(pictureID).removeClass("disabled");
//Add the enabled class to the selected ID
    $(pictureID).addClass("enabled");
};

//Calls the pictureSelector function
pictureSelector();

//Gets the value of the picture value
var pictureValue = $(pictureID).attr("value");
console.log(pictureValue);

//Gets the value of the security input box as the user presses the keys and stores it as the variable inputValue
$("#contact-div-captcha-input input").keyup(function(){
    var inputValue = $("#contact-div-captcha-input input").val();
    console.log(inputValue);
});

console.log($("#contact-div-captcha-input input").val());

//Checks to see if the two values match
function equalCheck() {
    //If they match, remove the disabled attribute from the submit button
    if ($(pictureValue) == $("#contact-div-captcha-input input").val()) {
        $("#submit").removeAttr("disabled");
    } 
};

equalCheck();

UPDATE

Fiddle here

UPDATE #2

$("#contact-div-captcha-input input").keyup(function(){
    var inputValue = $("#contact-div-captcha-input input").val();
    console.log(inputValue);
    if (pictureValue === inputValue) {
        $("#inputsubmit").removeAttr("disabled");
    } 
});

So I got it working 99.9%, now the only problem is that if someone were to backspace or delete the correct value they have inputted, the submit button does not then change back to disabled. Any pointers?

Answer 1

Known issue.

Give your button a name OTHER THAN submit. That name interferes with the form's submit.

EDIT

A link was requested for this -- I don't have a link for pure JavaScript, but the jQuery docs do mention this issue:

http://api.jquery.com/submit/

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

EDIT 2

http://jsfiddle.net/m55asd0v/

• You had the CSS and JavaScript sections reversed. That code never ran in JSFiddle.
• You never re-called equalCheck. I added a call to your keyUp handler.
• For some reason you wrapped pictureValue inside a jQuery object as $(pictureValue) which couldn't have possibly done what you wanted.

Basic debugging 101:

• A console.log inside of your equalCheck would have shown you that function was only called once.
• A console log checking the values you were comparing would have shown that you had the wrong value.
• Basic attention to the weird highlighting inside of JSFiddle would have shown you had the code sections in the wrong categories.