jQuery add content after input element and remove added content

Question

I want to add <em> tag after textbox, if user inserted non-numeric format.

$('.numeric').keypress(function (e) {
 var key_code = e.which;
 if (key_code != 8 && key_code != 0 && (key_code < 48 || key_code > 57)) {
    $(this).after("<em>type only numeric formatted text<em>");
    return false ;
 }
 else {
    $('em').remove();
 }
});

Textboxes more than one. HTML code:

<div>
    <label for="Area">Full Area:</label>
    <input type="text" value="" name="FullArea" id="FullArea" class="numeric">
</div>

In my jQuery code have some issues:

Will add <em> more than one time, after non-numeric format;
Will remove all <em> tag, if user typed numeric format (near other textboxes too, all em in page)

Need smart way to do this functionality, without issues [1] and [2]. Thanks.

Reigel Gallarde · Accepted Answer · 2010-07-02 06:27:02Z

2

I would suggest to just hide and show that,... it's much cheaper than removing and adding again...

try this demo

var em = $("<em>type only numeric formatted text<em>").hide();
$('.numeric').keypress(function (e) {
    var key_code = e.which;
    if (key_code != 8 && key_code != 0 && (key_code < 48 || key_code > 57)) {
       $(this).next("em").show();
       return false ;
    }
    else {
       $(this).next("em").hide();
    }
}).after(em);

edited Jul 2, 2010 at 6:27

answered Jul 2, 2010 at 6:21

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

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

1 Comment

Reigel Gallarde Over a year ago

@loviji - yes... and it still works as expected... much cheaper than add-remove way... please see demo...

Matt Mitchell · Accepted Answer · 2010-07-02 06:21:46Z

1

Try this:

('.numeric').keypress(function (e) { 
 var next = $(this).next('em');
 var key_code = e.which; 
 if (key_code != 8 && key_code != 0 && (key_code < 48 || key_code > 57)) { 
    if (next.length == 0)
        $(this).after("<em>type only numeric formatted text<em>"); 
    return false ; 
 } 
 else { 
    next.remove(); 
 } 
});

answered Jul 2, 2010 at 6:21

Matt Mitchell

42k35 gold badges122 silver badges186 bronze badges

Comments

Tomas Aschan · Accepted Answer · 2010-07-02 06:30:22Z

0

Take a look at the jQuery Validation Plugin that will do exactly this (and much more!) for you.

The real strength of jQuery is its pluggability, and the fact that there are so many plugins already written. If someone else has already invented the wheel, save some time and use theirs ;)

answered Jul 2, 2010 at 6:30

Tomas Aschan

61.2k62 gold badges267 silver badges424 bronze badges

Collectives™ on Stack Overflow

jQuery add content after input element and remove added content

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related