Jquery: How to only show input value if input is not blank?

Question

I'm trying to make a code live preview form with jQuery, so when people type in the input, the related <span> will update.

JQuery:

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        $comment = $(this).val();
        $('span.'+currClass).html($comment);
        return false;
    });
});

HTML:

<label for="image-left-url">Image URL: </label>
<input id="image-left-url" class="image-left-url" value="http://"></input>

<code><pre>&lt;img src=&quot;<span class="image-left-url"></span>&quot;/&gt;</pre></code>

My question is, for some inputs I have the value="xx" part. How can I make it so that if the input is blank, value="xx" doesn't show up (so that it doesn't show up in the <span>)?

SeanCannon · Accepted Answer · 2011-08-16 02:30:14Z

1

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        var _val = $(this).val();
        $comment = (_val != 'xx') ? _val : '';
        $('span.'+currClass).html($comment);
        return false;
    });
});

http://jsfiddle.net/UX4a9/

answered Aug 16, 2011 at 2:30

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ShankarSangoli · Accepted Answer · 2011-08-16 02:31:05Z

0

Something like this

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        $comment = $(this).val();
        if(!$comment){
           $(this).val('xx');
           $('span.'+currClass).hide();
        } 
        else{
           $('span.'+currClass).html($comment).show();
        }

        return false;
    });
});

answered Aug 16, 2011 at 2:31

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

SeanCannon Over a year ago

This hides the span if there is ever a comment.

ShankarSangoli Over a year ago

Thanks @AlienWebguy, but I didnt understood the question well.

Blacksad · Accepted Answer · 2011-08-16 02:36:40Z

0

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        $comment = $(this).val();
        var notblank = ($comment != $(this).attr("value"));
        $('span.'+currClass).html(notblank ? $comment : '');
        return false;
    });
});

answered Aug 16, 2011 at 2:36

Blacksad

15.6k16 gold badges75 silver badges81 bronze badges

Collectives™ on Stack Overflow

Jquery: How to only show input value if input is not blank?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related