form.html

  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>

<form id="theform">
    <label>
        Text input
        <input type="text" name="textinput">
    </label>
    <label>
        Select list
        <select name="selectlist">
            <option>1</option>
            <option>2</option>
        </select>
    </label>
    <label>
        Radio
        <input type="radio" name="radioinput" value="1">
    </label>
    <label>
        Other radio
        <input type="radio" name="radioinput" value="2">
    </label>
    <label>
        Checkbox
        <input type="checkbox" name="checkboxinput" value="3">
    </label>

    <fieldset name="userinfo">
        <legend>User information</legend>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" size="40">
        <label for="address">Address</label>
        <input type="text" name="address" id="address" size="40">
        <label for="phone">Phone</label>
        <input type="text" name="phone" id="phone" size="40">
    </fieldset>

</form>

<script src="../js/jquery.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>

<script>
    $(function () {
        var form = new QfqNS.Form("theform");
        form.addChangeHandler(function (form) {
            console.log("form changed");
        });
    });
</script>

</body>
</html>