Rellene los campos de formulario de JSON-populatejs
| Autor: | dastagirkhan |
|---|---|
| Views Total: | 454 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 23, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
populatejs es un plugin de JavaScript puro para la creación de formularios dinámicos que rellena los campos de formulario existentes a partir de un objeto JSON.
Funcionamiento
Asegúrese de que los campos de formulario tienen valores de de nombre únicos.
<form action=""> <fieldset> <legend>PopulateJS</legend> <label class="form-label" for="last_name">Last name</label> <input type="text" name="last_name" id="last_name"> <br> <legend>Feature</legend> <label for="horns">Horns</label> <input type="checkbox" id="horns" name="feature" value="horns" /> <br> <label for="claws">Claws</label> <input type="checkbox" id="claws" name="feature" value="claws" /> <br> <label for="scales">Scales</label> <input type="checkbox" id="scales" name="feature" value="scales" /> <br> <legend>Sex</legend> <label for="male">Male</label> <input type="radio" id="male" name="sex" value="male" /> <label for="female">Female</label> <input type="radio" id="female" name="sex" value="female" /> <br> <legend>Choose a pet:</legend> <br> <select id="pet-select" name="pet-select"> <option value="">--Please choose an option--</option> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="parrot">Parrot</option> <option value="spider">Spider</option> <option value="goldfish">Goldfish</option> </select> <br> <br> <legend>Choose multiple pets:</legend> <br> <select id="pet-select-multiple" name="pet-select-multiple" multiple size="10"> <option value="none">-- Please choose one or more --</option> <optgroup label="4-legged pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> </optgroup> <optgroup label="Flying pets"> <option value="parrot">Parrot</option> <option value="macaw">Macaw</option> <option value="albatross">Albatross</option> </optgroup> </select> </fieldset> </form>
Descargue e inserte el archivo JavaScript populatejs. min. js en la página.
<script src="populatejs.min.js"></script>
Inicializar los populatejs y definir un objeto JSON que contiene pares clave-valor donde las claves son los nombres del elemento de formulario.
(function () {
populatejs({
'last_name': 'wikicss',
'feature': 'claws,scales',
'sex': 'male',
'pet-select': 'cat',
'pet-select-multiple': 'dog,macaw'
});
})();





