calling javascript function using onkeyup

Question

I created a function to enable/disable a submit button, and I want it to run when user types something in a text field.

Here is my code:

<form name="sidebarPostMessageForm" action="../app/NewMessageAsynch.action">
    <input type="hidden" name="conversationId" value="${conversationId}"/>
    <lalahtml:textarea id="messageText" name="messageText" onkeyup="enableDisablePostButton();" ></lalahtml:textarea>
    <input type="button" name="postMessage" id="postMessage" onclick="if(this.form.messageText.value.trim().length>0){sidebar_postMessage();this.disabled='disabled'}" value="<ezmi18n:message key="doSendMessage.Label" />"/>
</form>
<script type="text/javascript">
function enableDisablePostButton(){
    if (document.getElementById("messageText").value.trim() == "") {
        document.getElementById("postMessage").disabled="disabled";
    } else {
        document.getElementById("postMessage").disabled="";
    }
}
</script>

When I test it, I get the following javascript error:

Error:

ReferenceError: enableDisablePostButton is not defined enableDisablePostButton();

It's like if the function enableDisablePostButton() did not exist... Does anyone know why and what can I do?

Answer 1

I found out the problem, guys! In fact, the javascript block wasn't being loaded because it was being fetched asynchronously (ajax). I found out this now and I set the javascript code in the onkeyup attribute directly:

onkeyup="this.form.messageText.value.trim() == ''? this.form.postMessage.disabled='disabled': this.form.postMessage.disabled='';"

thanks for all the help!

Answer 2

I think placing the script tag above the form tag should do the trick. The enableDisablePostButton function is defined after the form tag, so it is not able to find the function.

<script type="text/javascript">
function enableDisablePostButton(){
    if (document.getElementById("messageText").value.trim() == "") {
        document.getElementById("postMessage").disabled="disabled";
    } else {
        document.getElementById("postMessage").disabled="";
    }
}
</script>
<form name="sidebarPostMessageForm" action="../app/NewMessageAsynch.action">
    <input type="hidden" name="conversationId" value="${conversationId}"/>
    <lalahtml:textarea id="messageText" name="messageText"     onkeyup="enableDisablePostButton();" ></lalahtml:textarea>
    <input type="button" name="postMessage" id="postMessage" onclick="if(this.form.messageText.value.trim().length>0){sidebar_postMessage();this.disabled='disabled'}" value="<ezmi18n:message key="doSendMessage.Label" />"/>
</form>