How to get the selected option value of a drop down box in PHP code
- by Angeline Aarthi
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 If I select the logo 'Flower' from the drop down box, I want the flower pic 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 displaya all the pictures found in the table. Because im 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 as 'flower' so that I get the flower picture alone..
If I select the logo from the drop down box, how to pass that selected value to the controller code?
Or if I get the selected logo name thro' jquery,how to use that value in the if condition inside the for each loop?
someone help me out with this.. I'm using 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. I 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))));
}
But when I trry to display the img in the page,it doesn't appear. Is it because the div show command is after the ajax request?
