conditionalScript

Simple native JavaScript ES6 script lets you conditionally show/hide Form elements or any other DOM elements by using custom HTML5 attributes. conditionalScript currently support checkboxes, radios and select lists.

This script does not requires jQuery though, it should work on any modern browser, If you have an issue/idea, please feel free to fork the repo or send me a push request and i'll be more than happy to push it.

github Github download-button Download paypal Donate

Usage:


1. Place the script before the closing Body tag for better page speed performance.

<script src="js/conditional-script.min.js"></script>

2. Create 2 divs with the same class name, you can name them whatever you like.

<div class="conditional-script">
    Main Markup here...
</div>
<div class="conditional-script">
    Conditional Markup here...
</div>

3. Add additional data-conditional-name and data-conditional-value attributes to your newly created (Conditional Markup). Please note that the data-conditional-name attribute will target the Field Name attribute, so you need to set the Name attribute to the field in order to work properly.

<div class="conditional-script">
    <input type="..." name="exampleName" value="main field value">
</div>
<div class="conditional-script">
    Conditional Markup .. data-conditional-name="exampleName" data-conditional-value="main field value"
</div>

Also, data-conditional-value accepts more than 1 value but they must be separated by comma and space (", ") for example:

data-conditional-value="value 1, value 3"

You final markup should look like this:

Radio input example:

<!-- Main Div - Radio buttons Bootstrap markup example -->
<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadioName" id="exampleRadio1" value="option1">
        <label class="form-check-label" for="exampleRadio1">yes</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadioName" id="exampleRadio2" value="option2">
        <label class="form-check-label" for="exampleRadio2">no</label>
    </div>
</div>
<!-- Conditional Div -->
<div class="form-group">
  <label for="formGroupExampleInput">Show on radio check with value Yes and hide if No</label>
  <input type="text" class="form-control" id="exampleRadio" data-conditional-name="exampleRadioName" data-conditional-value="option1">
</div>

Examples

All Examples build with Bootstrap 4 form style

Select List

Code

<!-- main field -->
<div class="form-group">
    <label for="exampleSelect">Example select, will show on value 2 or 4 selected</label>
    <select class="form-control" id="exampleSelect" name="exampleSelect">
        <option>value 1</option>
        <option>value 2</option>
        <option>value 3</option>
        <option>value 4</option>
    </select>
</div>
<!-- conditional Field -->
<div class="form-group">
    <label for="exampleSelect2">Value 2 or 4 is selected</label>
    <select class="form-control" id="exampleSelect2" data-conditional-name="exampleSelect" data-conditional-value="value 2, value 4">
        <option>new value 1</option>
        <option>new value 2</option>
        <option>new value 3</option>
    </select>
</div>

Checkbox

Code

<!-- main field -->
<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="optional" id="exampleCheck" name="exampleCheck">
        <label class="form-check-label" for="exampleCheck">
            Default checkbox will show if checked.
        </label>
    </div>
</div>
<!-- conditional Field -->
<div class="form-group">
  <label for="formGroupExampleInput">Show on check</label>
  <input type="text" class="form-control" id="exampleCheckbox" data-conditional-name="exampleCheck" data-conditional-value="optional">
</div>

Radio field

Will show if "Yes" checked

Code

<!-- main field -->
<div class="form-group">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="exampleRadioName" id="exampleRadio1" value="option1">
        <label class="form-check-label" for="exampleRadio1">yes</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="exampleRadioName" id="exampleRadio2" value="option2">
        <label class="form-check-label" for="exampleRadio2">no</label>
    </div>
</div>
<!-- conditional Field -->
<div class="form-group">
  <label for="exampleInput">Show on radio check with value Yes and hide if No</label>
  <input type="text" class="form-control" id="exampleRadio" data-conditional-name="exampleRadioName" data-conditional-value="option1">
</div>

Another example with multiple conditions:

Wonderful! We're so glad to hear that. Would you be willing to write a customer comment for our website?

Code

<!-- main field -->
<div class="form-group">
    <label class="control-label">
        How would you rate your experience with this script?
    </label>
    <div class="form-check">
        <input class="form-check-input" name="rating" type="radio" value="Bad"/>
        <label class="form-check-label">Bad</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="rating" type="radio" value="Fair"/>
        <label class="form-check-label">Fair</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="rating" type="radio" value="Good"/>
        <label class="form-check-label">Good</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="rating" type="radio" value="Excellent"/>
        <label class="form-check-label">Excellent</label>
    </div>
</div>
<!-- conditional Field -->
<div class="form-group">
    <label for="exampleFormControlTextarea1">Sorry to hear that. What went wrong?</label>
    <textarea class="form-control" id="Textarea1" rows="3" data-conditional-name="rating" data-conditional-value="Bad"></textarea>
</div>
<div class="form-group">
    <p class="control-label" for="testimonial">
        Wonderful!  We're so glad to hear that.  Would you be willing to write a customer comment for our website?
    </p>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="yes" />
        <label class="form-check-label">Sure!</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="no" /> 
        <label class="form-check-label">I'd rather not.</label>
    </div>
    <div data-conditional-name="rating" data-conditional-value="Excellent"></div>
</div>

Another example, you can show your custom HTML stracture

Hello I'm just a H3 Tag!

I'm a Paragraph

Code

<div class="form-group">
    <label class="control-label">
        What do you think is hiding?
    </label>
    <div class="form-check">
        <input class="form-check-input" name="custom" type="radio" value="show"/>
        <label class="form-check-label">Show</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" name="custom" type="radio" value="hide"/>
        <label class="form-check-label">Hide</label>
    </div>
</div>
<div class="form-group">
    <h3>Hello I'm just a H3 Tag!</h3>
    <p>I'm a Paragraph</p>
    <div data-conditional-name="custom" data-conditional-value="show"></div>
</div>

Switch button

If you like to have switch field style simply add the code below

Is this awesome?

Sure

HTML

<!-- switch field -->
<div class="form-group">
    <div class="switch-field">
        <p class="switch-title">Is this awesome?</p>
        <input type="radio" id="switch_left" name="exampleSwitch" value="yes"/>
        <label for="switch_left">Yes</label>
        <input type="radio" id="switch_right" name="exampleSwitch" value="no" checked/>
        <label for="switch_right">No</label>
    </div>
</div>
<div class="form-group">
    <p class="lead" data-conditional-name="exampleSwitch" data-conditional-value="yes">Sure</p>
</div>

CSS

/* switch field */
.switch-field {
  padding-right: 0;
  margin: 0;
  line-height: inherit;
}

.switch-field input {
  display: none;
}

.switch-field label {
  display: inline-block;
  float: left;
  background-color: #e4e4e4;
  padding: .25rem .75rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.1s ease-in-out;
  transition:         all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked + label {
  color: #fff;
  background-color: #0073aa;
}

.switch-field label:first-of-type {
  border-radius: .25rem 0 0 .25rem;
}

.switch-field label:last-of-type {
  border-radius: 0 .25rem .25rem 0;
}

.switch-field:after {
  content: "";
  display: table;
  clear: both;
}