0

我正在尝试更改表单内的一行文本；更具体地说，我希望文本在某些条件下发生变化。条件是检查用户何时单击按钮。在这种情况下，我希望在用户将输入字段留空时更改文本。此代码包括我正在使用的整个表单和脚本。我遇到的问题是单击按钮时文本似乎会发生变化，但只有一秒钟或只要警报消息出现。之后，它又回到原来的文本。我脚本中正在访问的行是第 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 中使用 addEventListener() 而不是硬编码的 Javascript。

于 2013-04-18T01:31:50.180 回答
0

问题是您没有停止表单提交事件。在您的情况下，这可以通过return validateUsername()在失败时的功能中onclick完成return false：validateUsername

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 回答