javascript 表单和 getElementById
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15864606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
forms and getElementById
提问by user2197436
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.
我在表单中使用 getElementById 时遇到问题。我尝试了几种方法都没有运气。我基本上需要表单来验证名字和姓氏字段是否都已填写，并显示一个带有显示姓名的弹出框。
Below is the code I have tried. I tried 2 different ways in my javascript and I am not sure what I am missing.
下面是我试过的代码。我在我的 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")
}
回答by Armel Larcier
The first way you tried was the right one.
您尝试的第一种方法是正确的。
The problem is, you're not binding the onclickevent to a function.
问题是，您没有将onclick事件绑定到函数。
You declare the getNamefunction in the headtag, interpreted before the bodytag.
你getName在head标签中声明函数，在标签之前解释body。
But you overwrite getNamewhen declaring the button inputwith its idand nameset to getName.
但是getName在声明按钮时会覆盖input它id并name设置为getName.
You can just change its id and name to submitButtonfor example. You could also move the function declaration to the end of the bodytag, or wrap it in an onLoadmethod.
例如，您可以将其 id 和 name 更改submitButton为。您还可以将函数声明移动到body标记的末尾，或将其包装在一个onLoad方法中。
I wrapped the getNamecall in an alert to see the result (alert(getName()))
我将getName呼叫包装在警报中以查看结果 ( alert(getName()))
Check out the jsFiddle : http://jsfiddle.net/zpNSv/1/
查看 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
和 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;
}
}
回答by Manuel Choucino
Take a closer look at this line, you are doing nothing with the last statement
仔细看看这一行，你对最后一条语句什么也没做
var FullName = document.getElementById('FirstName'); document.getElementById('LastName');
You have 2 getName. only one can live.
你有 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.");}
