jQuery toggleClass example

Toggle class name on click in jQuery

by sesubash

HTML

<div id="banner-message">
 <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>
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

// jsonToForm library
$.fn.jsonToForm=function(a,c){var l=this,n={data:a||null,callbacks:c};null!=n.data&&$.each(n.data,function(a,c){var e=$('[name="'+a+'"]',l);null!=n.callbacks&&n.callbacks.hasOwnProperty(a)?n.callbacks[a](c):(e.length||c.length)&&$(e).each(function(n,e){Array.isArray(c)?c.forEach(function(a){$(e).is("select")?$(e).find("[value='"+a+"']").prop("selected",!0):$(e).val()==a&&$(e).prop("checked",!0)}):$(e).is(":checkbox")||$(e).is(":radio")?$(e).val()==c&&$(e).prop("checked",!0):$('[name="'+a+'"]',l).val(c)})})};

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

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