CODEWITHSUNDEEP
javascript
ArbitB
ArbitB

Reputation: 113

input field not getting disabled or enables as desired

I am having two input fields. I want to disable the second input field if unless I enter something in first text field. Second input field should get enabled as soon as I enter something in first textfield. Currently I am trying to do it like this but it is not working as desired. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<input type="text" id="value1" />
<input type="text" id="value2" />

<script>
    var val1 = Number(document.getElementById('value1').value)
    var val2 = Number(document.getElementById('value2').value)
    if(document.getElementById('value1').value===null ||document.getElementById('value1').value===''){
            document.getElementById('value2').disabled = true 
        }
        else{document.getElementById('value2').disabled = false }
</script>

</body>
</html>

I am very new to javascript. I need some help here.

Upvotes: 0

Views: 75

Answers (3)

PSo
PSo

Reputation: 1008

The anwser should be working now:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<input type="text" id="value1" onkeyup="myFunction()"/>
<input type="text" id="value2" disabled="disabled" />

<script>
function myFunction() {
  var val1 = Number(document.getElementById('value1').value)
  var val2 = Number(document.getElementById('value2').value)
  if(document.getElementById('value1').value===null ||document.getElementById('value1').value===''){
    document.getElementById('value2').disabled = true 
  }else {
    document.getElementById('value2').disabled = false 
  }
}
</script>

</body>
</html>

Upvotes: 2

Rama Krishna
Rama Krishna

Reputation: 101

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="value1"  onblur="Call()"/>
<input type="text" id="value2" />
<script>
    var val1 = Number(document.getElementById('value1').value)
    var val2 = Number(document.getElementById('value2').value)
    document.getElementById('value2').disabled = true

function Call()
{
     if(document.getElementById('value1').value===null ||document.getElementById

('value1').value===''){
            document.getElementById('value2').disabled = true 
        }
        else{document.getElementById('value2').disabled = false }
}

</script>

</body>
</html>

Upvotes: 0

Magicprog.fr
Magicprog.fr

Reputation: 4100

Add an event listener and check the 1st field value to change the state of the second one:

var val1 = document.getElementById('value1');

val1.addEventListener('keyup', function() {
    document.getElementById('value2').disabled = val1.value === "";
});
<input type="text" id="value1" />
<input type="text" id="value2" disabled />

Upvotes: 2

Related Questions