JSFiddle - React, Tailwind, and code Playground

by Bob Wilson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="saved_form"></div>
<div id="changed"></div>
<div id="showform"></div>

JavaScript

$(document).ready(function() {
   ShowForm();
   $("#saved_form").text("hello");
 
   var $form = $("form"),
   origForm = $form.serialize();
   $("#saved_form").text(origForm);
   
   $("form :input").on("change input", function() {
      $("#changed").text("A change was made");
   });
   
});

function ShowForm () {
  $.ajax({
     url: 'test',
     success: function(data) {
   
       $("#showform").html(`
       
        <form>
            <div>
                <textarea name="description" cols="30" rows="3"></textarea>
            </div>
            <div>Username: <input type="text" name="username" /></div>
             <div>
                Type: 
                <select name="type">
                    <option value="1">Option 1</option>
                    <option value="2" selected>Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </div>
            <div>
                Status: <input type="checkbox" name="status" value="1" /> 1
                <input type="checkbox" name="status" value="2" /> 2
            </div>
        </form>      
        `);
      }
  });
};
  
 var $form2 = $("form"),
 origForm2 = $form2.serialize();
 $("#saved_form").text(origForm2);
 $("form :input").on("change input", function() {
    $("#changed").text("A change was made");
 });