OTPInput Autopostback - workaround or in future update?

0 Answers 1 View
Ajax Input OTPInput
Nick
Top achievements
Rank 1
Nick asked on 13 Sep 2025, 06:53 PM
I don't think OTPInput control has an autopostback and so I am using this code to call client event then do post back via hidden link button to my server side function. This is used for allowing a user to enter a three digit entry key number and doesn't require them to enter the numbers and press a button for speed. If the control had autopostback when all boxes have a value and the last box value is entered this would make the control much more useful. Is there a better way of doing this?

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<!-- OTP input for three digit key number-->
<telerik:RadOTPInput ID="otpKeySearch" runat="server" Placeholder="0-9" Space="true" Type="Number">
    <Items>
        <telerik:OTPInputItem GroupLength="3" />
    </Items>
    <ClientEvents OnChange="keyOTPOnChange" />
</telerik:RadOTPInput>

<!-- Hidden linkbutton we will post back to -->
<asp:LinkButton ID="btnOtpPostBack"
                runat="server"
                OnClick="otpKeySearchChanged"
                UseSubmitBehavior="false"
                Style="display:none;" />

<script type="text/javascript">
    // Fires every time the OTP value changes
    function keyOTPOnChange(sender, args) {
        var value = args.get_value() || "";
        // Only act once we have exactly three digits 0-9
        if (value.length === 3 && /^\d{3}$/.test(value)) {
            // Force a full postback to the hidden LinkButton
            __doPostBack('<%= btnOtpPostBack.UniqueID %>', '');
        }
    }
</script>

    ' Handles the hidden LinkButton postback
    Protected Sub otpKeySearchChanged(sender As Object, e As EventArgs) Handles btnOtpPostBack.Click
        Dim theKeyNumber As String = ""
        If otpKeySearch IsNot Nothing AndAlso otpKeySearch.Value IsNot Nothing Then
            theKeyNumber = otpKeySearch.Value.Trim()
        End If
        If theKeyNumber <> "" AndAlso theKeyNumber.Length = 3 AndAlso IsNumeric(theKeyNumber) Then
            ' get key number from database and perform redirect to keys panel of relevant entry dashboard
        End If
        ' If we got here (redirect above failed - value was invalid or key not found in database) show the radNotify with message to user
        notifyInvalidSearch.Show()
    End Sub

No answers yet. Maybe you can help?

Tags
Ajax Input OTPInput
Asked by
Nick
Top achievements
Rank 1
Share this question
or