JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<form id="view1">
        <legend>Sample Form</legend>
        <fieldset>
            <lable>Name <input id="name" value="testing" type="text" /></lable>
            <lable>Surname <input id="surname" value="surname" type="text" /></lable>
            <lable>Code <input id="code" type="text" /></lable>
            <lable>City <input id="city" type="text" /></lable>
            <lable>Native <input id="native" type="text" /></lable>
            <lable>Sex <input id="gender" value="male" type="radio" /> <input value="female" type="radio" /></lable>
            <select id="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </fieldset>
        <input type ="sbmit" value="submitForm" />
    </form>

<form id="view2">
        <legend>Sample Form</legend>
        <fieldset>
            <lable>Name <input id="name" value="I am form2" type="text" /></lable>
            <lable>Surname <input id="surname" value="surname" type="text" /></lable>
            <lable>Code <input id="code" type="text" /></lable>
            <lable>City <input id="city" type="text" /></lable>
            <lable>Native <input id="native" type="text" /></lable>
            <lable>Sex <input id="gender" value="male" type="radio" /> <input value="female" type="radio" /></lable>
            <select id="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </fieldset>
        <input type ="sbmit" value="submitForm" />
    </form>


<button id="unbindForm">Unbind All Listeners</button> <button id="bindForm">Bind All Listeners Again</button>

CSS

.highlight{
    border:1px solid red;
}

JavaScript

var testFunction = function (form) {
    $form = form,
    $name = $form.find('#name'),
    $code = $form.find('#code'),
    $city = $form.find('#city'),
    $native = $form.find('#native'),
    $gender = $form.find('#gender'),
    $select = $form.find('#select');
    
    $name.on('focus keydown input', function(e){
        console.log(e.target.value);
    });
    
    $select.on('change', function(e){
        console.log($(this).val());
    });
}

$('#unbindForm').on('click', function(){
    $('form *').off();
});



var viewController = {};
$('form').each(function(val, key){
    var currentView = $(key).prop('id');
    var form = $('#'+currentView);
    viewController[currentView] = viewController.currentView || new testFunction(form);

});

console.log(viewController);