表格和getElementById [英] forms and getElementById

问题描述

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

I am having issues using getElementById in a form. I have tried several ways with no luck. I basically need the form to verify that both First Name and Last Name fields are filled in, and display a popup box with the names displayed.

下面是我尝试过的代码.我在JavaScript中尝试了2种不同的方式，但不确定自己缺少什么.

Below is the code I have tried. I tried 2 different ways in my javascript and I am not sure what I am missing.

<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")
}

推荐答案

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

The first way you tried was the right one.

问题是，您没有将onclick事件绑定到函数.

The problem is, you're not binding the onclick event to a function.

您在head标记中声明getName函数，该函数在body标记之前解释.

You declare the getName function in the head tag, interpreted before the body tag.

但是当您声明按钮input的id和name设置为getName时，您会覆盖getName.

But you overwrite getName when declaring the button input with its id and name set to getName.

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

You can just change its id and name to submitButton for example. You could also move the function declaration to the end of the body tag, or wrap it in an onLoad method.

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

I wrapped the getName call in an alert to see the result (alert(getName()))

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

Check out the 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>

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

这篇关于表格和getElementById的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！