HTML how to save input depending on selected dropdown value

Question

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form action="" method="post">
      <label>Select Fridge or Freezer</label>
      <select name="FridgeFreezer">
        <option value="Fridge 1">Fridge 1</option>
        <option value="Fridge 2">Fridge 2</option>
        <option value="Fridge 3">Fridge 3</option>

      </select>

      <label>Temperature °C</label>
      <input type="number">
      <label>Comments</label>
      <textarea name="comments"></textarea>
      <button type="button" name="button">Save</button>

    </form>
  </body>
</html>

Goal:

How can I select a value from the dropdown menu, for example, I have selected Fridge 1 from the menu, I then type some value in the Temperature °C and Comments box. Next select another value from drop down box as an example Fridge 2 and start a fresh input, but if I go back to Fridge 1 the data previously inputted to be visible.

What do I need to look into in terms of research? I am not sure where to look or what keywords to search.

When you say "save", are you thinking of saving it just for that session? Or saving it to that browser for future sessions? Or saving it to the server? etc etc — DBS
– DBS, Commented Jun 26, 2020 at 12:16
In that case, I would listen for the change event for the select element, and at that point, store the values for the other fields in an array of objects that represent each option (something like {id: 'Fridge 1', temp: '2', comments: 'example'}) and then search the array for any values you should load for the new id. — DBS
– DBS, Commented Jun 26, 2020 at 12:22

DBS · Accepted Answer · 2020-06-26 12:52:39Z

2

I've put together a quick example of what I mentioned in the comments, using a simple array of objects the maintain each options previous state.

When the select is changed, we:

Check to see if we have an object for the previous id
If we do, update that object, otherwise, create a new one with the new values
Update the current id (We store this externally as it's lost by the time the change is executed)
Check for any saved data for the newly loaded id and load that if it exists

var savedValues = []
var currentId = document.getElementById("fridgeFreezer").value

function handleChange() {
  // The new values for the fridge with id currentId:
  var temp = document.getElementById("temperature").value
  var comments = document.getElementById("comments").value
  
  // Save these values for the previous id
  // - First, check to see if we already have a record we can update
  var save = savedValues.find(save => {
    return save.id === currentId
  })
  // - If we do, update it, otherwise create a new record
  if (save) {
    save.temp = temp
    save.comments = comments
  } else {
    savedValues.push({
      id: currentId,
      temp: temp,
      comments: comments,
    })
  }
  
  // Update the current id to the newly selected option
  currentId = document.getElementById("fridgeFreezer").value
  
  // Load any previously saved data for this new id
  save = savedValues.find(save => {
    return save.id === currentId
  })
  // If we find a previous value, load it, otherwise empty the inputs
  if (save) {
    document.getElementById("temperature").value = save.temp
    document.getElementById("comments").value = save.comments
  } else {
    document.getElementById("temperature").value = ''
    document.getElementById("comments").value = ''
  }
  
}

// Attach the event listener to the document
document.getElementById("fridgeFreezer").addEventListener('change', handleChange, false)

label {
  display: block
}

<form action="" method="post">
  <label>Select Fridge or Freezer</label>
  <select name="FridgeFreezer" id="fridgeFreezer">
    <option value="Fridge 1">Fridge 1</option>
    <option value="Fridge 2">Fridge 2</option>
    <option value="Fridge 3">Fridge 3</option>
  </select>

  <label>Temperature °C</label>
  <input type="number" id="temperature">
  <label>Comments</label>
  <textarea name="comments" id="comments"></textarea>
  <button type="button" name="button">Save</button>

</form>

edited Jun 26, 2020 at 12:52

answered Jun 26, 2020 at 12:47

DBS

10.1k4 gold badges40 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DeveloperLV Over a year ago

Are you able to explain/expand what is happening at save = savedValues.find... not sure what is happening

DBS Over a year ago

@LV98 The find method takes a function that's used to filter each element in an array and returns the first item where the function returns true. I've used an arrow function: save => { return save.id === currentId } which means that each element in the array is passed into the function (that's what save is in this context), one at a time, and it keeps going until either one of the elements in the array has an id property that matches currentId and returns true, or it reaches the end.

DBS Over a year ago

Documentation for find (The link wouldn't fit into the first comment's character limit)

tony19 · Accepted Answer · 2022-07-16 04:46:45Z

I highly recommend using Vue.js for this. State management is very easy in it. The way I would do this is:

    var app = new Vue({
        el: '#app',
        data: function(){
            return {
            devices: [{id: 0, name: 'fridge1', tempCelcius: 39, price: 20}, 
            {id: 1, name: 'fridge1', tempCelcius: 39, price: 30}, 
            {id: 2, name: 'fridge1', tempCelcius: 39, price: 40}],
            selected = ''
            }
            }
            
        
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <select v-model="selected">
            <option disabled value="">Please select one</option>
            <option v-for="device in devices" v-bind:key="device.id">{{ device.name }}</option>
        </select>
        <span>{{ selected }}</span>
    </div>
</body>
</html>

This is a start, it doesn't quite work yet but here is where you'll find how to implement

Collectives™ on Stack Overflow

HTML how to save input depending on selected dropdown value

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related