JSFiddle - React, Tailwind, and code Playground

by ainop

HTML

<form>
  <input type="text" value="foo"/><br/>
  <input type="text" value="bar"/><br/>
  <input type="text" value="baz"/><br/>
  <br/>
  <input type="submit"/>
  <input type="reset"/>
</form>

<ol>
  <li>Change input's values</li>
  <li>Push reset</li>
  <li>Observe the behavior: inputs should reset to <em>initial</em> values</li>  
</ol>

<ol>
  <li>Change input's values</li>
  <li>Push submit</li>
  <li>Change input's values again</li>
  <li>Push reset</li>
  <li>Observe the behavior: inputs should reset to <em>submitted</em> values</li>  
</ol>

CSS

body {
  font: normal 12px 'Arial', sans-serif;
}

JavaScript

$('form').submit(function (e) {
	e.preventDefault();
	$(this).find(':input[type=text]').each(function () {
    $el = $(this);
    $el.attr('value', $el.val());
  });
});