CODEWITHSUNDEEP
jquery
Daniel
Daniel

Reputation: 2500

How to improve this jQuery statement?

I have a page with inputs with IDs language1, star1, language2, star2 etc. I need to activate the star input field if the corresponding language field has a length > 0.

Right now I'm using the code below, but I believe I should be able to solve this with a while loop or similar to avoid repeating the same code over and over. Can someone help me with this?

$('#language1').blur(function() {
    if ( $('#language1').val().length == 0){
        $('input[name=star1]',this.form).rating('readOnly',true);
    }
    else {
        $('input[name=star1]',this.form).rating('readOnly',false);
    }
});
$('#language2').blur(function() {
    if ( $('#language2').val().length == 0){
        $('input[name=star2]',this.form).rating('readOnly',true);
    }
    else {
        $('input[name=star2]',this.form).rating('readOnly',false);
    }
});
....

Upvotes: 0

Views: 145

Answers (11)

bgun
bgun

Reputation: 99

You might use a custom attribute to store the relationship:

<input class="language" id="language1" data-rel="star1" />
<input id="star1" />
...

Then use each:

$('.language').each(function() {
  var t = $(this);
  t.blur(function() {
    if ( t.val().length == 0){
      $('#'+t.attr('data-rel')).rating('readOnly',true);                     
    } else {
      $('#'+t.attr('data-rel')).rating('readOnly',false);
    }
  });
});

Upvotes: 0

xkeshav
xkeshav

Reputation: 54022

try ( not tested)

 $('input[id=^language]').each('blur',function(i){  
     var $this = $('input[name="star" + i +"]',this.form);        
     ($(this).val().length == 0)
                 ? $this.prop('readonly')
                 : $this.removeProp('readonly');
 });

Upvotes: 1

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

Try this: You will be able to add other inputs by simply adding a class to them.

Add to all your inputs that should have the blur function a class, let's say "blurred" And now run an "each" function on all blurred class items:

$('.blurred').each(function() {
   var $that = $(this);
   var name  = $that.attr('name');

   if($that.val().length == 0){
     $('input[name='+name+']',this.form).rating('readOnly',true);                       
   } else {
     $('input[name='+name+']',this.form).rating('readOnly',false);
   }
});

Upvotes: 1

xdazz
xdazz

Reputation: 160853

$('#language1, #language2').blur(function() {
    $('input[name=star'+this.id.charAt(this.id.length-1)+']',this.form).rating('readOnly', $(this).val() == '');                       
});

Upvotes: 2

DevCoDesign
DevCoDesign

Reputation: 389

You can also derive the name of the star box to be shown from the input used. write once, use anywhere. similar to the way you would show tooltips for only a relevant input.

$('input').blur(
if ( $('#'+this.id).val().length > 0) {
    function(){star_id = '#'+this.id+'_star'; 
        $(star_id).show();}
});

Upvotes: 0

Didier Ghys
Didier Ghys

Reputation: 30666

Make only one handler:

var changeHandler = function(e) {
    $('input[name=star' + this.id.charAt(this.id.length-1) + ']').rating('readonly', this.value.length === 0);
}

Bind blur event with same handler for several elements using Multiple selector:

$('#language1, #language2').blur(changeHandler);

Upvotes: 2

Dau
Dau

Reputation: 8858

don't select by using the id make another selector like class and use it as

$(".classname").blur(function(){
       if ( $(this).val().length == 0){
            $('input[name=star1]',this.form).rating('readOnly',true);                       
        }
        else {
            $('input[name=star1]',this.form).rating('readOnly',false);
        }
});

Upvotes: 0

Grrbrr404
Grrbrr404

Reputation: 1805

Heyo

if you can, enhance your Html code for the language elements. I guess it is a input element?

You could try something like this

<input type="text" id="language1" starelement="true" />
<input type="text" id="language2" starelement="true" />
...

You could modify your jQuery like this

$('input[starelement=true]').blur(function() {
     //extract the 1 from the id value
     var idValue = $(this).attr('id');
     var numberValue = idValue.substring(idValue.length-1); 
     if ( $(this).val().length == 0){
       $('input[name=star' + numberValue + ']',this.form).rating('readOnly',true);                       
   }
   else {
      $('input[name=star' + numberValue + ']'.rating('readOnly',false);
   }
});

Upvotes: 0

jitter
jitter

Reputation: 54605

You can use the Multiple Selector functionality of jQuery like this

$( '#language1, #language2, moreselectorshere' ).blur( function() {

  var trailingNumber= this.id.charAt( this.id.length-1 ),
      activate = this.value.length > 0;

  $( 'input[name=start' + trailingNumber + ']', this.form )
      .rating( 'readyOnly',  activate );

})

Upvotes: 0

FarligOpptreden
FarligOpptreden

Reputation: 5043

You can try adding a while loop to dynamically test for any amount of items, assuming of course they are in numeric order:

var currentId = 1;
while ($('#language' + currentId++).length > 0) {
    $('#language' + currentId).blur(function() {
        if ( $('#language' + currentId).val().length == 0){
            $('input[name=star' + currentId + ']',this.form).rating('readOnly',true);                       
        }
        else {
            $('input[name=star' + currentId + ']',this.form).rating('readOnly',false);
        }
    });
}

Upvotes: 0

Johandk
Johandk

Reputation: 428

for(var i = 1; i <= 2; i++) {
  $('#language'+i).blur(function() {
    if ( $('#language'+i).val().length == 0){
      $('input[name=star'+i+']',this.form).rating('readOnly',true);                       
}
else {
  $('input[name=star'+i+']',this.form).rating('readOnly',false);
    }
  });
}

Just change the i<=2 to however many times you need this repeated.

Upvotes: -1

Related Questions