CODEWITHSUNDEEP
phpjavascriptjquery
Jed
Jed

Reputation: 1733

JQuery: Dropdown Value is Not Changed using .val() function

I encounter a very strange issue here.

I have two select fields that will output show same result if one of them changes selected value.

Here's the code:

    var qlt,internalQ;

    if (jQuery("#qlt").length>0){
                qlt =       (jQuery("#qlt").val()).split(":")[0];   
                qltDesc =   (jQuery("#qlt").val()).split(":")[1]; 
            }

    if (jQuery("#internalQ").length>0){
                internalQ = (jQuery("#internalQ").val()).split(":")[0];     
                qltDesc =   (jQuery("#internalQ").val()).split(":")[1]; 
            }

    <?php if(is_single('booklets')) { ?> 
    jQuery('#qlt').change(function(){ 
        if  (qlt=="4-1")                {   jQuery('#internalQ').val('4-1:Matt 90gsm');         }
            else if(qlt=="4-2")         {   jQuery('#internalQ').val('4-2:Silk/matt 128gsm');   }
            else if(qlt=="4-3")         {   jQuery('#internalQ').val('4-3:Silk/Matt 150gsm');   }
            calculate();
        }); 

        jQuery('#internalQ').change(function(){ 
            if  (internalQ=="4-1")      {   jQuery('#qlt').val('4-1:Matt 90gsm');               }
            else if(internalQ=="4-2")   {   jQuery('#qlt').val('4-2:Silk/matt 128gsm');         }
            else if(internalQ=="4-3")   {   jQuery('#qlt').val('4-3:Silk/Matt 150gsm');         }
            calculate();
        }); 
    <?php } ?>

The problem is the last conditions of each JQuery.change function (else if(internalQ=="4-3" and else if(qlt=="4-3")) does not work as expected. The value will change back to the first option, NOt the third.

If my description is not clear, my current page is: http://210.48.94.218/~printabl/products/booklets/

The fields I'm talking about are Cover Quality and Internal Quality

Q: Did I miss something here? Can you point it out? Any help will be greatly appreciated.

Upvotes: 0

Views: 285

Answers (3)

Jed
Jed

Reputation: 1733

Guys I already solved the issue. Its my bad actually.

I have a HTML code as default that i used in displaying Cover Quality and Internal Quality:

<tr>                                                                                 
    <td><?php echo"Cover Quality";?></td>   
    <td>
                 <select id="qlt" name="quality">
        <option value="4-1:Matt 90gsm">Matt 90gsm</option>
        <option value="4-2:Silk/matt 128gsm">Silk/Matt 128gsm</option>
        <option value="4-3:Silk/matt 150gsm">Silk/Matt 150gsm</option>
         </select></td>     
</tr>

And I used the jQuery($element).val('$val') to change the default value.

What I'm doing wrong is: in third option in 'Cover and Interal Quality`

else if (internalQ=="4-3") {jQuery('#qlt').val('4-3:Silk/Matt 150gsm'); }

instead of:

else if (internalQ=="4-3") {jQuery('#qlt').val('4-3:Silk/matt 150gsm'); }

The difference is the Capital "M" and Small "m" in the values.

So I changed, the third value in my jQuery Code(or you can change the HTML) so that the value will match exactly like what is in the HTML. Solved! :)

Thanks for the prompt stackoverflow pros who helped and gave some idea. Now I know whats the cause of this issue.

I will change the title so that programmers with the same problem will be directed to this post.

Upvotes: 0

Sean
Sean

Reputation: 12433

I think the issue stems from you setting qlt and internalQ statically outside your jQuery().change(function(){});

Try setting the values inside - 

var qlt,internalQ;

jQuery('#qlt').change(function(){ 

    qlt =  (jQuery(this).val()).split(":")[0];  // set the value of qlt

    if(qlt=="4-1"){   
       jQuery('#internalQ').val('4-1:Matt 90gsm');
    }
    else if(qlt=="4-2"){
       jQuery('#internalQ').val('4-2:Silk/matt 128gsm');
    }
    else if(qlt=="4-3"){
       jQuery('#internalQ').val('4-3:Silk/Matt 150gsm');
    }
        calculate();
    }); 

jQuery('#internalQ').change(function(){

   internalQ = (jQuery(this).val()).split(":")[0]; // set the value of internalQ    

   if(internalQ=="4-1"){   
      jQuery('#qlt').val('4-1:Matt 90gsm');
   }
   else if(internalQ=="4-2"){   
      jQuery('#qlt').val('4-2:Silk/matt 128gsm');
   }
   else if(internalQ=="4-3"){
      jQuery('#qlt').val('4-3:Silk/Matt 150gsm');
   }
   calculate();
}); 
<?php } ?>

see this jsFiddle example - http://jsfiddle.net/zYg2P/1/

Upvotes: 1

isThisLove
isThisLove

Reputation: 269

jQuery('#qlt').change(function(){
   var qlt = jQuery(this).val().split(":")[0];
   if(qlt.length > 0){
      //do your if else here
   }
)};

Do the same for #internalQ.

If you don't want to check the length each time, just avoid the if statment in the function

Upvotes: 1

Related Questions