Using javascript within php in order to make a selectbox visible

Question

I am using php and want my selected selectbox to become visible based on which one I select. My html code is

<form name="frmIndex" action="index.php" method="post">
    <select name="ddlSelections">
        <option value="1">Tickets</option>
        <option value="2">Projects</option>
        <option value="3">Sales</option>
    </select>
    <input type="submit" value="Select" name="btnSubmit"/><br/>
    <select name="ddlTickets" style="display:none">
        <option value="1">Open Tickets</option>
        <option value="2">Waiting for Client</option>
        <option value="3">Overdue</option>
        <option value="4">Average Age</option>
    </select>
    <select name="ddlProjects" style="display:none">
        <option value="1">Ready to Bill</option>
        <option value="2">Over Budget</option>
        <option value="3">Overdue</option>
        <option value="4">Assigned per PM</option>
    </select>
    <select name="ddlSales" style="display:none">
        <option value="1">Leads last 7/30/90</option>
        <option value="2">Open</option>
        <option value="3">Expected Value (30 days)</option>
        <option value="4">Overdue</option>
    </select>
    <input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

And my php code so far is

 <?php

    if(isset($_POST["btnSubmit"])) 
    {
        $selection = $_POST["ddlSelections"];   

        if ($selection == 1) {

        }
        else if ($selection == 2) {

        }
        else {

        }
    }

?>

so my question is what would the javascript look like inside of the if/else statement to make the selectboxes visible?

php cannot do this. it runs on the server. unless you do a full page reload every time you change a selection, php can do NOTHING to affect the page. this is purely javascript, and PHP is not involved in any way. — Marc B
– Marc B, Commented Jun 9, 2016 at 16:49
@MarcB I think they do intend for a full page reload, so it can be done in PHP, although it's already been pointed out that JS is better suited to the end goal — Jeff Puckett
– Jeff Puckett, Commented Jun 9, 2016 at 16:51
I was asking how to do it with javascript within the PHP framework that I am already using. — DennisOakdale
– DennisOakdale, Commented Jun 10, 2016 at 12:51

Moussa Khalil · Accepted Answer · 2016-06-09 16:59:23Z

Why not do it client side using javascript?

    <form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections" id="ddlSelections" onChange="changeSelect()"> <!-- call function on change -->
    <option value="1">Tickets</option>
    <option value="2">Projects</option>
    <option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets"  id="ddlTickets"> <!-- visible by default -->
    <option value="1">Open Tickets</option>
    <option value="2">Waiting for Client</option>
    <option value="3">Overdue</option>
    <option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none" id="ddlProjects">
    <option value="1">Ready to Bill</option>
    <option value="2">Over Budget</option>
    <option value="3">Overdue</option>
    <option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none" id="ddlSales">
    <option value="1">Leads last 7/30/90</option>
    <option value="2">Open</option>
    <option value="3">Expected Value (30 days)</option>
    <option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

javascript

<script>
function changeSelect()
{
document.getElementById('ddlTickets').style.display = "none";
document.getElementById('ddlProjects').style.display = "none";
document.getElementById('ddlSales').style.display = "none";
switch(document.getElementById('ddlSelections').value) // Get selected one
{
    case "1":
    document.getElementById('ddlTickets').style.display = "block";
    break;
    case "2":
    document.getElementById('ddlProjects').style.display = "block";
    break;
    case "3":
    document.getElementById('ddlSales').style.display = "block";
    break;

}
}
</script>

If you must use PHP

<form name="frmIndex" action="index.php" method="post">


 <?php

if(isset($_POST["btnSubmit"])) 
{
    $selection = $_POST["ddlSelections"];   

    if ($selection == 1) {
        /* echo these
  <select name="ddlSelections" id="ddlSelections" >
<option value="1" selected>Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
   </select>   <input type="submit" value="Select" name="btnSubmit"/><br/>
          <select name="ddlTickets" style="display:none">
    <option value="1">Open Tickets</option>
    <option value="2">Waiting for Client</option>
    <option value="3">Overdue</option>
    <option value="4">Average Age</option>
    </select>
      */
      }
       else if ($selection == 2) {
           /* echo these
   <select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" selected>Projects</option>
<option value="3">Sales</option>
   </select>   <input type="submit" value="Select" name="btnSubmit"/><br/>
         <select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
    */
      }
     else {
    /* echo these
         <select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" >Projects</option>
<option value="3" selected>Sales</option>
   </select>   <input type="submit" value="Select" name="btnSubmit"/><br/>
          <select name="ddlSales" style="display:none">
    <option value="1">Leads last 7/30/90</option>
    <option value="2">Open</option>
    <option value="3">Expected Value (30 days)</option>
    <option value="4">Overdue</option>
</select>
    */
    }
}

?>


<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

Jeff Puckett · Accepted Answer · 2016-06-09 17:17:10Z

A slightly shorter example using jQuery's .change() which is more unobtrusive than the on* attributes like onclick, onchange, etc.

replace all the style="display:none" with a class="subDDL" and then simply style with .subDDL{display: none;}. I did leave one style="display:initial" for the default option.

then add an id to your sublists that correspond to the values in ddlSelections

now you only need one submit button

$("[name='ddlSelections']").change(function(){
  $(".subDDL").hide();
  $('#' + $("[name='ddlSelections'] option:selected").val()).show();
});

.subDDL{
  display: none;
}

<script   src="http://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<form name="frmIndex" action="index.php" method="post">
    <select name="ddlSelections">
        <option value="1">Tickets</option>
        <option value="2">Projects</option>
        <option value="3">Sales</option>
    </select>
    <select id="1" name="ddlTickets" class="subDDL" style="display:initial">
        <option value="1">Open Tickets</option>
        <option value="2">Waiting for Client</option>
        <option value="3">Overdue</option>
        <option value="4">Average Age</option>
    </select>
    <select id="2" name="ddlProjects" class="subDDL">
        <option value="1">Ready to Bill</option>
        <option value="2">Over Budget</option>
        <option value="3">Overdue</option>
        <option value="4">Assigned per PM</option>
    </select>
    <select id="3" name="ddlSales" class="subDDL">
        <option value="1">Leads last 7/30/90</option>
        <option value="2">Open</option>
        <option value="3">Expected Value (30 days)</option>
        <option value="4">Overdue</option>
    </select>
    <input type="submit" value="Submit" name="btnChoose" />
</form>

Collectives™ on Stack Overflow

Using javascript within php in order to make a selectbox visible

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related