CODEWITHSUNDEEP
javascriptjquery
Fathur Rachman Widhiantoko
Fathur Rachman Widhiantoko

Reputation: 27

jQuery prepend() not working, what is wrong

I'm confused my append() not showing up in the HTML. Can you guys tell me what is wrong in the following code:

<div class="form-group" id="password">
     <label class="control-label" for="inputError"> Password:</label>
     <input type="password" class="form-control" id="input-password" placeholder="Password" value="" name="password"/>
</div>

my js:

<script type="text/javascript">
        $('input[name="password"]').focusout(function() {
            if($(this).val()==""){
                $('#password').attr('class','form-group has-error');
                $('#password .control-label').prepend("<span class='fa fa-times-circle-o'></span>");
                $('#password .control-label').text(' Input your new password!');
            }
        });
</script>

Upvotes: 1

Views: 1622

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Assuming the focusout event is triggered, the problem is you are using .text() after .prepend() which will remove the content added with .prepend()

$('input[name="password"]').focusout(function () {
    if ($(this).val() == "") {
        $('#password').attr('class', 'form-group has-error');
        $('#password .control-label').text(' Input your new password!');
        $('#password .control-label').prepend("<span class='fa fa-times-circle-o'></span>");
    }
});

Demo: Fiddle

So

jQuery(function($){
    $('input[name="password"]').focusout(function () {
        if ($(this).val() == "") {
            $('#password').attr('class', 'form-group has-error');
            $('#password .control-label').text(' Input your new password!').prepend("<span class='fa fa-times-circle-o'></span>");
            //$('#password .control-label').html('<span class="fa fa-times-circle-o"></span> Input your new password!');
        }
    });
});

Upvotes: 5

Related Questions