CODEWITHSUNDEEP
javascripthtml
James
James

Reputation: 65

Showing another hidden div based on JS if statement for select form

I'm having issues with getting the below code to work... What I want to happen is so that when the user selects a specific option under the select tag the smalljobsite div will be shown. Any help is appreciated.

Here is my JS:

<script type="text/javascript">
<!--Start of displaying Small Jobsite form if 1-3 staff has been selected-->
function showSmallJobsite(small){
if(small.value == 3)
  document.getElementById('smalljobsite').style.display = "block";
<!--End of displaying Small Jobsite form if 1-3 staff has been selected-->
</script>

Here is my HTML:

<div class="fieldcontainer">
<label>Number of users on site:</label>
<select id="numberofstaff" onchange="showSmallJobsite(this)">
    <option value="0">--Select--</option>
    <option id="staffnumberthree" value="3">1-3</option>
    <option id="staffnumberseven" value="7">4-7</option>
    <option id="staffnumbereight" value="8">8+</option>
</select>
<br>
<br>
</div>
<!--This is the start of the Small Jobsite section of the form-->
<div id="smalljobsite" style="display:none;">
<div class="fieldcontainer">
    <label>Plan Table?:</label>
        <select name="plan_table" required>
            <option>--Select--</option>
            <option>Yes</option>
            <option>No</option>
        <select>
</div>
<br><br>
<div class="fieldcontainer">
    <label>E-mail:</label>
        <select name="dslcablesmall" required>
            <option>--Select--</option>
            <option>DSL/Cable</option>
            <option>LTE Only</option>
        </select>
</div>
</div>

I'm going to guess I'm missing something very simple, as is usual... but I'm coming to you all as a last resort at this point. Thanks!

Upvotes: 0

Views: 38

Answers (1)

Arthur
Arthur

Reputation: 5148

First, comment on JS are // and not <!-- -->.

Second, your function have not closing bracket }.

<script type="text/javascript">
  // Start of displaying Small Jobsite form if 1-3 staff has been selected
  function showSmallJobsite(small){
    if(small.value == 3)
     document.getElementById('smalljobsite').style.display = "block";
  }
  // End of displaying Small Jobsite form if 1-3 staff has been selected
</script>

Third, You have to do an else statement, to hide if something else are selected. Example : I select 3, the item are displayed. And next, I select 2 nothing append (must be hidden)

Upvotes: 1

Related Questions