CodePen

HTML

            
              <form action="#" id="form">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1" />
  </div>

  <div>
    <h4>Radio Button Choice</h4>

    <label for="choice-1">Choice 1</label>
    <input type="radio" name="radio-choice-1" id="choice-1" tabindex="2" value="choice-1" />

    <label for="choice-2">Choice 2</label>
    <input type="radio" name="radio-choice-2" id="choice-2" tabindex="3" value="choice-2" />
  </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
    
  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>
   
  <div>
     <label for="checkbox">Checkbox:</label>
      <input type="checkbox" name="checkbox" id="checkbox" value="checkbox" />
  </div>

  <div>
    <input type="submit" value="Submit" onclick="send();" />
  </div>
</form> 

	<p><b>formData:</b></p>
	<div id="formData"></div>

	<p align="center"><b>HTML Output:</b></p>
	<div id="output"></div>

<p align="center"><b>HTML Load:</b></p>
	<div class="html-load"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  margin: 2em;
}

#output {
  width: 60%;
  padding: 1em;
  border: 1px solid gray;
  margin: 2em auto;
  color: gray;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $.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() {
		      // var formData = $('#form').serializeObject();
		  
		      //$('#name').attr("value", "test");
		      //$('#output').text(JSON.stringify($('#form').serializeObject()));
		      //send(formData, "form");
		      return false;
		    });
		});

		function send() {
		  var formData = $('#form').serializeObject();

		  var html = document.documentElement.outerHTML;
		  
		  var values = {
		  }
		  
		  var result = {
		    html: html
		  }

		  // var doc = document.implementation.createHTMLDocument(""); // works in Chrome, FF, IE
 			// doc.getElementsByTagName('html')[0].innerHTML = html;
		  
		  for (var key in formData) {
		    if (formData.hasOwnProperty(key)) {
		      if ($(document.getElementsByName(key)).attr("type") == "radio" || $(document.getElementsByName(key)).attr("type") == "checkbox") {
		      	if( $(document.getElementById(formData[key])).is(':checked') ) {
		      		$(document.getElementById(formData[key])).attr("checked",true);
		      	}
		      } else if ( $(document.getElementById(key)).is('select') ) {
		      	var options = $(document.getElementById(key)).find("option");
            $.each(options, function() {
              if ($(this).is(':selected')) {$(this).attr("selected",true);} else { $(this).removeAttr("selected"); }
            });
            
		      } else {
			      document.getElementById(key).defaultValue=formData[key];
			  }

		      //alert( key + ": " + doc.getElementById(key).value );
		    }
		  }

		  $('#formData').text(JSON.stringify(formData));
		  
		  $('#output').text( $('#form').html() );
      
      $('.html-load').html($('#form').html());

		  return false;
		}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................