CODEWITHSUNDEEP
phpjqueryselectdrop-down-menu
Angeline
Angeline

Reputation: 2379

How to get the selected option value of a drop down box in PHP code

I have a dropdown box which lists a set of logos, like flower, butterfly etc.

<p class="title1">Logo</p>
<select name="logoMenu" class="select" size="7">
    <?php foreach($logos as $logo):?>
        <option id="<?php echo $logo['Subproperty']['id'];?>" value="<?php echo $logo['Subproperty']['values'];?>">
            <?php echo $logo['Subproperty']['values'];?>
        </option>
    <?php endforeach;?>
</select>

Suppose I select the logo 'Flower' from the drop down box, I want the flower picture to be displayed in a div. This is the div that I have to display the pictures:

<div id="theme_logos" class="float_left spaceleft" style="display:none;">
    <?php foreach($defaultLogos as $logo):
        //if($logo['Subproperty']['values']==clicked option value){?>
        <img height="50" width="50" src="/FormBuilder/app/webroot/img/themes/<?php echo $logo['Subproperty']['images'];?>" class="float_left user_profile_image user_profile_image" alt="Default50"/> 
    <?php endforeach;?>
</div>

The problem with this code is that it displays all the pictures found in the table. Because in my controller code I give only the property id as that of 'Logo', but do not give which logo. 

$this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>"Flower"))));

Here I have hard coded 'flower' so that I only get the flower picture.

If I select the logo from the drop down box, how can I pass that selected value to the controller code? Or if I get the selected logo name using jQuery, how can I use that value in the if condition inside the foreach loop?

I am using the CakePHP framework.

$("#logoMenu option").click(function(){
    selectedLogo=$(this).attr("value");
    $('#subproperty_id').val($(this).attr("id"));   

    if(selectedLogo=="Your logo"){
        $("#themes_upload").show();
    }
    else{
        alert(selectedLogo);
        $("#themes_upload").hide();
        $("#theme_logos").show();
    }
});

EDIT:

Now I have tried an AJAX POST where I pass the selected logo to the same action of the controller. I get the value when I alert the passed value in the success function of the ajax function but the picture doesn't appear.

$("#logoMenu option").click(function(){
    selectedLogo=$(this).attr("value");
    $('#subproperty_id').val($(this).attr("id"));   

    if(selectedLogo=="Your logo"){
        $("#themes_upload").show();
    } else {
        alert(selectedLogo);
        $.ajax({
            type: "POST",
            url: "http://localhost/FormBuilder/index.php/themes/themes/",
            async: false,
            data: "selectedLogo="+selectedLogo,
            success: function(msg){
            alert( "Data Saved: " + msg);
    }
});

$("#themes_upload").hide();
$("#theme_logos").show();
}

function themes(){  
    $this->set('themes',$this->Theme->find('all'));
    $logo=$this->params['form']['selectedLogo']; 
    echo "logo:".$logo;  
    $this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>$logo))));
}

When I try to display the image in the page, it doesn't appear. Is it because the div show command is after the AJAX request?

Upvotes: 1

Views: 20609

Answers (1)

TheVillageIdiot
TheVillageIdiot

Reputation: 40527

if you can put the src of image in value of you select option or put attribute of image in hidden div to the value of the item you are showing in select option it will be really easy. Like:

CASE 1) Putting img src in value property of option

<option id="<?php echo $logo['Subproperty']['id'];?>" 
 value="/FormBuilder/app/webroot/img/themes/
                <?php echo $logo['Subproperty']['images'];?>">....</option>

$("#logoMenu").change(function(){
    var logo=$("#logoMenu option:selected").attr("value");
    $("#theme_logos img").hide();
    $("#theme_logos img[src='"+logo+"']").show();
})

CASE 2) Putting image's alt to value in option

<img height="50" width="50" src="..<?php echo $logo['Subproperty']['images'];?>"
      class="..." alt="<?php echo $logo['Subproperty']['values'];?>"/>

<option id="<?php echo $logo['Subproperty']['id'];?>" 
 value="<?php echo $logo['Subproperty']['values'];?>">..</option>

$("#logoMenu").change(function(){
    var alt=$("#logoMenu option:selected").attr("value");
    $("#theme_logos img").hide();//hide any other logo that is showing
    $("#theme_logos img[alt='"+alt+"']").show();//show selected logo
})

EDIT:- Test Code (CASE 2)

<div id="logos">
   <img src="flwrs_1.jpg" alt="1" height="32" width="32" style="display:none;" />
   <img src="flwrs_2.jpg" alt="2" height="32" width="32" style="display:none;" />
   <img src="flwrs_3.jpg" alt="3" height="32" width="32" style="display:none;" />
   <img src="flwrs_4.jpg" alt="4" height="32" width="32" style="display:none;" />
   <img src="flwrs_5.jpg" alt="5" height="32" width="32" style="display:none;" />
</div>
<select id="logo">
   <option id='1' value='1'>1</option>
   <option id='2' value='2'>2</option>
   <option id='3' value='3'>3</option>
   <option id='4' value='4'>4</option>
   <option id='5' value='5'>5</option>
</select>

<script type="text/javascript">
$(document).ready(function(){
     $("#logo").change(function(){
         var i=$("#logo option:selected").attr("value");
         $("div#logos img").hide();
         $("#logos img[alt='"+i+"']").show();
     });
});
</script>

Upvotes: 2

Related Questions