JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<form id="systemform">
  <fieldset id="formtype_1" class="">
    <legend id="test">Form Type</legend>
    <div id="formtype_1_h" class="wrapper">
      <p>
        <label for="formaction">Action</label>
        <select id="formaction" name="formaction" class="select">
          <option value="">- select -</option>
          <option value="/form">Spring Form</option>
          <option value="/eway">Eway</option>
          <option value="https://www.paypal.com/cgi-bin/webscr">Paypal</option>
          <option value="https://scholarship.acer.edu.au/programPage.php">ACER</option>
          <option value="https://vault.safepay.com.au/cgi-bin/make_payment.pl">DirectOne</option>
          <option value="other" data-trigger="action-other">Other...</option>
        </select>
      </p>
      <p>
        <input id="checkbox" name="checkbox" type="checkbox"
        class="checkbox" value="checkbox" data-trigger="action-other2"/>
      </p>
      <p data-toggle="action-other" class="toggle none">
        <label for="formactionother">Other</label>
        <input id="text" name="text" type="text"
        class="text" value="" /><br/>
        <input id="checkbox" name="checkbox" type="checkbox"
        class="checkbox" value="checkbox" /><br/>
        <textarea name="textarea"></textarea><br/>
        <select name="select">
          <option value="1">A</option>
          <option value="2">B</option>
        </select>
      </p>
      <p data-toggle="action-other2" class="toggle none">
        <label for="formactionother">Other</label>
        <input id="text" name="text" type="text"
        class="text" value="" /><br/>
        <input id="checkbox" name="checkbox" type="checkbox"
        class="checkbox" value="checkbox" /><br/>
        <textarea name="textarea"></textarea><br/>
        <select name="select">
          <option value="1">A</option>
          <option value="2">B</option>
        </select>
      </p>
    </div>
  </fieldset>
</form>

CSS

.none {
  display: none;
}

JavaScript

$(document).ready(function () {

  var previoustrigger;
  $('select').focus(function () {
    // Store the current value on focus, before it changes
    previoustrigger = $(this).find(':selected').attr('data-trigger');
    $('#test').text('previoustrigger: ' + previoustrigger);
  }).live('change', function () {
    var form = $(this).closest('form').attr('id');
    var trigger = $(this).find(":selected").attr('data-trigger');
    if (previoustrigger) {
      //if we had a previous data-trigger then hide and reset those items
      formToggles('hide', previoustrigger, form);
    }
    if (trigger) {
      //show triggered element
      formToggles('show', trigger, form);
    }
    //lets update the previous trigger in case a second choice is made.
    previoustrigger = $(this).find(':selected').attr('data-trigger'); 
  });
  $(':checkbox').click(function () {
    var form = $(this).closest('form').attr('id');
    var trigger = $(this).attr('data-trigger');
    if ($(this).is(':checked') && trigger) {
      formToggles('show', trigger, form);
    } else if (trigger) {
      formToggles('hide', trigger, form);
    }
  });
  function formToggles(state, trigger, form) {
    if (state == 'hide') {
      $('#' + form).find('[data-toggle="' + trigger + '"]').addClass('none');
      resetForm($('*[data-toggle="' + trigger + '"]'));
    }
    if (state == 'show') {
      $('#' + form).find('[data-toggle="' + trigger + '"]').removeClass('none');
    }
  }
  function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
  }

});