返回带有.empty和.append的连接输入

时间:2013-04-14 23:26:54

标签: javascript jquery dom

我正在尝试获取名字和名字串联的返回值。我基本上需要连接表单中的输入字段以返回消息(如果为空),或者如果用户将此信息提供给字段,则返回名字和姓氏。

#message是HTML中的div标签。

它会返回值,但不会返回消息“请输入您的名字和姓氏”。如果输入框为空。

这是我的JavaScript代码:

 var getName = function() {
    var firstName = document.getElementById("firstName"),
    lastName = document.getElementById("lastName"),
    fullName;   

    if (firstName.value == "" && lastName.value == "" ) {
       fullName= $("#message").empty().append("Please enter your first and last name.");
    } else {
       fullName = firstName.value + " " + lastName.value;
    }
    return $("#message").empty().append(fullName);
 }
   $(document).ready(function(){
   $("#message").empty().append("Hello world");
 });




Here is the HTML for the form 

 <form name="contactform" method="post" action="">
    <input type="text" name="firstName" id="firstName" placeholder= "First Name">
    <br>
    <input type="text" name="lastName" id="lastName" placeholder= "Last Name">
    <br>
    <input type="text" name="email" placeholder= "Email Address">
    <p>
    <h4> What is your sex? </h4>
    <input type="radio" name="sex" value="male">
    Male
    <input type="radio" name="sex" value="female">
    Female
    <p>
    <h4> What is your favorite type of music </h4>
    <input type="checkbox" name="vehicle" value="rock">
    I like Rock and Roll<br/>
    <input type="checkbox" name="vehicle" value="funk">
    I like Funk
    <p>
      <textarea  name="comments" placeholder= "Additional Comments"></textarea>
      <input type="button"  name="submit" id="submit"  value="Get Name" onclick="getName();" />
  </form>

1 个答案:

答案 0 :(得分:0)

您需要设置“请输入您的名字和姓氏”。作为文本值而不是尝试传递jquery语句。

看看这个JS小提琴: http://jsfiddle.net/kW4b6/

我刚刚更改了这一行:

fullName= $("#message").empty().append("Please enter your first and last name.");

对此:

fullName = "Please enter your first and last name.";