我在表单中使用getElementById有问题。我试了好几种方法都没有成功。我基本上需要表单来验证First Name和Last Name字段是否都已填写,并显示一个显示姓名的弹出框。
下面是我试过的代码。我在我的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
事件绑定到函数。
在head
标签中声明getName
函数,在body
标签之前进行解释。
但是当声明按钮input
的id
和name
设置为getName
时,您覆盖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;
}
}
仔细看看这一行,最后一条语句
什么也没做var FullName = document.getElementById('FirstName'); document.getElementById('LastName');
你有2个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.");}