JSFiddle - React, Tailwind, and code Playground

by stwilz

HTML

<html>
<head>
  <meta charset="UTF-8">
  <title>Sexy Form</title>
</head>
<body>
  <h1>Your awesome form</h1>
  <textarea name="one" id="" cols="30" rows="10"></textarea>
  <textarea name="two" id="" cols="30" rows="10"></textarea>
  <button onClick="submit()">Submit</button>
</body>
</html>

JavaScript

// convert all textareas into key value pairs
    const createPayload = () => {
      return [].slice.call(document.querySelectorAll('textarea')).reduce((collection, textarea) => ({
      ...collection,
      [textarea.name]: textarea.value
      }), {})
    }

    // Compare Object values against values that are not falsy
    const objectHasAllValues = obj => {
      return Object.values(obj).length == Object.values(obj).filter(value => value).length
    }

    // If all key value pairs are not falsy then submit
    window.submit = () => {
      const payload = createPayload()
      if (objectHasAllValues(payload)) {
        fetch('/your/api', payload)
      }
    }