CODEWITHSUNDEEP
javascripthtml
David Mathias
David Mathias

Reputation: 43

Fixing HTML textbox value permanently

enter image description hereI am working on GPS project where i am trying to take altitude(sea level) value in textbox1 and trying to convert it into ground level value in textbox2.

Here GPS Altitude(ASL) value is dynamic for example..

Altitude reading (ASL) =  250.00 Mtr (initial value) textbox1
Altitude reading (ASL) =  300.00 Mtr (value increases to 50) textbox1
Altitude reading (ASL) =  400.00 Mtr (current value increases to 100) textbox1

Altitude reading (AGL) =  ASL(current value) - ASL(initial value)
Altitude reading (AGL) = 150 Mtrs. textbox2

As i said Altitude reading (ASL) is dynamic if i use 3rd textbox for example textbox3 to store initial value then how can i lock the value so that it should not get changed after getting it from textbox 1. Any possibility with HTML or java script ?

Thank you for your help

Upvotes: 1

Views: 137

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65796

The solution is to copy the value of the input, then delete the input from the document and place the value into a non-editable element that takes the place of the input.

var input1 = document.getElementById("txt1");
var input2 = document.getElementById("txt2");
var output = document.getElementById("output")
var container = document.getElementById("container");

input1.addEventListener("change", disable);
input2.addEventListener("input", sum);

function disable(evt){
  var val = input1.value;      // Get the value of the input
  container.innerHTML = "";    // Remove input from container
  container.textContent = val; // Place value in non-editible container
}

function sum(){
  output.textContent = +input1.value + +input2.value;
};

sum();
#output {
  display:inline-block;
  width:5em;
  padding:2px;
  background-color:#e0e0e0;
  border:1px solid #222;
}
Value 1: <span id="container"><input id="txt1"></span><br>
Value 2: <input id="txt2">
Sum: <span id="output"></span>

<div>(Change the value in the first input and then leave that field.)</div>

Upvotes: 1

Related Questions