表单和getElementById

Question

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

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

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

- user2197436

---

请下次格式化您的代码，使其更易于阅读。 - imkost

Answer 1

你尝试的第一种方式是正确的。

问题在于，你没有将onclick事件绑定到一个函数上。

你在head标签中声明了getName函数，在body标签之前解释。

但是当声明按钮输入并且id和name设置为getName时，你覆盖了getName函数。

你可以将其id和name更改为submitButton。 你也可以将函数声明移动到body标签的末尾，或将其包装在onLoad方法中。

我将getName调用包装在alert中以查看结果（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>

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

- Armel Larcier

---

嗨，谢谢你。还有感谢那个 jfiddle 链接。我不理解 submitbutton 部分。我一直看到 onclick 的例子，例如 onClick=”getName();”，但它并没有起作用。再次感谢，因为我正在学习。 - user2197436

Answer 2

仔细看看这行代码，你对最后一个语句没有做任何处理。

var FullName = document.getElementById('FirstName');  document.getElementById('LastName');

你有两个getName函数，只能留下一个。

function getName(){
 var firstName = document.getElementById("firstName").value;
 var lastName= document.getElementById("lastName").value;

  if(firstName === "" || lastName === ""){
    alert("You need to fullfield both First Name and Last Name");
  }
}else{alert("This work.");}

- Manuel Choucino