Javascript onClick validate not firing

Question

First off my apologies for how disgusting this code is, it is not my choice by far, following orders from my boss and others in my team have never done anything web before. Really isn't good to miss the start of a project!

Basically I want to validate a couple of inputs before progressing to the next page via a submit button. There is no form in use so I am trying to use onClick for the submit button to launch the validate function. Can anybody see what is wrong with the code below (other than it being awful, from the standpoint of getting it to work as wanted.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- #include file="includes/header.asp" -->
<Center>

<tr>
<td width="100%" height="300" align="center">


    <table width="100%" id="table01">

        <Tr>
            <Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
                <font class="table_header">Password Reset</font>
            </td>
        </tr>
        <tr>
        <Td align="center" height="150" valign="middle">
                <font class="table_grey">
                    Please select one of the methods below to reset your password.
                    <br><br>
                    <form name="radioq"align="center">
                        <input type="radio" name="levels" value="level1" onClick="get_radio_value(1);"/> E-mail a new password<br />
                        <input type="radio" name="levels" value="level2" onClick="get_radio_value(2);"/> Answer secret question<br/>
                    </form>
                        <!-- Javascript to handle which table loads below based on radio selection -->                   
                </font> 
        </td>           
    </tr>

</table>

<table width="100%" class="table01" id="level1" style="display:none;">

        <Tr>
            <Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
                <font class="table_header">E-mail Address</font>
            </td>
        </tr>
        <tr>
        <Td align="center" height="150" valign="middle">
                <font class="table_grey">
                    Please enter your e-mail address and surname.
                    <br/><br/>


                        <font class="table_grey">E-mail Address:&nbsp;</font>

                        <input id="emailinput" size="20" type="text" value="" name="emailinput" />
                        <br/><br/>
                        <font class="table_grey">Surname:&nbsp;</font>

                        <input id="surnameinput" size="20" type="text" value="" name="surnameinput" />
                        <!-- Javascript to handle incorrect surname/email -->                    
                </font>

        </td>
    </tr>

    <tr>                                
        <td align="right">
            <a style="text-decoration:none;"href="password_email_success.asp"><button class="smallbutton" onClick="return validatemail();" type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
        </td>
    </tr>   
</table>

<table width="100%" class="table01" id="level2" style="display:none;">

        <Tr>
            <Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
                <font class="table_header">Secret Question</font>
            </td>
        </tr>
        <tr>
        <Td align="center" height="150" valign="middle">
                <font class="table_grey">
                    Please answer your secret question below.
                    <br/><br/>


                        <font class="table_grey">What is your mother's maiden name?&nbsp;</font>

                        <br/><br/>
                        <font class="table_grey">Answer:&nbsp;</font>

                        <input id="answerinput" size="20" type="text" value="" name="answerinput" />
                        <!-- Javascript to handle incorrect surname/email -->                    
                </font>

        </td>
    </tr>

    <tr>                                
        <td align="right">
            <a style="text-decoration:none;"href="password_change_success.asp"><button class="smallbutton"  type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
        </td>
    </tr>   
</table>

<br><br>

<!-- #include file="includes/footer.asp" -->

<script language="Javascript">

function get_radio_value(val)

{

val = val - 1;

for (var i=0; i < document.radioq.levels.length; i++){

      if(i==val){

        document.radioq.levels[i].checked = true;

       }

}

for (var i=0; i < document.radioq.levels.length; i++){

   if (document.radioq.levels[i].checked)

      {

          var rad_val = document.radioq.levels[i].value;

          document.getElementById(rad_val).style.display = "table";

      }

   else{

    var rad_val = document.radioq.levels[i].value;

    document.getElementById(rad_val).style.display = "none";

   }

}

}

function validatemail()
        {
            if ( !isNaN(document.level1.surnameinput.value)  )
            {
                alert("Please enter a valid lastname - text only");
                document.level1.surnameinput.focus();
                return false;
            }
            if ((document.level1.emailinput.value == "") )
            {
                alert("Please enter an email.");
                document.level1.emailinput.focus();
                return false;
            }

            return true;
        }

You need to describe what your problem is! Do you really expect the community to parse through your whole source code to find anything suspicious? Try debugging your code properly. And if you still have troubles post the specific error message here. — Amberlamps
– Amberlamps, Commented Mar 19, 2012 at 15:10
my apologies I wanted to chop this down but my work system is a nightmare and of course was throwing javascript errors so I couldn't chop it. — shicky
– shicky, Commented Mar 19, 2012 at 20:41

Community · Accepted Answer · 2017-05-23 12:20:14Z

1

Call your validatemail() function at the forms onSubmit event instead of one of the buttons onClick event. This is considered best practise as it runs the validation function even when the form is submitted with the ENTER key as well as all related submit buttons.

<form onSubmit="return validatemail();">

Regadring your submit button, don´t name it "submit" and don´t use the class or any other attributes multiple times on the same element.

<button type="submit" name="submitButton" value="Login" class="smallbutton" />

Also, all the form elements (input, button etc.) should be placed within the <form></form> tags.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Mar 19, 2012 at 15:20

Stefan

5,6624 gold badges28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shicky Over a year ago

Believe me I agree with all of your points, this is something I inherited and have to hack together a solution due to not being allowed to start again and needing to consider the knowledge of the rest of the team. How that can't mean showing the rest of the team how its done properly so they can do it for themselves, is beyond me. I managed to hack around it, though your solution is what I would normally do, in this case it unfortunately wouldn't do the trick due to includes everywhere - or it didn't work with my attempts anyway. Will post a solution if I can get on this at work tomorrow

shicky Over a year ago

Accepted answer as it's how it should be done. I managed a hack around but it was only because I had no choice, can't even remember how I did it but I do remember feeling dirty afterwards so just do it right in the first place!

Collectives™ on Stack Overflow

Javascript onClick validate not firing

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related