JQuery JSON Form Binding

!!! ¡¡¡YA NO MANTIENE !!!

Me mudé a las aplicaciones React/Vue. Ya no se puede mantener este proyecto. Siéntete libre de bifurcarlo y usarlo como quieras.

Campos de formulario JQuery-JSON

Un complemento liviano para vincular datos JSON a formularios. Útil para trabajar con AJAX y formularios con gran cantidad de campos.

Instalación

npm i jquery-json-form-binding

o enlace 'jquery-json-form-binding.js' desde la carpeta src

Uso

Es bastante sencillo de utilizar. Cree un formulario y llame a la función jsonToForm pasando datos json y su devolución de llamada como opciones.

Una forma sencilla:

	<form id="myform">
		
		<input type="" name="name">

		<input type="" name="age">

		<input type="" name="gender">

	</form>

Ahora llame a jsonToForm con el objeto JSON.

	var data = {name: "Waleed", age: 23, gender: "Male"};
	$("#myform").jsonToForm(data);

Un formulario con selección múltiple:

	<form id="myform">
		<div class="form-field">
			<h5>
				Text Input
			</h5>
			<input type="" name="name">
		</div>

		<div class="form-field">
			<h5>
				Single Select
			</h5>
			<select name="country">
				<option value="usa">USA</option>
				<option value="uk">UK</option>
				<option value="germany">Germany</option>
			</select>
		</div>

		<div class="form-field">
			<h5>
				Multiple Select
			</h5>
			<select multiple name="skill">
				<option value="html">html</option>
				<option value="css">css</option>
				<option value="javascript">javascript</option>
				<option value="node">node</option>
			</select>
		</div>

		<div class="form-field">
			<h5>
				checkbox example
			</h5>
			<label>
				<input type="checkbox" value="english" name="language" />English</label>
			<label>
				<input type="checkbox" value="french" name="language" />French</label>
			<label>
				<input type="checkbox" value="german" name="language" />German</label>
		</div>


		<div class="form-field">
			<h5>
				Radio example
			</h5>
			<label>
				<input type="radio" value="male" name="sex" />Male</label>
			<label>
				<input type="radio" value="female" name="sex" />Female</label>
		</div>
	</form>

Ahora llame a jsonToForm con el objeto JSON.

	var json = {
		name: "Waleed",
		country: "uk",
		skill: ["html", "javascript"],
		language: ["english", "german"],
		sex: "female"
	};

	$("#myform").jsonToForm(json);
	
	console.log($("#myform").serialize());

Demostración para selección múltiple.

Si tienes una forma compleja. Puede usar funciones de devolución de llamada para cada clave de datos que tenga en su objeto de datos de esta manera:

 var data = {name: "Waleed", age: 23, gender: "Male"};
	$("#myform").jsonToForm(data, {
		// change the way age value will be set in the form
		age: function(value){
				$('[name="age"]').val(value+1);
		}
	});

Se agradecerán sugerencias y contribuciones.