CODEWITHSUNDEEP
javascript
Ajibola Daniel
Ajibola Daniel

Reputation: 19

How to get the preset value of textbox to another texbox

Please I need your help. Am trying to get a preset value of a textbox into another textbox using document.getElementById. With my code, I can only get the value of whatever I typed, not the initial ROS I preset the textbox with. pls help

See my code below

    <input id="program" name="program1" size="40px" value="ROS" onblur="if(this.value==''){ 
    this.value='ROS';}" onfocus="if(this.value=='ROS'){ this.value='';}" onkeyup="Program();">

    <input type= "text" id = "program2" readonly size="50px" class="textbox-modal">

    <input id="Button1" type="button" value="Preview" class="button" onclick="Program()" />

    function Program() 
      {
      document.getElementById('program2').value = document.getElementById('program').value;
      }

Upvotes: 0

Views: 88

Answers (2)

Sameer
Sameer

Reputation: 5188

Here is a working solution 

const firstInput = document.getElementById('program'),
  secondInput = document.getElementById('program2');
secondInput.value = 'ROS';

function Program() {
  secondInput.value = firstInput.value;
}

function handleBlur() {
  if (!firstInput.value) {
    secondInput.value = firstInput.value = 'ROS';
  }
}
<input id="program" name="program1" size="40px" value="ROS" onblur="handleBlur()" onfocus="if(this.value=='ROS'){ this.value='';};" onkeyup="Program();">

<input type="text" id="program2" readonly size="50px" class="textbox-modal">

<input id="Button1" type="button" value="Preview" class="button" onclick="Program()" />

Some details

1.Initially set the value (ROS) for second input and again assign value to second input in onblur event if first input is empty.

2.You can also check if value is empty like this if (!firstInput.value)
This is equivalent of

if (firstInput.value == '' || firstInput.value == undefined || firstInput.value == null)

Update (With Numerical values)

It works as expected (See the example below).

const firstInput = document.getElementById('day1'),
      secondInput = document.getElementById('day2');

secondInput.value = '0';

function Day1() {
  secondInput.value = firstInput.value;
}

function handleDay1Blur() {
  if (!firstInput.value) {
    secondInput.value = firstInput.value = '0';
  }
}
<input id="day1" size="40px" value="0" onblur="handleDay1Blur()" 
onfocus="if (this.value==0) { this.value=''; };" onkeyup="Day1();">

<input type="text" id="day2" readonly size="40px" class="textbox-modal">
<input id="Button1" type="button" value="Preview" class="button" onclick="Day1()">

Upvotes: 1

Ajibola Daniel
Ajibola Daniel

Reputation: 19

Please am back again. I want to use the above code for numeric values but its not getting the right value, it keeps returning 0. How can I do this? See my usage below. 

const firstInput = document.getElementById('day1'),
      secondInput = document.getElementById('day2');

secondInput.value = '0';

function Day1() {
  secondInput.value = firstInput.value;
}

function handleDay1Blur() {
  if (!firstInput.value) {
    secondInput.value = firstInput.value = '0';
  }
}

<input id="day1" size="40px" value="0" onblur="handleBlur()" 
onfocus="if (this.value==0) { this.value=''; };" onkeyup="Day1();">

<input type="text" id="day2" readonly size="40px" class="textbox-modal">
<input id="Button1" type="button" value="Preview" class="button" onclick="Day1()">

Upvotes: 0

Related Questions