Question

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

Answer 1

您的文字替换工作正常。但是，关闭警报框后，表单将被发送，以便刷新页面。

将onclick="validateUsername()"更改为onclick="return validateUsername()"，并在点击处理程序功能的末尾添加return false。

一旦掌握了这一点，请考虑在表单HTML中使用addEventListener（）而不是硬编码的Javascript。

Answer 2

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

http://jsfiddle.net/rqUdT/

然而，最好使用标准事件注册（通过addEventListener并使用事件对象的preventDefault方法来停止默认点击行为。

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

Answer 3

jsFiddle Demo

使用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>

单击按钮无法更改文本

3 个答案: