Javascript localStorage not reciving input from form

Question

I am working on saving data from a HTML form to localStorage.

Here is my code so far

HTML

<form onSubmit="newRecipe()">
  Recipe Name:<br>
  <input type="text" value="Recipe" name="Recipe"><br>
  Ingredients:<br>
  <input type="text" name="Ingredients" value="Ingredients"><br><br>
  <input type="submit" value="Submit">
</form>

JavaScript

function newRecipe(){
     var inputrecipe= document.getElementById("Recipe");
     localStorage.setItem("Recipe", JSON.stringify(Recipe));

  var inputingredients= document.getElementById("Ingredients");
  localStorage.setItem("Ingredients", inputingredients.value, JSON.stringify(testObject));
    }
document.getElementById("test").innerHTML = localStorage.getItem("Recipe");

What am I doing wrong? when I submit the form I get a white screen and no localStorage save

You need to have the newRecipe() function return false to prevent it from trying to POST to a blank page. — vbguyny
– vbguyny, Commented Nov 17, 2016 at 21:49
Literally add return false; as the last statement in the function... — War10ck
– War10ck, Commented Nov 17, 2016 at 22:04
Comment: Always try/catch localStorage usage. See crocodillon.com/blog/… — 000
– 000, Commented Nov 17, 2016 at 23:39

Falk · Accepted Answer · 2016-11-17 22:07:28Z

There are some errors in your code. For one you don't actually assign an id to the elements you try to get. I changed your code up slightly and used jQuery (just because it is faster typing it and less code to write). I also suggest following normal naming conventions like giving your variables lower case names (unless they are constructors) and camelCasing. In HTML you might want to try to keep everything to lower case and use - instead.

This does NOT yet read from localStorage and doesn't display the values in the fields. But it does save it. I hope you can figure out the rest from here with the bread crumbs. :)

HTML:

<form id='form'>
  Recipe Name:<br>
  <input type="text" value="Recipe" name="recipe" id="recipe">
  <br>
  Ingredients:<br>
  <input type="text" name="ingredients" value="ingredients" id="ingredients">
  <br><br>
</form> 
<button>Submit</button>

JS:

$('button').click(function(){
    var name = $('#recipe').val();
  var ingredients = $('#ingredients').val();
  localStorage.setItem(name, ingredients);  
});

Mihai Alexandru-Ionut · Accepted Answer · 2016-11-17 23:36:20Z

0

There are some mistakes in your code.You don't have elements with ID Recipe and Ingredients

Modify HTML like this

<form id="form">
  Recipe Name:<br>
  <input type="text" value="Recipe" name="Recipe" id="Recipe"><br>
  Ingredients:<br>
  <input type="text" name="Ingredients" value="Ingredients" id="Ingredients"><br><br>
  <input type="submit" value="Submit">
</form>

JS

1)When you submit the form, you need to trigger a function.

var form=document.getElementById("form");
form.onsubmit=function(){
   //code here
}

2)To get the value of input use .value property,like this:

var inputrecipe= document.getElementById("Recipe").value;

3) Include line document.getElementById("test").innerHTML = localStorage.getItem("Recipe"); inside function.

var form=document.getElementById("form");
form.onsubmit=function(){
   alert("it is hitting");
   var inputrecipe= document.getElementById("Recipe").value;
   localStorage.setItem("Recipe", JSON.stringify(inputrecipe));

   var inputingredients= document.getElementById("Ingredients").value;
   localStorage.setItem("Ingredients",JSON.stringify(inputingredients));
   document.getElementById("test").innerHTML = localStorage.getItem("Recipe");
   return false;
}

Here is a working solution

edited Nov 17, 2016 at 23:36

answered Nov 17, 2016 at 22:02

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

8 Comments

Top-Bot Over a year ago

still nothing when I submit the form

Mihai Alexandru-Ionut Over a year ago

As @War10ck said, did you try to add return false; as the last statement in the function called newRecipe()?

Top-Bot Over a year ago

I did, I am still getting a null error when trying to retrieve the data

Mihai Alexandru-Ionut Over a year ago

It is hitting newRecipe() function ?

Top-Bot Over a year ago

Yes, but I am unsure if it is saving the form data

|

Collectives™ on Stack Overflow

Javascript localStorage not reciving input from form

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related