JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">
<div class="content">
<form id="form" onsubmit="return false;">
<div class="container">
<label class="label">Name</label>
<p class="control">
  <input name="name" class="input" type="text" placeholder="Text input">
</p>
<label class="label">Message</label>
<p class="control">
  <textarea name="message" class="textarea" placeholder="Textarea"></textarea>
</p>
<p class="control">
  <label class="checkbox">
    <input type="checkbox" name="remember">
    Remember me
  </label>
</p>
<p class="control">
  <label class="radio">
    <input type="radio" name="question">
    Yes
  </label>
  <label class="radio">
    <input type="radio" name="question">
    No
  </label>
</p>

<pre class="control" id="console"></pre>

<p class="control">
  <button class="button is-primary" id="submit">Submit</button>
  <button class="button is-link" id="cancel">Cancel</button>
</p>
</div>
</form>
</div>

CSS

.content {
  padding: 10px;
}

JavaScript

(function() {

document.getElementById("submit").addEventListener("click", function(){
    Service.save('#form', ['name', 'message', 'remember', 'question'], '#console');
});

document.getElementById("cancel").addEventListener("click", function(){
    Service.cancel('#form', '#console');
});

const Service = {
	
  /**
   * @param form
   * @param attributes
   * @param console
   */
	save(form, attributes, console)  {
  
    const $form = $(form);
    const data = {};
    attributes.forEach(function(attribute) {
    	data[attribute] = $form.find('[name="' + attribute + '"]').val();
    });
    //https://gist.github.com/wilcorrea/0afae957c92f4c49beeef2e46481f73a
    $.ajax({
    	method: 'POST',
      url: 'https://safeto-work.umbler.net/',
      data: data
    }).done(function(response) {
      if (console) {
      	$(console).html(response);
      }
    });
  },
  /**
   * @param form
   * @param console
   */
  cancel(form, console) {
  
  	const $form = $(form)[0];
    if ($form) {
    	$form.reset();
    }
    if (console) {
      	$(console).html('');
    }
  }
}

})();