CODEWITHSUNDEEP
javascriptjquerycsshtml
user2796475
user2796475

Reputation: 23

My append() doesn't seem to be functioning

I'm sure this is a very newbie question, but I just recently started typing up some code for a form that incorporates client side form validation. Right at the beginning of my attempt at programming the javascript/jQuery code for this, my append() method just isn't producing any visible results. I have tried getting isolating the append() statement, changing the id to class, reviewing old code in which I have appended paragraphs to divs to no avail. All suggestions and tips are very welcome.

html5 code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title></title>
    </head>
    <body>
        <form>
        First name: <input id = "firstName" type="text" name="firstname" value="first name"><br/> 
        Last name: <input id = "lastName" type="text" name="lastname" value="last name"><br/> 
        <div class = "text"><textarea></textarea>
        <p></p> <input type="radio">Master Race Python User
        <p></p> <input type="radio">Imperial Ruby Scum
        </div>

        <div class = "languages">
        <h3>Languages Known</h3>
        <input type="checkbox">Python 
        <input type="checkbox">Ruby
        <input type="checkbox">html
        <input type="checkbox">CSS
        <input type="checkbox">Javascript
        <input type="checkbox">jQuery
        <input type="checkbox">Other
        <input type="checkbox" checked>Filthy casual
        <p><input type ="submit"></p>
        </div>
        <div id = "check">
            <p><strong><em>Check</em></strong></p>
        </div>
        <div class = "response">
            <p></p>
        </div>
        </form>
    </body>
</html>

CSS code:

.text {
    background-color:#00ffff;
    border:solid black;
    border-radius:3%;
    box-shadow: 5px 5px 5px
}
.languages {
    background-color:#FFFF33;
    border:solid black;
    border-radius:15%;
    box-shadow: 5px 5px 5px;
    margin-top:10px;
}
#check {
    background-color:#ABCDEF;
    border:solid black;
    width:50px;
    margin-left:200px;
    margin-top:10px;
}

.response {
    border:solid black;
    width:190px;
    height:50px;
}

Javascript/jQuery:

$(document).ready(function(){
    $(".response").append("<p>"+"Nothing to do, eh?" +"</p>")
    $("#check").click(function(){
        var lastName =("#lastName").val()
        if (lastName === ""){
            $(".response").append("<p>"+"Please submit a valid entry"+"</p>")
        }
    })
})

Upvotes: 2

Views: 125

Answers (5)

defau1t
defau1t

Reputation: 10619

Well the reason is simple, you are appending if the value for last name field is empty, but in your mark up you have set its value ="last name"

So your condition doesn't execute and hence the script doesn't append.

Just remove your value from input element in html and you are done.

I added a working code for you. Hope this helps...

http://jsbin.com/EDOJEZ/1/edit?html,output

And yes you have also forgotten $ in your below statement 

var lastName =$("#lastName").val();

Upvotes: 0

user1633525
user1633525

Reputation:

Another problem I found is that you already set a value to #lastName:

<input id="lastName" type="text" name="lastname" value="last name">

Keep value empty and use placeholder.

<input id="lastName" type="text" name="lastname" value="" placeholder = "last name">

Upvotes: 0

nalinmk
nalinmk

Reputation: 41

Are you including jQuery? Your HTML code doesn't have a tag that would load jQuery.

Try adding:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Upvotes: 4

Harry
Harry

Reputation: 89750

You are missing a $ symbol in the below line. It is a typo error.

var lastName =("#lastName").val()

Instead, it should be

var lastName =$("#lastName").val();

Upvotes: 4

Shaun
Shaun

Reputation: 1220

Your jQuery code is missing a $

This line: 

var lastName =("#lastName").val()

should instead be: 

var lastName =$("#lastName").val()

http://jsfiddle.net/bxJaV/

Upvotes: 5

Related Questions