Javascript onClick проверить, не стреляя - PullRequest
0 голосов
/ 19 марта 2012

Прежде всего мои извинения за то, как отвратителен этот код, это далеко не мой выбор, следуя указаниям моего босса и других членов моей команды, никогда раньше не делал ничего в Интернете. На самом деле не хорошо пропустить начало проекта!

По сути, я хочу проверить пару входов, прежде чем перейти на следующую страницу с помощью кнопки отправки. Форма не используется, поэтому я пытаюсь использовать onClick для кнопки отправки, чтобы запустить функцию проверки. Кто-нибудь может увидеть, что не так с кодом ниже (кроме того, что это ужасно, с точки зрения заставить его работать так, как хотел.)

<!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;
        }

1 Ответ

1 голос
/ 19 марта 2012

Вызовите функцию validatemail() для события onSubmit вместо одной из кнопок onClick. Это считается наилучшей практикой, так как она запускает функцию проверки, даже если форма отправляется с помощью клавиши ENTER , а также всех связанных с ней кнопок отправки.

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

За исключением кнопки отправки, не называйте ее «отправить» и не используйте class или любые другие атрибуты несколько раз для одного и того же элемента.

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

Кроме того, все элементы формы (input, button и т. Д.) Должны быть помещены в теги <form></form>.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...