2013-04-15 41 views
1

遇到此表單有困難。表格和.append問題

我在html中使用#message div標記。

我可以得到名字和姓氏,但如果我忘記輸入名字,我不能得到「請輸入您的姓名出現」。我嘗試過各種方式,但沒有運氣。任何人都知道我錯過了什麼?

var getName = function() 
{ 
var fullName; 
if(document.getElementById("FirstName").value == "" && document.getElementById("LastName").value == "") 
{ 
    //fullName = "Please enter your first and last name"; 
    $("#message").empty().append(fullName = "Please enter your first and last name"); 
} 
else 
{ 

    $("#message").empty().append (fullName = document.getElementById("FirstName").value + " " + document.getElementById("LastName").value); 
} 
return $("#message").empty().append(fullName); 
} 
    var displayName = function() 
    { 

$(document).ready(function() { 

    $("#message").empty().append(Hello); 
}); 
    } 

下面是HTML

<div id="message"></div> 

<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="getName()" /> 
</p> 
</form> 

回答

0

fullName = ...是一個賦值,它返回undefined,所以你的附加價值undefined,刪除fullName =。此外,你應該使用引號字符串,將Hello更改爲"Hello",並建議不要將Vanilla JavaScript與jQuery混合使用。

$(document).ready(function() { 
    $("#message").text('Hello *'); 

    $('form').on('submit', function(event){ 
     var first = $('#FirstName').val(), 
      last = $('#LastName').val(); 
     if (first === '' || last === '') { 
     event.preventDefault(); 
     $("#message").html("Please enter your bloody first and last name"); 
     } 
    }); 
}); 

使用onClick是不是一個很好的做法,特別是當你使用jQuery,你可以聽使用jQuery on方法submit事件,也注意到append返回一個jQuery對象和對象是一個JavaScript truthy值,所以return $("#message").empty().append(fullName); === return true;