Jump to content

HTML to JSON conversion


Recommended Posts

Hey Everyone! i want to convert my HTML form data to JSON and send that JSON to a PHP page on server. How can i do that. My HTML form is like this..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body id="top"><p>Enter Products</p><form id="form1" name="form1" method="post" action="create_product.php">  <p>Name	<input type="text" name="name" id="name" />  </p>  <p>Description	<input type="text" name="desc" id="desc" />  </p>  <p>Short Description	<input type="text" name="short_desc" id="short_desc" />  </p>  <p>Weight	<input type="text" name="weight" id="weight" />  </p>  <p>Price	<input type="text" name="price" id="price" />  </p>  <p>SKU	<input type="text" name="sku" id="sku" />  </p>  <p>Category	  <select id="userdata" name="category">	  <option>Choose</option>	  </select>	  </p>  <p>Promotion  <select name="promotion">  <option value="1">Yes</option>  <option value="0">No</option>  </select></p>   <p>			  <br> <label for="image"><span class="style1">Enter Image</span></label><br>			<input type="file" name="uploaded" id="uploaded" /> </br></br>			</p>  <p>Submit	<input type="submit" name="button" id="button" value="Submit" />  </p></form><p>*SKU must be unique</p></body></html>

Please help me..

Link to post
Share on other sites

I have been searching on internet, i found this code which converts the HTML form data to JSON. But the code is not working when i am implementing it. Can somebody tell what is wrong with it..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="scripts/jquery-1.5.2.js"></script><title>Untitled Document</title><script>$.fn.serializeObject = function(){	var o = {};	var a = this.serializeArray();	$.each(a, function() {		if (o[this.name] !== undefined) {			if (!o[this.name].push) {				o[this.name] = [o[this.name]];			}			o[this.name].push(this.value || '');		} else {			o[this.name] = this.value || '';		}	});	return o;};$(function() {	$('form').submit(function() {		$('#result').text(JSON.stringify($('form').serializeObject()));		return false;	});});​</script><style>form {	line-height: 2em;}p {	margin: 5px 0;}h2 {	margin: 10px 0;	font-size: 1.2em;	font-weight: bold}#result {	margin: 10px;	background: #eee;	padding: 10px;	height: 40px;	overflow: auto;}​</style></head><body><h2>Form</h2><form action="" method="post">First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>Gender:<br/>Male:<input type="radio" name="gender" value="Male"/><br/>Female:<input type="radio" name="gender" value="Female"/><br/>Favorite Food:<br/>Steak:<input type="checkbox" name="food[]" value="Steak"/><br/>Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/>Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/><textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>Select a Level of Education:<br/><select name="education"><option value="Jr.High">Jr.High</option><option value="HighSchool">HighSchool</option><option value="College">College</option></select><br/>Select your favorite time of day:<br/><select size="3" name="TofD"><option value="Morning">Morning</option><option value="Day">Day</option><option value="Night">Night</option></select><p><input type="submit" /></p></form><h2>JSON</h2><pre id="result"></pre>​</body></html>

Edited by aneeb
Link to post
Share on other sites
  • 2 weeks later...
I have been searching on internet, i found this code which converts the HTML form data to JSON. But the code is not working when i am implementing it. Can somebody tell what is wrong with it..
How is it not working? What problem are you experiencing with the implementation? Are you checking for errors? Added any debugging/console logging? Please be more specific. Edited by thescientist
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...