Javascript - Restore value of input

coldheart
July 1, 2023
185 views
2 votes
4 Answers

There is an number input with min of ‘2’ and max of ’10’. By default this input is disabled. Nearby checkbox if checked toggles ‘disabled’ attribute so input become enabled and sets ‘2’ as a default value. When checkbox is not checked it resets the value of input so you can see a placeholder text insted of the number. The problem is how to restore the last entered value of input before its deactivation?

For example:

Checkbox is active: input becomes enabled an sets ‘2’ as a default value.
I change its value to ‘7’.
I deactivate checkbox, so input becomes disabled and its value resets to ”.
I activate checkbox again and wait for input to display early entered ‘7’, but see default ‘2’ instead.

Wrote the following code. I don’t know how to get rid of passQuantityInput.value = '2' after I called it for the first time.

const Input = document.querySelector('#input');
const Checkbox = document.querySelector('#box');

let inputValue = Input.value;

Checkbox.addEventListener('click',function(){
    if (this.checked){
        Input.toggleAttribute('disabled');
        Input.value = '2';
        Input.value = getValue(); //this line returns "The specified value "NaN" cannot be parsed, or is out of range."
    }
    if (!this.checked){
        Input.toggleAttribute('disabled');
        Input.value = '';
    }
})

Input.addEventListener('input',getValue);

function getValue(){
    let inputValue = this.value;
    if(this.value<2){
        this.value = '';
    } else if (this.value>10){
        this.value = '10';
    }
    return inputValue;
}

Tags: input javascript

Answers

Try changing your function getValue to this:

function getValue(){
    if(inputValue<2){
        Input.value = '';
    } else if (inputValue>10){
        Input.value = '10';
    } else {
        Input.value = inputValue;
    }
    return Input.value;
}

Change the Checkbox.addEventListener part to this

Checkbox.addEventListener('click',function(){
    if (this.checked){
        Input.toggleAttribute('disabled');
        Input.value = '2';
        Input.value = getValue(); //this line returns "The specified value "NaN" cannot be parsed, or is out of range."
    }
    if (!this.checked){
        Input.toggleAttribute('disabled');
        inputValue = Input.value;
        Input.value = '';
    }
})

So the value is saved in inputValue before the shown value is set to ”.

To fix this issue you can define a variable outside of function or Event listener and the value will be 2.
suppose, we named the variable "defaultValue"
When you get the value from input, you can update the value of defaultValue and every time your event listener enabled set the value with defaultValue.

const Input = document.querySelector('#input');
const Checkbox = document.querySelector('#box');

let inputValue = Input.value;
let defaultValue = 2 //define the default value
Checkbox.addEventListener('click',function(){
    if (this.checked){
        Input.toggleAttribute('disabled');
        Input.value = defaultValue; //add the defaultValue as a global variable
        Input.value = getValue(); //this line returns "The specified value "NaN" cannot be parsed, or is out of range."
    }
    if (!this.checked){
        Input.toggleAttribute('disabled');
        Input.value = '';
    }
})

Input.addEventListener('input',getValue);

function getValue(){
    let inputValue = this.value;
    if(this.value<2){
        this.value = '';
    } else if (this.value>10){
        this.value = '10';
    }
    
    defaultValue = inputValue //upgrade the value of defaultValue
    return inputValue;
}

It maybe simpler to use a data attribute to store the current input value. That way you don’t have to rely on global variables.

Set a current attribute on the input element, and assign it an initial value. Any changes to the input value are stored on the data attribute, when the checkbox is toggled it retrieves the current value from the input element’s dataset / sets the value to an empty string.

// Cache the elements
const text = document.querySelector('input[type="text"]');
const box = document.querySelector('input[type="checkbox"]');

// Add the listeners
text.addEventListener('input', handleInput);
box.addEventListener('click', handleClick);

// If the input value changes store that in the current
// data attribute
function handleInput(e) {
  e.target.dataset.current = e.target.value;
}

// If the box is clicked
function handleClick() {

  // Enable/disable the input element
  text.disabled = !this.checked;
  
  // If the input is disabled set its value to
  // an empty string, otherwise set its value to the
  // value from its data attribute
  text.value = text.disabled ? '' : text.dataset.current;
}

<input
  data-current="2"
  type="text"
  placeholder="Add some text"
  disabled
/>
<input type="checkbox" />

There is such a thing as HTMLInputElement.defaultValue that you can use here

const Input = document.querySelector('#input');
const Checkbox = document.querySelector('#box');

Checkbox.addEventListener('click', function() {
    Input.disabled = !this.checked;
    if (Input.disabled)  Input.value = '';
    else Input.value = Input.defaultValue || 2;
})

Input.addEventListener('input', getValue);

function getValue() {
  let inputValue = this.value;
  if (this.value < 2) {
    this.value = '';
  } else if (this.value > 10) {
    this.value = '10';
  }
  this.defaultValue = this.value;
}

<input type="number" min="2" max="10" id="input" value="" disabled /> <input type="checkbox" id="box" />

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Restore value of input

Answers