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?

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?

• javascript
• html
• forms
• submit
• form-submit

• As a side note - it's not a good idea (other than learning) to put real captcha value on the page markup. – Ilya Luzyanin Commented Aug 8, 2014 at 16:51
• Thanks @ilyaLuzyanin that's a really good point. Do you have any suggestions as how I can circumvent doing this (ie. like hiding the values somehow?). I'm sorta new to HTML/Javascript so I'm sure of all of the in's and out's/tricks. – Joey Orlando Commented Aug 8, 2014 at 17:53
• 2 all validation must be done on server side. Look up in the internet, I believe there are many articles on how to do this. – Ilya Luzyanin Commented Aug 8, 2014 at 18:42
• put $("#inputsubmit").attr("disabled", "disabled"); before the if statement. – Jeremy J Starcher Commented Aug 9, 2014 at 3:27

1 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./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 plete list of rules and to check your markup for these problems, see DOMLint.

EDIT 2

http://jsfiddle/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 paring 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.