https://github.com/awran5/conditional-script
Native JavaScript ES6 script lets you conditionally show/hide DOM elements based on user input
https://github.com/awran5/conditional-script
conditional es6 form javascript
Last synced: about 2 months ago
JSON representation
Native JavaScript ES6 script lets you conditionally show/hide DOM elements based on user input
- Host: GitHub
- URL: https://github.com/awran5/conditional-script
- Owner: awran5
- License: mit
- Created: 2018-04-16T18:55:15.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-12-23T08:47:18.000Z (over 5 years ago)
- Last Synced: 2024-10-12T10:09:48.934Z (7 months ago)
- Topics: conditional, es6, form, javascript
- Language: JavaScript
- Homepage: https://awran5.github.io/conditional-script/
- Size: 122 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# conditionalScript
conditionalScript is a simple native JavaScript ES6 script which lets you conditionally show/hide Form or any other elements by using custom HTML5 attributes. conditionalScript currently works with 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.
### [Demo & Examples](https://awran5.github.io/conditional-script/)
# Usage
1. Place the script before the closing Body tag for better page speed performance.
```html
```
2. Create 2 **divs** with the same class name, you can name them whatever you like.
```html
Main Markup here...
Conditional Markup here...
```
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.
```html
Conditional Markup .. data-conditional-name="exampleName" data-conditional-value="main field value"
```
Also, `data-conditional-value` accepts more than 1 value but they must be separated by **comma** followed by **space** (", ") for example:
```php
data-conditional-value="value 1, value 3"
```
## You final markup should look like this:
```html
yes
no
Show on radio check with value Yes and hide if No
```