how do I prevent postback while button is clicked

[Venkatakrishna]

Hello,

We have RadGrid in our project and calling a javascript function to validate textboxes while button is clicked. the issue we are facing is,it fires server postback even "return(false)" is called in the javascript function. Please help us to solve the issue. Below is the code we have used in our app.

Thanks
Venkat

<telerik:RadGrid ID="radgridRadius" runat="server" Width="80%" AllowPaging="True"

        PageSize="20" AllowSorting="True" AutoGenerateColumns="false" ShowStatusBar="true"

        AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True"

        GridLines="Vertical">

        <MasterTableView CommandItemDisplay="Top" GridLines="None">

            <CommandItemSettings RefreshText="" />

            <Columns>

                <telerik:GridBoundColumn UniqueName="Zipvalue" HeaderText="Zip" DataField="Zipvalue">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn UniqueName="radiusvalue" HeaderText="Radius" DataField="radiusvalue">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn UniqueName="latValue" HeaderText="Lat" DataField="latValue">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn UniqueName="lonValue" HeaderText="Lon" DataField="lonValue">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn UniqueName="hdnKeyValue" Visible="false" DataField="hdnKeyValue">

                </telerik:GridBoundColumn>

                <telerik:GridButtonColumn CommandName="Delete" HeaderText="Delete" Text="Delete"

                    ButtonType="ImageButton">

                </telerik:GridButtonColumn>

            </Columns>

            <EditFormSettings EditFormType="Template">

                <FormTemplate>

                    <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"

                        style="border-collapse: collapse; background: white;">

                        <tr>

                            <td>

                                <table id="Table3" cellspacing="1" cellpadding="1" width="100%" border="0">

                                    <tr>

                                        <td>

                                            Center on zip:

                                        </td>

                                        <td>

                                            <asp:TextBox ID="TextBox7" runat="server" Text="" MaxLength="5" Width="90px">

                                            </asp:TextBox>

                                            <input type="button" name="btnRadiusLookup" onclick="javascript:return(OpenRadiusLookup());"

                                                value="Lookup" />

                                        </td>

                                        <td align="right">

                                            radiate out for

                                        </td>

                                        <td>

                                            <asp:TextBox ID="TextBox8" runat="server" Text="" MaxLength="2" Width="60px">

                                            </asp:TextBox>

                                            miles

                                        </td>

                                        <td align="right" colspan="2">

                                            <asp:Button ID="btnUpdate" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>'

                                                runat="server"  OnClientClick ="javascript:return(testvalidation());"

                                                CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "InitInsert", "Update")%>' />

                                               

                                              

                                                

                                        </td>

                                    </tr>

                                </table>

                            </td>

                        </tr>

                        <tr>

                        </tr>

                    </table>

                </FormTemplate>

            </EditFormSettings>

        </MasterTableView>

        <EditItemStyle />

    </telerik:RadGrid>

 

 

<script language="javascript" type="text/javascript">

function ValidateInput() {

        debugger;

        var txtzip = document.getElementById("ucGeography_radgridRadius_ctl00_ctl02_ctl03_TextBox7")

        var txtRadius = document.getElementById("ucGeography_radgridRadius_ctl00_ctl02_ctl03_TextBox8")

        var regExperZip = "/^\d{5}$/";

        var regExperRadius = "/^\d{2}$/";

        if (txtzip.value.search(regExperZip) == -1) { //if match failed

            radalert("Please enter a valid 5 digit Zip", 300, 100);

            return(false);

 

        }

        if (txtRadius.value.search(regExperRadius) == -1) { //if match failed

            radalert("Please enter a valid 2 digit Radius", 300, 100);

            return(false);

 

        }

        else if (txtRadius.value > 50) {

            radalert("Please enter a Radius less then 50", 300, 100);

            return(false);

 

        }

       

 

    }

</script>

 

Thanks

Sivasankaran.D

 

[Princy]

Hello Venkatakrishna,

I am not quiet sure how you are calling the function. Here is the code that I tried which worked as expected in my end.

aspx:

<asp:Button ID="button" runat="server" Text="validate" OnClientClick=" return ValidateInput();" />

Javascript:

function ValidateInput()
{
       //your code goes here
        return false;
}

Another easy method to implement validation is by creating the validator and set its ControlToValidate property to point to the required control. Check the following help documentation which explains more about this.
Validation.

Thanks,
Princy.

[Rajeev]

Hi Venkat

use these

<div onclick="return cancelEvent('onbeforeunload')">
<telerik:RadGrid runat="server">
</telerik:RadGrid>
</div>
Regds
Rajeev