fambo fambo - 6 days ago 5
HTML Question

Hide show text fields based on multiple select menu

I'm trying to show hide text fields depending on a particular combination of select values chosen from two select menus.

I cant seem to get the xpath text field to reveal IF Source = "XML Response body" and Assertion Type = "XML path match"

Here is my code:

<body>
<div class="container">
<form>
<div class="clearfix">
<label for="program">Source</label>
<select id="trigger" name="program" class="x-large">
<option value="">(select)</option>
<option value="1">RAW Response</option>
<option value="2">XML response body</option>
</select>
</div>
<div class="clearfix">
<label for="issuer">Assertion Type</label>
<select id="issuer" class="xlarge switchable" name="issuer">
<option value="containsString" class="issuer_1">Contains string</option>
<option value="httpsStatusCode" class="issuer_1">HTTP status code</option>
<option value="containsString" class="issuer_2">Contains string</option>
<option value="xpathResponse" class="issuer_2">XML path match</option>
</select>
</div>


<div id='assertionDescription'>Assertion Description<br/>&nbsp;
<br/>&nbsp;
<input type='text' class='text' name='assertionDescription' value size='20' />
<br/>
</div>
<div id='expectedResult'>Expected Result<br/>&nbsp;
<br/>&nbsp;
<input type='text' class='text' name='expectedResult' size='20' />
<br/>
</div>
<div style='display:none;' id='xpath'>Xpath<br/>&nbsp;
<br/>&nbsp;
<input type='text' class='text' name='xpath' size='20' />
<br/>
</div>
<div style='display:none;' id='jsonPath'>JSON Path<br/>&nbsp;
<br/>&nbsp;
<input type='text' class='text' name='jsonPath' size='20' />
<br/>
</div>
</form>
</div>

</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("#trigger").change(function () {
if ($j(this).data('options') == undefined) {
$j(this).data('options', $j('select.switchable option').clone());
}
var id = $j(this).val();
var that = this;
$j("select.switchable").each(function () {
var thisname = $j(this).attr('name');
var theseoptions = $j(that).data('options').filter('.' + thisname + '_' + id);
$j(this).html(theseoptions);
});
});
//then fire it off once to display the correct elements
$j('#trigger').trigger('change');
});
</script>

<script>
$(document).ready(function(){
$('#issuer').on('change', function() {
if ( this.value == 'xpathResponse')
//.....................^.......
{
$("#xpath").show();

}

else
{
$("#xpath").hide();


}
});
});
</script>

Answer

Try this fiddle based on your code,

https://jsfiddle.net/2u38koq8/1/

    <body>
      <div class="container">
        <form>
          <div class="clearfix">
            <label for="program">Source</label>
            <select id="trigger" name="program" class="x-large">
              <option value="">(select)</option>
              <option value="1">RAW Response</option>
              <option value="2">XML response body</option>
            </select>
          </div>
          <div class="clearfix">
            <label for="issuer">Assertion Type</label>
            <select id="issuer" class="xlarge switchable" name="issuer">
              <option value="containsString" class="issuer_1">Contains string</option>
              <option value="httpsStatusCode" class="issuer_1">HTTP status code</option>
              <option value="containsString" class="issuer_2">Contains string</option>
              <option value="xpathResponse" class="issuer_2">XML path match</option>
            </select>
          </div>


          <div id='assertionDescription'>Assertion Description
            <br/>&nbsp;
            <br/>&nbsp;
            <input type='text' class='text' name='assertionDescription' value size='20' />
            <br/>
          </div>
          <div id='expectedResult'>Expected Result
            <br/>&nbsp;
            <br/>&nbsp;
            <input type='text' class='text' name='expectedResult' size='20' />
            <br/>
          </div>
          <div style='display:none;' id='xpath'>Xpath
            <br/>&nbsp;
            <br/>&nbsp;
            <input type='text' class='text' name='xpath' size='20' />
            <br/>
          </div>
          <div style='display:none;' id='jsonPath'>JSON Path
            <br/>&nbsp;
            <br/>&nbsp;
            <input type='text' class='text' name='jsonPath' size='20' />
            <br/>
          </div>
        </form>
      </div>
    </body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
      <script>
        $(document).ready(function() {
          $(document).on('change', 'select#issuer', function() {
            if ($(this).val() == 'xpathResponse')
            //.....................^.......
            {

              $("#xpath").show();

            } else {
              $("#xpath").hide();
            }
          });

          $("select#trigger").change(function() {

            if ($(this).data('options') == undefined) {
              $(this).data('options', $('select.switchable option').clone());
            }
            var id = $(this).val();
            var _this = this;
            $("select.switchable").each(function() {
              var thisname = $(this).attr('name');
              var theseoptions = $(_this).data('options').filter('.' + thisname + '_' + id);

              $(this).html(theseoptions);
            });
          });
          //then fire it off once to display the correct elements
          $('select#trigger').trigger('change');
        });

      </script>
Comments