jQuery add - to input but only add twice

Question

I have this little script here... It adds a "-" after every 4 characters but i need it to not add the - after the 12 character.

$(function(){
$("#promo").keyup(function(){
    var $this = $(this);
    if ((($this.val().length+1) % 5)==0){
        $this.val($this.val() + "-");
        }   
    });        
});

But it is adding a "-" at the end of the 12 characters despite my character limit of 14.

i have a JSFiddle here

How would i prevent this from happening?

Guillaume Poussel · Accepted Answer · 2013-10-17 18:09:48Z

3

maxlength attribute does not prevent you to modify <input> value using Javascript.

You can still add a check:

$(function(){
    $("#promo").keyup(function(){
    var $this = $(this);
    if ((($this.val().length+1) % 5)==0 && $this.val().length() < $this.attr("maxlength")){
      $this.val($this.val() + "-");
    }   
  });        
});

answered Oct 17, 2013 at 18:09

Guillaume Poussel

9,8522 gold badges35 silver badges43 bronze badges

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

3 Comments

Sean Kendle Over a year ago

Wow, just made this in Fiddle, too. Man, there are just too many helpful people on this site! Ha!

Travis Over a year ago

thanks @GuillaumePoussel! my jQuery and JS is still very basic!

Travis Over a year ago

Sorry it took them a minute to allow me to do that... @GuillaumePoussel

Sergio · Accepted Answer · 2013-10-17 18:21:26Z

1

You could add this inside your if:

if ($this.val().length > 12) {
    return false;
}

Code suggestion (with less jQuery):

$(function () {
    $("#promo").keyup(function () {
        if (((this.value.length + 1) % 5) == 0) {
            if (this.value.length > 12) {
                return false;
            }
            this.value += "-";
        }
    });
});

Demo here

edited Oct 17, 2013 at 18:21

answered Oct 17, 2013 at 18:09

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Comments

john Smith · Accepted Answer · 2013-10-17 18:10:00Z

0

you can simply use the && AND operator and make it a condition that nothing will happen if val.length is greater 11

$(function(){
    $("#promo").keyup(function(){
        var $this = $(this);
        if ((($this.val().length+1) % 5)==0 && $this.val().length <=11){
            $this.val($this.val() + "-");
            }   
        });        
    });

http://jsfiddle.net/sAu32/3/

answered Oct 17, 2013 at 18:10

john Smith

18k12 gold badges80 silver badges124 bronze badges

Comments

NappingRabbit · Accepted Answer · 2013-10-17 18:10:07Z

0

I did not look at fiddle but;

$(function(){
    $("#promo").keyup(function(){
    var $this = $(this);
    if ((($this.val().length+1) % 5)==0 && $this.val().length <= 12){
        $this.val($this.val() + "-");
        }   
    });        
});

answered Oct 17, 2013 at 18:10

NappingRabbit

1,9191 gold badge13 silver badges18 bronze badges

Comments

Akshay Khandelwal · Accepted Answer · 2013-10-17 18:10:33Z

0

$(function(){
    $("#promo").keyup(function(){
        var $this = $(this);
        if($this.val().length<14){
        if ((($this.val().length+1) % 5)==0){
            $this.val($this.val() + "-");
            }   
        }
        });        
    });

There you go.

And the Fiddle update here

answered Oct 17, 2013 at 18:10

Akshay Khandelwal

1,56811 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery add - to input but only add twice

5 Answers 5

3 Comments

Demo here

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Demo here

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related