'I am trying to store form values in local storage on submitting form. now i want that all input tags should be cleared once i clicked on submit button

var formHandle = document.forms.infoForm;

formHandle.onsubmit = processForm;
function processForm() {
    var formName = formHandle.f_name;
    var formColor = formHandle.f_color;
    localStorage.setItem('name', formName.value);
    localStorage.setItem('color', formColor.value);
    document.getElementById('newMsgBox').innerHTML = 'Welcome ' + localStorage.getItem('name') + ' !';
    document.body.style.backgroundColor = localStorage.getItem('color');
   
    return false;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Storing Data</title>
    <style>body{background:#c0c0c0;}</style>
</head>

<body>
    <h1>Customizable Interface</h1>

<!-- WELCOME BOX -->
    <div id="output">
        <h2 id="newMsgBox">Welcome!</h2>
        <nav>
            <ul>
                <li><a href="lab9.html">HOME</a></li>
                <li><a href="products.html">PRODUCTS</a></li>
            </ul>
        </nav>
    </div>

<!--USER PREFERENCES FORM-->
    <form name="infoForm" action="#" method="get">
        <fieldset>
            <legend>Customize Your Experience</legend>
        
            <!--GET USER NAME-->
            <p>
                <label for="inName" >What is your name?</label>
                <input type="text" id="inName" name="f_name"/>
            </p>
        
            <!-- GET COLOUR-->
            <p>
                <label for="inColor" >What is your favourite colour? </label>
                <input type="color" id="inColor" name="f_color" />
            </p>
            
            <p>
                <input type="submit" value="Click to save" />
            </p>
        </fieldset>
    </form>

<!--DELETE COOKIES-->
    <p><input type="button" id="btnDel" value="Delete your Stored Information" /></p>

<script src="lab9.js"></script>
</body>
</html>

what should i do to clear out form once i click on "Click to save" button. and Welcome message should change from "Welcome!" to "Welcome entered name!". on clicking on delete , local storage value should be removed after deleting local storage, page should look like exactly same as before

javascripthtml


Solution 1:[1]

All form elements have an inbuilt reset() method. Please refer to the official documentation to understand how these elements work in order to properly use them.

What your snippet needs is -

formHandle.reset();

I have fixed your snippet. Please read the comments in the snippet too.

var formHandle = document.forms.infoForm;
var deleteBtn = document.getElementById('btnDel');

function processForm(event) {
  // use the "event" to prevent submitting the form "i.e. calling the URL '#'"
  // if your requirement is to only use those form values and update the UI
  // store them in localstorage and have no backend/server interaction, then
  // you don't want to submit the form at all.
  event.preventDefault();
  var formName = formHandle.f_name;
  var formColor = formHandle.f_color;

  // local storage calls would fail on StackOverflow - so commenting them out
  // and adding alternate commands to demonstrate the required changes.

  //localStorage.setItem('name', formName.value);
  //localStorage.setItem('color', formColor.value);
  //document.getElementById('newMsgBox').innerHTML = 'Welcome ' + localStorage.getItem('name') + ' !';
  //document.body.style.backgroundColor = localStorage.getItem('color');

  document.getElementById('newMsgBox').innerHTML = 'Welcome ' + formName.value + ' !';
  document.body.style.backgroundColor = formColor.value;
  formHandle.reset(); // this is what will reset the form!
}

function clearAll(event) {
  // remove from localStorage
  //localStorage.removeItem('name');
  //localStorage.removeItem('color');
  // resetting to original state
  document.getElementById('newMsgBox').innerHTML = 'Welcome!';
  document.body.style.backgroundColor = '#c0c0c0';
}

formHandle.onsubmit = processForm;
deleteBtn.onclick = clearAll;
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Storing Data</title>
  <style>
    body {
      background: #c0c0c0;
    }
  </style>
</head>

<body>
  <h1>Customizable Interface</h1>

  <!-- WELCOME BOX -->
  <div id="output">
    <h2 id="newMsgBox">Welcome!</h2>
    <nav>
      <ul>
        <li><a href="lab9.html">HOME</a></li>
        <li><a href="products.html">PRODUCTS</a></li>
      </ul>
    </nav>
  </div>

  <!--USER PREFERENCES FORM-->
  <form name="infoForm" action="#" method="get">
    <fieldset>
      <legend>Customize Your Experience</legend>

      <!--GET USER NAME-->
      <p>
        <label for="inName">What is your name?</label>
        <input type="text" id="inName" name="f_name" />
      </p>

      <!-- GET COLOUR-->
      <p>
        <label for="inColor">What is your favourite colour? </label>
        <input type="color" id="inColor" name="f_color" />
      </p>

      <p>
        <input type="submit" value="Click to save" />
      </p>
    </fieldset>
  </form>

  <!--DELETE COOKIES-->
  <p><input type="button" id="btnDel" value="Delete your Stored Information" /></p>

  <script src="lab9.js"></script>
</body>

</html>

Solution 2:[2]

Do not use return false in for processForm() function. Form on submit by default will refresh the page and all fields will be cleared.

Solution 3:[3]

After submitting the form, the page should be refreshed by default. But, you can also try to reload by hand.


var formHandle = document.forms.infoForm;

formHandle.onsubmit = processForm;
function processForm() {
    var formName = formHandle.f_name;
    var formColor = formHandle.f_color;

    if (!formName.value || !formColor.value) {

        return false;

    }
    else {

        localStorage.setItem('name', formName.value);
        localStorage.setItem('color', formColor.value);
        document.getElementById('newMsgBox').innerHTML = 'Welcome ' + localStorage.getItem('name') + ' !';
        document.body.style.backgroundColor = localStorage.getItem('color');
            
        // refresh the page
        location.reload();
    }
        

    return false;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BkiD
Solution 2 Hitesh
Solution 3 Hello_World

Related Questions