Hide input according to another input value

Question

I have this simple form:

<form align="center" onload="chk()" name="form" action="" method="post" id="form">  
  <input type="text" name="quantt" id="quantt" value="">    
  <input type="text" name="avail" id="avail" value="">  
</form>

the "avail" input is auto-filled from a php script. My question is How can I hide or disable the "quantt" input if the "avail" value is empty on loading of the form ?

I've tried this function but it didn't work :-(

function chk() {
    var ava = document.form.avail;
    if (ava.value == "") {
        document.getElementById("quantt").type = "hidden";
    } else {
        document.getElementById("quantt").type = "text";
    }
}

Thank you so much for any help.

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

The chk() function seems to work fine. Try to call it using window.onload, like:

window.onload = function() {
    chk();
};

For more information refer to this question.

edited May 23 '17 at 12:00

Community

1
1

answered Dec 28 '16 at 13:41

Pedro Henrique

601
6
17

Thank you so much. It worked fine with window.onload. – karmel Dec 28 '16 at 13:44

score 0 · Accepted Answer · answered Dec 28 '16 at 13:47

0

Use below function

<script>
    function chk() 
    {
        if ( $("#avail").val() == "" ) {
            $("#quantt").attr("hide", true)
        } else {
            $("#quantt").attr("hide", false)
        }
    }
</script>

answered Dec 28 '16 at 13:47

Vee Mandke

578
1
11
28

Call it on window on load like suggested by pedro – Vee Mandke Dec 28 '16 at 13:49
again perfect! thank you so much. I use this function. – karmel Dec 28 '16 at 14:27
If this works for you kindly consider the upvote or acceptance for the answer... So people would know that this is accepted or upvoted answer... – Vee Mandke Dec 29 '16 at 05:07

score 0 · Answer 3 · answered Dec 28 '16 at 13:58

Using Element.querySelector() you can call your function chk on body load:

document.querySelector('body').onload = function chk() {
  var qte = document.getElementById('quantt')
  document.getElementById('avail').type = (qte.value === '') ? 'hidden' : 'text';
};

<form align="center" name="form" action="" method="post" id="form">  
  <input type="hidden" name="quantt" id="quantt" value="">    
  <input type="text" name="avail" id="avail" value="">    
</form>

Hide input according to another input value

3 Answers3