JQuery JSON Form Binding

!!! NE PLUS ENTRETIEN !!!

Je suis passé aux applications React/Vue. Impossible de maintenir ce projet plus longtemps. N'hésitez pas à bifurquer et à utiliser comme vous le souhaitez.

JQuery-JSON-Form-Fields

Un plugin léger pour lier les données JSON aux formulaires. Utile pour travailler avec AJAX et des formulaires avec un grand nombre de champs.

Installation

npm i jquery-json-form-binding

ou lien 'jquery-json-form-binding.js' depuis le dossier src

Usage

C'est assez simple à utiliser. Créez un formulaire et appelez la fonction jsonToForm dessus en transmettant les données json et votre rappel en tant qu'options.

Un formulaire simple :

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

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

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

	</form>

Appelez maintenant jsonToForm avec l'objet JSON.

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

Un formulaire à sélection multiple :

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

Appelez maintenant jsonToForm avec l'objet JSON.

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

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

Démo pour sélection multiple.

Si vous avez un formulaire complexe. Vous pouvez utiliser des fonctions de rappel de passe pour chaque clé de données que vous avez dans votre objet de données, comme ceci :

 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);
		}
	});

Les suggestions et contributions seront appréciées.