Tips on saving a form submit button data to localStorage

Question

Tips on saving a form submit button data to localStorage

As a newcomer, I am on a quest to make this function properly. My goal is to create a form where the submit button saves data to the localStorage. Here's what I have tried thus far.

<script>
function storeRecipe() {
    localStorage.setItem($("#recipe-name").val(), $("#recipe-description").val());
    console.log(Object.keys(localStorage));
}
</script>

<b>Recipe Name:</b>
<br>
<textarea id="recipe-name" rows="1" cols="35"></textarea>
<br><br>
<b>Recipe Description:</b>
<br>
<textarea id="recipe-description" rows="15" cols="35"></textarea>
<br><br>
<input type="submit" value="Send Recipe" onClick="storeRecipe()">

javascript html css

Answer 1

Answer №1

Once you hit submit, you have the ability to halt the form submission process and store each input field as a localStorage key. View the working demonstration on jsfiddle: https://jsfiddle.net/mr4ms4zp/. To see the modified localStorage object, open the console by pressing cmd+opt+i on your Mac.

<form method="POST>
  <b>Recipe Name:</b>
  <br>
  <textarea id="recipe-name" rows="1" cols="35"></textarea>
  <br><br>
  <b>Recipe Description:</b>
  <br>
  <textarea id="recipe-description" rows="15" cols="35"></textarea>
  <br><br>
  <input type="submit" value="Send Recipe">
</form>

<script>
  document.querySelector('form').onsubmit = function(e) {
    e.preventDefault();
    var name = document.querySelector('#recipe-name').value;
    var description = document.querySelector('#recipe-description').value;
    localStorage["name"] = name;
    localStorage["description"] = description;
    console.log(localStorage);
  }
</script>

Answer 2

Once you hit submit, you have the ability to halt the form submission process and store each input field as a localStorage key. View the working demonstration on jsfiddle: https://jsfiddle.net/mr4ms4zp/. To see the modified localStorage object, open the console by pressing cmd+opt+i on your Mac.

<form method="POST>
  <b>Recipe Name:</b>
  <br>
  <textarea id="recipe-name" rows="1" cols="35"></textarea>
  <br><br>
  <b>Recipe Description:</b>
  <br>
  <textarea id="recipe-description" rows="15" cols="35"></textarea>
  <br><br>
  <input type="submit" value="Send Recipe">
</form>

<script>
  document.querySelector('form').onsubmit = function(e) {
    e.preventDefault();
    var name = document.querySelector('#recipe-name').value;
    var description = document.querySelector('#recipe-description').value;
    localStorage["name"] = name;
    localStorage["description"] = description;
    console.log(localStorage);
  }
</script>

Answer 3

Answer №2

Example using Vanilla JavaScript

function saveRecipe() {
    let title = document.getElementById("recipe-title").value;
    let instructions = document.getElementById("recipe-instructions").value
    localStorage.setItem(title, instructions);
}

To prevent the default submission behavior, you can use event.preventDefault() or simply change the button type to "button" instead of "submit". I recommend the latter approach:

<button type="button" value="Save Recipe" onClick"saveRecipe()">Submit</button>

Answer 4

Example using Vanilla JavaScript

function saveRecipe() {
    let title = document.getElementById("recipe-title").value;
    let instructions = document.getElementById("recipe-instructions").value
    localStorage.setItem(title, instructions);
}

To prevent the default submission behavior, you can use event.preventDefault() or simply change the button type to "button" instead of "submit". I recommend the latter approach:

<button type="button" value="Save Recipe" onClick"saveRecipe()">Submit</button>

Tips on saving a form submit button data to localStorage

Answer №1

Answer №2

Similar questions

Tips for keeping the scroll position of a bootstrap table when reloading the page

Ways to conceal a div using jQuery when the video source is missing

Implementing Angular2 with conditional loading

Node.js: The choice between returning the original Promise or creating a new Promise instance

Link to Reply Comment Feature in Wordpress

Accessing JavaScript cookie within .htaccess file to establish redirection parameters according to cookie content

particular shade for button border and background

Tips for centring navigation horizontally and making it responsive using CSS

What is the reason behind the execution of componentDidMount occurring after componentWillUnmount?

Is there a way to successfully press a button on a website?

Obtain a Compilation of Video Sources in an HTML5 Format

Can someone please clarify how the nth-of-type selector functions?

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

Unable to render dynamic ID in Next.js version 13.4.6 due to an issue

verified firebase/firestore requests

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

What is the best way to upload this HTML file to create my own visual representation?

Is it possible to define a data type from an external package using TypeScript and Node.js?

What is the best way to merge two approaches for tallying items within each category?

Encountering an obscure issue when using Discord.js v14 after attempting to cancel and resubmit a modal