JSFiddle - React, Tailwind, and code Playground

by Max

HTML

<form id="my_form" method="post" name="form" >
    Инпут1: <input type="text" value="" name="inp1"/><br/>
    Инпут2: <input type="text" value="" name="inp2"/><br/>
    Инпут3: <input type="text" value="" name="inp3"/><br/>
    Селект: <select name="sel1">
        <option value="1">Один</option>
        <option value="2">Два</option>
        <option value="3">Три</option>
    </select><br/>
    Checkbox1<input type="checkbox" checked="checked" value="1" name="chbx1"/>
    Checkbox2<input type="checkbox" name="chbx2"/><br/>
    Checkbox1<input type="radio" value="1" name="r1"/>
    Checkbox2<input type="radio" value="2" name="r1" checked="checked"/><br/>
    <textarea name="txt">text</textarea>
    <input type="submit" id="s_btn" value="subm"/>
</form>
<div id="result"></div>

JavaScript

/**контроль за формой
 *
 */
(function($) {
	var methods = {
		/**
		 *initialization
		 * @param {Object} options
		 * @returns {jQuery}
		 */
		init: function(options) {
			var settings = $.extend({
				insertInForm: 1,
				inputName: 'changed_state',
				exclude: [],
				ifChanged: function() {
					return true;
				}
			}, options);

			this.state_form('init_state', settings);

			return this;
		},
		/**
		 * initialization first states
		 * @param {Object} settings
		 */
		init_state: function(settings) {
			this.each(function() {
				var $this = $(this);
				$this.submit($this.state_form('onSubmit', settings));
				$this.data({
					settings: settings
				});

				$('input,select,textarea', $this).not('[type="button"],[type="submit"]').each(function() {
					var $$this = $(this);

					var tmp = {
						state: {
							element_name: null,
							first_val: null,
							raw_text_first: null,
							curent_val: null,
							raw_text_last: null,
							selected: false
						}
					};

					switch(this.tagName)
					{
						case 'INPUT':
							if(this.type == 'checkbox' || this.type == 'radio')
							{
								if(void 0 !== $$this.attr('value'))
								{
									if(this.type != 'radio')
									{
										if($$this.is(':checked'))
										{
											tmp.state.first_val = $$this.val();
										}
									}
									else
									{
										if($$this.is(':checked'))
										{
											tmp.state.selected = true;
										}
										tmp.state.first_val = $$this.val();
									}
								}
								else
								{
									tmp.state.first_val = $$this.is(':checked');
								}
							}
							else if (void 0 === $$this.attr('value'))
							{
								window.console.debug('Внимание: у элемента нет атрибута value! (WARNING: element has no attr value!)');
								window.console.debug(this);
							}
							else
							{
								tmp.state.first_val = $$this.val();
							}

							break;
						case 'TEXTAREA':
							tmp.state.first_val =...