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

Answer 1

您嘗試的第一種方法是正確的。

問題是，您沒有將onclick事件綁定到函數。

您在head標記中聲明getName函數，在body標記之前解釋。

但其id和name組聲明按鈕input到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; 
    } 
} 

Answer 2

乘坐這條線仔細看看，你是做什麼用的最後一條語句

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