形式和.append问题

时间:2013-04-15 02:19:57

标签: jquery forms 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> 

1 个答案:

答案 0 :(得分: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 submit方法收听on事件,同时请注意append返回一个jQuery对象和一个对象是JavaScript中的真值,所以return $("#message").empty().append(fullName); === return true;