How to execute validation and updating of fields of the form before Ajax request (async postback)?

2 posts, 0 answers
  1. Eugeny
    Eugeny avatar
    23 posts
    Member since:
    Nov 2009

    Posted 03 Jan 2011 Link to this post

    Before to begin Ajax request (async postback), I execute JavaScript function, which validate and correct values of the form (removes hyphens from telephone number). Call of alert() shows that value of a field has changed. However, to the server transferred not changed value of a field (old value - before correction).

    Example: I typed '55-55-55' in field and clicked button. Value of a field changes on '555555', but to the server transferred old value (before correction) - '55-55-55'. I need to transfer the corrected value. How it to make?

    <%@ Page Language="C#" AutoEventWireup="true" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
      
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
          function formAdjustBeforeSubmit(sender, args) {
            var input = document.getElementById("phoneTextBox");
            //debugger;
            var val = input.value.replace(/-/g, "");
            input.value = val;    // Here we modified value of a field (remove '-' from phone number)
            alert(input.value);
          }
      </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" ClientEvents-OnRequestStart="formAdjustBeforeSubmit">
        <AjaxSettings>
          <telerik:AjaxSetting AjaxControlID="Panel1">
            <UpdatedControls>
              <telerik:AjaxUpdatedControl ControlID="Panel1" UpdatePanelHeight="" />
            </UpdatedControls>
          </telerik:AjaxSetting>
        </AjaxSettings>
        </telerik:RadAjaxManager>
      <asp:Panel ID="Panel1" runat="server">
        Phone: <asp:TextBox ID="phoneTextBox" runat="server" ClientIDMode="Static" />  
        <asp:Button ID="Button1" runat="server" Text="Save" style="margin-left:20px;"/>
      </asp:Panel>
    </form>
      
    </body>
    </html>
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 06 Jan 2011 Link to this post

    Hi Ivan,

    The reason for the problem you are facing is that when the OnRequestStart client event is fired the page is already disposed and the value will not be kept on the server. I would suggest you to perform the logic into some event of the control which initiates the request in your case OnButtonClick. Find the modified code below:

    <script type="text/javascript">
            function formAdjustBeforeSubmit(sender, args) {
                var input = document.getElementById("phoneTextBox");
                //debugger; 
                var val = input.value.replace(/-/g, "");
                input.value = val;    // Here we modified value of a field (remove '-' from phone number) 
                alert(input.value);
            
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" UpdatePanelHeight="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <asp:Panel ID="Panel1" runat="server">
            Phone:
            <asp:TextBox ID="phoneTextBox" runat="server" ClientIDMode="Static" />
            <asp:Button ID="Button1" runat="server" OnClientClick="formAdjustBeforeSubmit()"
                Text="Save" Style="margin-left: 20px;" />
        </asp:Panel>

    I hope this helps.

    All the best,
    Maria Ilieva
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top