Error Trap Drop Down

Not too sure if this is the right forum, so if not please move.

I'm trying to do an errortrap on a drop down list using HTML. The code I have for the dropdown list is:

<!--
*******************
Drop Down for Status
*******************
-->
<Select name = status onclick = "statustrap()">
<option = First> Please Select One
<option = Mr> Mr.
<option = Mrs> Mrs.
<!--
End of Drop Down
-->
</select>

And the function statustrap is:

function statustrap()
if document.cardform.status.value == First
{
alert("Please Select a Status")
document.cardform.status.focus()
}

It's not bringing up an error at all, but at the same time it's not doing what I would like it to do.

Is it even possible?

daymobrew

Deleted User wrote: »

<!--
*******************
Drop Down for Status
*******************
-->
<Select name = status onclick = "statustrap()">
<option = First> Please Select One
<option = Mr> Mr.
<option = Mrs> Mrs.
<!--
End of Drop Down
-->
</select>

And the function statustrap is:

function statustrap()
if document.cardform.status.value == First
{
alert("Please Select a Status")
document.cardform.status.focus()
}

The quoted function does not have opening or closing braces. Is that a copy/paste error?

I recommend adding quotes around the HTML values in the html code i.e.

<select name="status" onclick="statustrap()">
<option="First">Please Select One</option>
<option="Mr"> Mr.</option>
<option="Mrs"> Mrs.</option>
</select>

Note also the closing </option> tags.

louie

I hope this is a copy & paste error, because the entire html code is wrong.

I'm only really starting off, didn't cop off to those stuff

So I've now changed it to

function statustrap()
{

if document.cardform.status.value = First
{
alert("Please Select a Status")
document.cardform.status.focus()
}

}

and

<!--
*******************
Drop Down for Status
*******************
-->
<Select name = status onblur = "statustrap()">
<option = "First"> Please Select One </option>
<option = "Mr"> Mr. </option>
<option = "Mrs"> Mrs. </option>
<!--
End of Drop Down
-->
</select>

louie

change the javascript to this:

function statustrap(){
   if (document.cardform.status.value == "First"){
     alert("Please Select a Status");
    document.cardform.status.focus();
  }
}

louie

and there is a proper html select menu

<!--
*******************
Drop Down for Status
*******************
-->
<select name="status" id="status" onchange="statustrap()">
<option value="First">Please Select One</option>
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<!--
End of Drop Down
-->
</select>

tricky D

Would radio buttons be more appropriate here??

I'm now trying to do errortrapping for a text box - the code I have is

<br><b>First Name<center></b></br>
<input type= text name = firstname value = ""> 

I also have a button

<input type = button value = "Submit" onclick = "frstname()">

And the function frstname is

function frstname()
{

if (document.cardform.firstname.value == "")
{
alert("Please Enter a First Name");
document.cardform.firstname.focus();
}

}

but for some reason it seems to be doing nothing at all. I'm only really starting off with HTML and javascript, so I'm sorry if it seems like a really easy mistake.

Also, is it possible to have the submit button carrying out a list of functions?

Eoin

That works for me in FF and IE.

A few suggestions:

1) Put JavaScript alerts before the first line of code and test. If it triggers, then move it to just before the next line. Keep going till it doesn't trigger, and that's either where your error is, or where the code is not being reached (e.g. through an "if" statement")

2) Download the Firefox web developer toolbar - it's invaluable

3) Enclose your tag attributes in quotes - it makes for much more legible markup, and will probably reduce errors as you go:
<input type= text name = firstname value = "">
should be:
<input type="text" name="firstname" value = "">

4) If you give each element an ID as well as a name, you can reference it by just doing:
document.getElementById("firstname"). This works for any element on the page, while document.<formname> doesn't.

Edit:

Also, is it possible to have the submit button carrying out a list of functions?

A good few ways of doing this - you can have a wrapper function that calls other functions, you can separate them by semi-colons in the onclick event, or you can attach events to them on the pageload event.

One important thing to remember is not to rely on JavaScript validation - you must validate on the server as well.