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();

debugging with firebug

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

Seems to work okay when I try it .. is there more to your script? — Explosion Pills
– Explosion Pills, Commented Mar 27, 2013 at 14:47
@periback2 try setup a jsfiddle, I tried and it worked for me. — ulentini
– ulentini, Commented Mar 27, 2013 at 14:49
Have a look at this fiddle i cleaned it up a bit.. Watch the console. — jakschu
– jakschu, Commented Mar 27, 2013 at 15:03

Parthik Gosar · Accepted Answer · 2013-03-27 15:04:39Z

1

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>

answered Mar 27, 2013 at 15:04

Parthik Gosar

11.7k3 gold badges27 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

periback2 Over a year ago

for convention, all javascript code/files should be added after all the html code... this should not solve the problem :/

periback2 · Accepted Answer · 2013-03-27 17:47:22Z

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!

answered Mar 27, 2013 at 17:47

periback2

1,4694 gold badges19 silver badges36 bronze badges

Collectives™ on Stack Overflow

calling javascript function using onkeyup

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related