JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<form>
  <fieldset>
    <legend>
      attribute on input
    </legend>
    <label><input type="radio" name="flag" value="none" checked> none</label>
    <label><input type="radio" name="flag" value="readonly"> readonly</label>
    <label><input type="radio" name="flag" value="disabled"> disabled</label>
  </fieldset>
  <input type="text" name="task-name" value="a form input to submit" readonly>
  <button>submit</button>
</form>
<div>
  <pre>
  <code></code>
</pre>
</div>

CSS

fieldset {
  width: auto;
  display:inline-block;
  vertical-align:top;
  border: none;
}
fieldset label {
  display:block;
}

JavaScript

let counter = 0;
function formDataReducer(a, b) {
  a[b[0]] = b[1];
  return a;
}
function getFormData(formData) {
  return [...formData.entries()].reduce(formDataReducer, {});
}

function onRadioChange(e) {
  if (e.target.tagName !== "INPUT" || e.target.getAttribute("type") !== "radio") {
    return;
  }
  const input = e.currentTarget.querySelector("input[type=\"text\"]");
  input.removeAttribute("readonly");
  input.removeAttribute("disabled");
  switch (e.target.value) {
    case "none":
      break;
    default:
      input.setAttribute(e.target.value, "");
      break;
  }
}


function submitData(data) {
  counter += 1;
  const d1 = {
    ...data,
    counter
  };
  setTimeout(() => {

    document.querySelector("code").innerText += "\r\n" + JSON.stringify(d1, 1);
  }, 300);

}

const form = document.querySelector("form");

function doSubmit() {
  const data = getFormData(new FormData(form));
  submitData(data);
}
form.addEventListener("click", onRadioChange);
form.addEventListener("submit", (e) => {
  e.preventDefault();
  doSubmit();
});