0

フォーム内のテキスト行を変更しようとしています。より具体的には、特定の条件下でテキストを変更したいと考えています。条件は、ユーザーがボタンをクリックしたときにチェックすることです。この場合、ユーザーが入力フィールドを空白のままにすると、テキストが変更されます。このコードには、作業中のフォーム全体とスクリプトが含まれています。私が抱えている問題は、ボタンをクリックするとテキストが変化するように見えますが、1 秒間または警告メッセージが表示されている間だけです。その後、元のテキストに戻ります。私のスクリプトでアクセスしている行は、コードの 5 行目です。

<div id="userRegistration"> <!--  Registration Form Shell -->

            <form name="registration">
            <div id="leftSideForm"> <!--  Left side of the Registration Form -->

                <span style="color:red">*</span>
                Enter a Username: <input type="text" name="userName" /> <br />
                 <b id="yy">test </b> <br />

                <span style="color:red">*</span>
                Enter Password: <input type="password" name="userPassword" /><br />

                <span style="color:red">*</span>
                Confirm Password: <input type="password" name="cUserPassword" /><br /> <br /> <br />

                <span style="color:red">*</span>
                First name: <input type="text" name="firstName" /><br />

                Middle initial: <input type="text" name="middleName" /><br />

                <span style="color:red">*</span>
                Last name: <input type="text" name="lastName" /><br /> <br />

            </div> <!-- end of Left sideform -->

            <div id="rightSideForm">

                <span style="color:red">*</span>
                Email Address: <input type="text" name="userEmail" /><br />

                <span style="color:red">*</span>
                Confirm Email: <input type="text" name="confirmUserEmail" /><br /> <br /> <br /> <br />

                <button type="submit" onclick="validateUsername()" >Register</button>
            </div> <!-- end of right sideform -->

            </form>

</div> <!-- End of registration -->


<script type="text/javascript">
function validateUsername()
{
var x=document.forms["registration"]["userName"].value;
if (x == null || x== "")
{
document.getElementById("yy").innerHTML = "WHY WON'T YOU WORK GRRRR";
alert("First name must be filled out");
}
}
</script>
4

3 に答える 3

0

テキストの置換は正しく機能しています。ただし、アラート ボックスを閉じると、フォームが送信されるため、ページが更新されます。

に変更onclick="validateUsername()"して、クリック ハンドラー関数の末尾にonclick="return validateUsername()"追加します。return false

慣れてきたら、フォーム HTML でハードコードされた Javascript の代わりに addEventListener() を使用することを検討してください。

于 2013-04-18T01:31:50.180 に答える
0

問題は、フォーム送信イベントを停止していないことです。あなたの場合、これは失敗時の関数return validateUsername()内onclickで実行できます：return falsevalidateUsername

http://jsfiddle.net/rqUdT/

ただし、標準のイベント登録を使用する方がよいでしょう (addEventListenerイベント オブジェクトのpreventDefaultメソッドを介して使用し、デフォルトのクリック動作を停止します。

http://jsfiddle.net/rqUdT/1/

于 2013-04-18T01:32:12.740 に答える
0

jsFiddle デモ

jquery を使用し、次のように onclick を削除する方が簡単かもしれません。

JS:

$('#submit').click(function (e) {
    e.preventDefault();
    var x = document.forms["registration"]["userName"].value;
    if (x === null || x === "") {
        document.getElementById("yy").innerHTML = "WHY WON'T YOU WORK GRRRR";
        alert("First name must be filled out");
    }
});

HTML:

<button id="submit" type="submit">Register</button>
于 2013-04-18T01:35:44.553 に答える