CODEWITHSUNDEEP
javascriptjqueryhtml
XXDebugger
XXDebugger

Reputation: 1581

Display HTML on the basis of dropdown menu selected

I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.

<select id='menuHandler'>
     <option value='abc'> abc</option>
     <option value='xyz'>xyz</option>
</select>

IF the selected value is "abc" then a popup button is displayed with the following code:

<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
    <table   CELLPADDING="10" CELLSPACING="5" class='border'>
        <tr>
            <td colspan='3'>Run form Generation</td>
        </tr>
        <tr>
            <td width="200" class='border'>
                <span>Input Data</span><br>
                <input type="checkbox" name="vehicle" >Process log(s)<br>
                Summary data<br>
                <input type="checkbox" name="vehicle" >Thickness data<br>
                <input type="checkbox" name="vehicle" >Particle data
            </td>
            <td class='border'>
                <span>Steps(s)</span>
                <input type="checkbox" > 
                <input type="checkbox" > 
                <input type="checkbox" > 
            </td>
        </tr>
        <tr>
            <td>   Run form filename </td>
            <td><input type="text" ></td>
            <td><button class="editbtn">Generate</button></td>
        </tr>
    </table>
</div>

else if the value selected is "xyz" this should be displayed.

<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
    <input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active"  value="Generate"/>                                                    
</form>

how can I do it.

Upvotes: 1

Views: 1491

Answers (3)

atrifan
atrifan

Reputation: 172

From a high-level perspective:

  • Create a listener on the button and listen for a click
  • Dynamically get the value
  • Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)

Following these steps, you should be OK.

Upvotes: -1

Tom Faltesek
Tom Faltesek

Reputation: 2818

Try something like this.

$('#menuHandler').change(function(){
    var selectedValue = $(this).val();
    if(selectedValue === 'abc') { 
        $('#runFormPopup').show(); 
        $('#form_generate').hide();
    }
    else { 
        $('#runFormPopup').hide(); 
        $('#form_generate').show();
    }
});

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240908

Listen to the change event of the #menuHandler select element, and add the conditional logic there.

Example Here

$('#menuHandler').on('change', function () {
  if (this.value === "abc") {
    $('#runFormPopup, #runForm').show();
    $('#form_generate').hide();
  } else {
    $('#runFormPopup, #runForm').hide();
    $('#form_generate').show();
  }
});

..or a shorter version:

Example Here

$('#menuHandler').on('change', function () {
  var condition = this.value === "abc";

  $('#runFormPopup, #runForm').toggle(condition);
  $('#form_generate').toggle(!condition);
});

Upvotes: 3

Related Questions