JSFiddle - React, Tailwind, and code Playground

by wtkd

HTML

<div id="container">
</div>

CSS

form {
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #CCC;
}

.send-btn {
  display: none;  
}

input { 
  display: block;
  margin: 10px auto 0 auto;
}

button {
  float: left;
  margin: 10px 0 0 15px;
}

JavaScript

//Declarations
var container = document.getElementById('container');
var form = document.createElement('form');
var submitBtn = document.createElement('button');
var textField = document.createElement('input');
var numberField = document.createElement('input');
var anotherBtn = document.createElement('button');


//Events
var submitEvent = new Event('submit');
var triggerEvent = new Event('click');

//Configuration
textField.type = "text";
textField.classList.add('required');

numberField.type = "number";
numberField.classList.add('required');

anotherBtn.type = "button";
anotherBtn.textContent = "triggerBtn";
anotherBtn.classList.add('trigger');

submitBtn.type = "submit";
submitBtn.textContent = "Send!";
submitBtn.classList.add('send-btn');

submitBtn.addEventListener('click', function () {
  form.dispatchEvent(submitEvent);
});

anotherBtn.addEventListener('click', function () {
	submitBtn.dispatchEvent(triggerEvent);
});

numberField.setAttribute("required", "");
textField.setAttribute('required', '');


//Build
form.appendChild(textField);
form.appendChild(numberField);
form.appendChild(submitBtn);
form.appendChild(anotherBtn);
container.appendChild(form);

//Listeners
form.addEventListener('submit', function () {
  console.log('submit: ', this, arguments);
});

console.log('this', this);
console.log('this.form', form);