Passing gridview control to external JavaScript file

[joss Perold]

Firstly i am very new to anything to do with javascript, so excuse me if this seems easy.

I have a project with many gridviews in it, now these gridviews have many columns with textboxes for input. I would like to do javascript validation on these textboxes. I have managed to get it to work if the gridview renders on page load. Like so :

Protected Sub gvProjectedBuildingAreaSchedule_PreRender(ByVal sender As Object, ByVal e As EventArgs) Handles gvProjectedBuildingAreaSchedule.PreRender

        'loop through each row and add each control to js array
        For Each grdrow As GridViewRow In gvProjectedBuildingAreaSchedule.Rows
            If grdrow.RowIndex < 13 Then
                Dim txtPercBasement As TextBox = DirectCast(grdrow.FindControl("txtPercBasement"), TextBox)
                Dim txtPercPodiumFloors As TextBox = DirectCast(grdrow.FindControl("txtPercPodiumFloors"), TextBox)
                Dim txtPercGroundFloor As TextBox = DirectCast(grdrow.FindControl("txtPercGroundFloor"), TextBox)
                Dim txtPercMezzanine As TextBox = DirectCast(grdrow.FindControl("txtPercMezzanine"), TextBox)
                Dim txtPercFirstFloor As TextBox = DirectCast(grdrow.FindControl("txtPercFirstFloor"), TextBox)
                Dim txtPercTypicalFloors As TextBox = DirectCast(grdrow.FindControl("txtPercTypicalFloors"), TextBox)
                Dim txtPercMechanicalFloors As TextBox = DirectCast(grdrow.FindControl("txtPercMechanicalFloors"), TextBox)
                Dim txtPercRoofTop As TextBox = DirectCast(grdrow.FindControl("txtPercRoofTop"), TextBox)

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercBasement", [String].Concat("'", txtPercBasement.ClientID, "'"))

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercPodiumFloors", [String].Concat("'", txtPercPodiumFloors.ClientID, "'"))

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercGroundFloor", [String].Concat("'", txtPercGroundFloor.ClientID, "'"))

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercMezzanine", [String].Concat("'", txtPercMezzanine.ClientID, "'"))

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercFirstFloor", [String].Concat("'", txtPercFirstFloor.ClientID, "'"))

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercTypicalFloors", [String].Concat("'", txtPercTypicalFloors.ClientID, "'"))

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercMechanicalFloors", [String].Concat("'", txtPercMechanicalFloors.ClientID, "'"))

                Page.ClientScript.RegisterArrayDeclaration("grd_txtPercRoofTop", [String].Concat("'", txtPercRoofTop.ClientID, "'"))

            End If


        Next

    End Sub

Which works great. But now if i have to wait for user input before the gridview is rendered it obvioulsy doesnt register. I need help getting this to work after user input. Any help would be much appreciated.

Thanks Joss

[Dormilich]

I would like to do javascript validation on these textboxes.

does every textbox is supposed to have the same validation code or are there differences?

[joss Perold]

does every textbox is supposed to have the same validation code or are there differences?

Hi Dormilich

Yes most of the textboxes need to be validated the same, there are exceptions for textboxes that have been disabled as calculation answers are put in them. Otherwise they are all validated the same. Remember that I have many GridViews across many pages. Hence the external js file.

[Dormilich]

one approach is to notify the user when he does a wrong input. for that you would have to assign an event handler to each text box, that reacts to the user input.

// each textbox, use whatever is appropriate
var inputs = document.getElementsByTagName("input");

// handler function
function validateTextbox(evt)
{
    // for example only allow letters
    if (/\W/.test(evt.charCode)) {
        evt.preventDefault();
    }
}

// attach handlers
[].forEach.call(inputs, function (item) {
    item.addEventListener("keydown", validateTextbox, false);
});

[joss Perold]

Thanks Dormilich I will have a look and see if I can implement that.

one approach is to notify the user when he does a wrong input. for that you would have to assign an event handler to each text box, that reacts to the user input.

// each textbox, use whatever is appropriate
var inputs = document.getElementsByTagName("input");

// handler function
function validateTextbox(evt)
{
    // for example only allow letters
    if (/\W/.test(evt.charCode)) {
        evt.preventDefault();
    }
}

// attach handlers
[].forEach.call(inputs, function (item) {
    item.addEventListener("keydown", validateTextbox, false);
});