Reading and checking user's entry from a text field in an html form.

Question

What I want to do is to have a form field that allows a person to try to guess from a picture what type of bird it is, and if they get it right, it tells them they got it right and gives them the code to be able to get a discount.

Here is the code I'm using within the head tags:

formCheck()
{
    var birdName = document.forms[0].birdName.value
    if (birdName == "red bellied woodpecker")

    alert("That's Correct! Please enjoy 10% off your next purchase by entering the code NAMETHATBIRD92 during checkout.")

else

    alert("That's isn't the correct answer! Make sure your answer is very specific and keep trying, you can guess as many times as you want.")

}

Here is what I have within the body tag:

Can you name this bird?

It works here: www.madhatwebsolutions.com/namethatbird.html

It does not work here, where I really need it to work: http://www.wildbirdsmarketplace.com/pages/Name-That-Bird!.html

Answer 1

don't use document.forms

var birdName = document.getElementById('birdName').value;

Answer 2

This shouldn't be JavaScript.

Any potential customer will be able to right click and view your JavaScript source and retrieve the code without bothering with the guesswork.

You'll need to query a server with the user input, and the server will need to return a response indicating whether this input is correct or not.

You might want to look at either a normal HTML form submission, or venture into AJAX

Workflow:

1. User enters guess into textfield
2. Launch a request to http://yourserver.com/check_bird.your_server_language?guess=theTextFieldValue
3. Server returns either a success or failure indication
4. Display response to client

Other things to consider: Are you going to allow your customers to guess multiple times, or restrict them? Are you going to be showing several different birds or not?

Answer 3

in http://www.wildbirdsmarketplace.com/pages/Name-That-Bird!.html

<script type="text/javascript" src="birdname.js"></script> refers to 404 - check the file path