JSFiddle - React, Tailwind, and code Playground

by Dörnesz Tamás

HTML

<!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" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>
</head>
<body>
  <div id="test">
    <input type="text" value="text text" name="text"> <br> 
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <br />
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select>
    <br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>
    <label for="ch1">check1</label>
  
    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
    <label for="ch2">check2</label>
    <br />
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>
    <label for="r2">radio2</label>
    <br>
    <textarea name="textarea">textarea text</textarea>
    <br>
    <input type="password" name="password" value="secret">
    <br>
    <input type="button" value="i'm a button don't serialize me dude">
    <br> 
    <p>some random &lt;p> tag which is not serialized</p> 
  </div>
<input type="button" id="clickme" value="Serialize div" />
<p id="hold" style="border: 1px solid red">I will hold the serialized div</p>
</body>
</html>

JavaScript

$('#clickme').click(function () {
  $('#sketch').html($('#form').find('select,textarea, input').serialize());
});