javascript - 表单和 getElementById

我在表单中使用 getElementById 时遇到问题。我尝试了几种方法都没有运气。我基本上需要表单来验证名字和姓氏字段是否都已填写，并显示一个显示姓名的弹出框。

下面是我试过的代码。我在我的 javascript 中尝试了 2 种不同的方式，但我不确定我错过了什么。

<form name="form" id="form" method="post" action="">

    <p class="FirstName">
        <label for="FirstName">First Name:</label>
    </p>
    <p>
        <input name="FirstName" type="text" id="FirstName" />
    </p>

    <p class="LastName">
        <label for="LastName">Last Name:</label></p>
        <p>
        <input name="LastName" type="text" id="LastName" />
    </p>

    <p class="submit">
        <input name="getName" type="button" id="getName" value="Get Name" onClick=”getName();" />
    </p>
</form>

var getName = function () {
    if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "") {
        return ("Please enter a first name and a last name.");
    } else {
        var FullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value;
        return FullName;
    }
}

function getName() {
    var FullName = document.getElementById('FirstName');
    document.getElementById('LastName');
    if (FullName.value != "")
        alert(FullName.value)
    else
        alert("Please enter first and last name")
}

最佳答案

您尝试的第一种方法是正确的。

问题是，您没有将 onclick 事件绑定(bind)到函数。

您在 getName 标签中声明 head 函数，在 body 标签之前进行解释。

但是在声明按钮 getName 时会覆盖 input ，其 id 和 name 设置为 getName 。

例如，您可以将其 id 和名称更改为 submitButton。您还可以将函数声明移动到 body 标记的末尾，或将其包装在 onLoad 方法中。

我将 getName 调用包装在警报中以查看结果( alert(getName()) )

查看 jsFiddle:http://jsfiddle.net/zpNSv/1/

<form name="form" id="form" method="post" action="">
    <p class="FirstName">
        <label for="FirstName">First Name:</label>
    </p>
    <p>
        <input name="FirstName" type="text" id="FirstName" />
    </p>
    <p class="LastName">
        <label for="LastName">Last Name:</label>
    </p>
    <p>
        <input name="LastName" type="text" id="LastName" />
    </p>
    <p class="submit">
        <input name="submitButton" type="button" id="submitButton" value="Get Name" onClick="alert(getName())" />
    </p>
 </form>

和 JS

function getName() {
    var FirstName = document.getElementById("FirstName"),
        LastName = document.getElementById("FirstName");
    if (FirstName.value == "" ||   document.getElementById("LastName").value == "")
    {
        return ("Please enter a first name and a last name.");
    }
    else
    {
        var FullName = FirstName.value + ' ' + LastName.value;
        return FullName;
    }
}

关于javascript - 表单和 getElementById，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15864606/