HTML Form action with multiple values

Question

This question is related to a previous post, But I think mine is somehow different.

I'm trying to implement a sort of spam check with an image. I'm using a picture of a Callaway golf ball and asking what the brand is.

Is there a way to accept both capitalized, and lowercase answers? I'm trying to figure that out and I can't. I guess the real question is:

Can you accept two answers in the value?

The easy fix is to use an image or ask a question that doesn't involve capitalization, but I really want to use the golf ball thing.

Answer 1

If I'm understanding your question correctly, there is some one right answer, but the issue is that the client might enter the correct string, but using the wrong casing. Correct me if I'm wrong in understanding your question.

You can use javaScript to transform all answers to lower case and then compare the results. To transform a string to lowercase use .toLowerCase().

Here's a working example with a form:

<script>
    function checkForm() {
       var elem = document.getElementById('myInput');
       elem.value = elem.value.toLowerCase();
       return elem.value.length > 0;
    }
</script>
<form action="somewhere.php" method="POST" onSubmit="checkForm()">
    <input id="myInput" type="text">
    <button type="submit">Submit</button>
</form>

Ideally though, if there's a server side component to it you should do the lower case transformation there. Also note jQuery is not needed - this is just pure JS :)

Answer 2

Just transform the value to all lowercase and you don't have to worry about caps.

If using jQuery:

var captcha = $('#captcha').val().toLowerCase();
if(captcha === 'callaway'){
  alert('We got a hole in one!');
}