xpagesxpages-ssjs

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?

Solution

  • 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.