当h：inputText没有值时，禁用ah：commandButton

Question

I have two h:inputText textboxes and ah:commandButton. How can i disable the button in case there is no value in either of the text box? Also how do i disable the other text box in case i have value in one of the text box. Please find my sample code below:

<h:form id="myForm">    
    <h:inputText id="first" value=#{myBean.first}></h:inputText>
    <h:inputText id="second" value=#{myBean.second}></h:inputText>
    <h:commandButton id="submit" action="#{myBean.submit}" value="Submit"/>
</h:form>

Javascript:

document.getElementById("myForm:first").onkeyup = function() {
    if (this.value.length > 0) {
        document.getElementById("myForm:second").disabled = true;
        document.getElementById("myForm:submit").disabled = false;
    } else {
        document.getElementById("myForm:second").disabled = false;
        document.getElementById("myForm:submit").disabled = true;
    }
};
document.getElementById("myForm:second").onkeyup = function() {
    if (this.value.length > 0) {
        document.getElementById("myForm:first").disabled = true;
        document.getElementById("myForm:submit").disabled = false;
    } else {
        document.getElementById("myForm:first").disabled = false;
        document.getElementById("myForm:submit").disabled = true;
    }
};

The problem here is it works fine, but i have to click outside once to enable/disable the button. Is there anyway the button gets enabled automatically and the other text box gets disabled the moment a data is entered into one of the text boxes?

Answer 1

onload or directly in commandButton tag keep the button as disabled="true" . Implement the onchange or onblur method to inpuText and set the style to the commandButton disable='false'

Answer 2

使用onchange事件代替keyup