JSFiddle - React, Tailwind, and code Playground

by amirrahman132132

HTML

<form action="https://formspree.io/f/xwkaygyj" method="POST">
       <div class="name">
         <input id="name" type="text" name="name" required        placeholder="Name" oninput="onChangeHandler(this)"/>
       <input id="email" type="email" name="email" required placeholder="[email protected]" oninput="onChangeHandler(this)"/>
      <textarea id="message" name="message" cols="30" rows="7" maxlength="500" placeholder="Write your message here" required oninput="onChangeHandler(this)">
       </textarea>
                
     <button type="submit">Send</button>
   </div>
</form>

JavaScript

const formName = document.getElementById('name');
const email = document.getElementById('email');
const message = document.getElementById('message');


let formData = { name: '', email: '', message: '' };

const onChangeHandler = (event) => {
  switch (event.name) {
    case 'name':
      formData = { ...formData, name: event.value };
      break;
    case 'email':
      formData = { ...formData, email: event.value };
      break;
    case 'message':
      formData = { ...formData, message: event.value };
      break;
    default:
      break;
  }
  localStorage.setItem('data', JSON.stringify(formData));
};
const reloadBrowser = JSON.parse(localStorage.getItem('data'));
if (reloadBrowser) {
  formName.value = reloadBrowser.name;
  email.value = reloadBrowser.email;
  message.value = reloadBrowser.message;
}