CODEWITHSUNDEEP
phpjavascriptdrop-down-menuconditional-statements
Anthony Miller
Anthony Miller

Reputation: 15930

PHP - if dropdown selection = something

How would I go about creating a conditional statement based on a dropdown list selection?

Lets say we have a dropdown list with entries:

Alpha
Bravo
Charlie
Other

I want to create a conditional statement where if Other is the currently selected entry from the dropdown, I want to echo a newline stating If Other, Please Specify. But if it isn't the currently selected entry, I don't want that string to populate.

Upvotes: 0

Views: 12103

Answers (2)

Jeffrey Blake
Jeffrey Blake

Reputation: 9709

As the comments have said, you need to do this in javascript. The following function should do it.

Include this javascript either inside a <script> element of the page, or inside your javascript file:

function checkSelect(selId, text, outputDiv) {
  var sel = document.getElementById(selId);
  var d = sel.options[sel.selectedIndex].text;
  if (d == text) {
    document.getElementById(outputDiv).innerHTML = "If Other, Please Specify";
  } else { 
    document.getElementById(outputDiv).innerHTML = "";
  }
}

Then adjust your HTML to run this function when the dropdown is changed:

<select id='Sel1' onchange='check("Sel1", "Other", "DivReqDetails");'>
  <option value='Alpha'>Alpha</option>
  <option value='Bravo'>Bravo</option>
  <option value='Charlie'>Charlie</option>
  <option value='Other'>Other</option>
</select>
<div id='DivReqDetails'></div>

Edit: If you have access to jQuery, you can make checkSelect() more powerful by doing more than just adjusting the contents of the div (as you can easily adjust CSS, for things like display:hidden; vs display:block; as well as colors. Here's an example of that, if you happen to have jQuery support.

I'm also adding a bit of improvement in letting you send the desired text to this function (so that you can have it check multiple fields and display different text accordingly):

function checkSelect(selId, text, outputDiv, outputText) {
  if ($("#"+selId).text() == text) {
    $("#"+outputDiv).html(outputText).css("display","block").css("color","red");
  } else { 
    $("#"+outputDiv).html("").css("display","none").css("color","black");
  }
}

Or, if you have several of these warnings to display in different parts of the form, you can change things based on the CSS class instead of the individual item. Note that this is going to change ALL the warning divs, so if you're looking for per-field feedback, this is not the way to go...

function checkSelect(selId, text, outputCssClass, outputText) {
  if ($("#"+selId).text() == text) {
    $("."+outputCssClass).html(outputText).css("display","block").css("color","red");
  } else { 
    $("."+outputCssClass).html("").css("display","none").css("color","black");
  }
}

Obviously, you can adjust what changes are made in either condition there. If you never have any reason to adjust the text that is displayed, then you should drop the .html() part completely. Similarly, if you only ever show this div when the color is red, drop that adjustment and just hardcode the style to be what you want. You can change any other css attributes about the related elements, by using similar calls to .css()

Upvotes: 3

Laurence Burke
Laurence Burke

Reputation: 2358

In PHP

<select id="conditions" name="conditions">
    <option></option>
<?php
foreach($option in $optionList){
    echo "<option value=$option ";
    if($_REQUEST["conditions"] == $option){
        echo  'selected="selected"';
    }
    echo " > $option </option>";
}
echo "</select>";

if($_REQUEST["conditions"] == "Other"){
    echo '<div id="specify" style="display:block">If Other, Please Specify</div>';
}else{
    echo '<div id="specify" style="display:hidden">If Other, Please Specify</div>';
}
?>

In jQuery for client side

<script>
    $('#conditions').change(function(){
        if($(this).val() == "Other"){
            $('#specify').show();
        }else{
            $('#specify').hide();
        }
    });
</script>

Upvotes: 5

Related Questions