CODEWITHSUNDEEP
xpagesxpages-ssjs
Malin
Malin

Reputation: 697

Calculate number of characters of my xp:inputText control

I have my xp:inputText control bound to a viewscope. Now I would like to remove the disable property from a button when the user has entered 10 characters but the onkeypress or onchange event (server) only seem to submit something when I leave the input control.

How can I resolve this server side?

Upvotes: 0

Views: 68

Answers (2)

Lars Migula
Lars Migula

Reputation: 285

On the serverside you cuould use the onkeydown event and disable the button from the partial refresh.

<xp:inputText id="inputText1">  
    <xp:eventHandler event="onkeydown" submit="true"
        refreshMode="partial" refreshId="button1">
        <xp:this.action><![CDATA[#{javascript:print("keydown")}]]></xp:this.action>
    </xp:eventHandler>
</xp:inputText>
    
<xp:button value="Label" id="button1"></xp:button>

Upvotes: 2

Rob Mason
Rob Mason

Reputation: 1417

If you do go for a client side solution, put something like this into your page or custom control at the bottom of the page.

<xp:scriptBlock>
setInterval(function () {
  if(XSP.getElementById("#{id:textInputFieldName}").val().length > 9) {
    XSP.getElementById("#{id:submitButtonName}").removeAttr("disabled");
  } else {
    XSP.getElementById("#{id:submitButtonName}").attr("disabled", "disabled");
  }
}, 500); //Runs every 0.5s
</xp:scriptBlock>

This runs every 500 milliseconds and checks the length of your text input is greater than 9 characters. If it is, it removes the disabled attribute of your button otherwise it keeps the attribute on. This approach works even if people copy and paste data into the field whereas a solution that uses keypress may not pick up a paste event.

You will need to change the ids for your elements.

Upvotes: 2

Related Questions