Rellene los campos de formulario de JSON-populatejs

Tiempo de ejecución: 30 minutos. Empezar

Autor: dastagirkhan
Views Total: 454
Sitio oficial: Ir a la web
Actualizado: September 23, 2018
Licencia: MIT

Vista prévia

Rellene los campos de formulario de JSON-populatejs

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>&nbsp;



<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'

});
})();

Te puede interesar: