How to get the reference of GridView footerRow in a JavaScript function

[btreddy]

Hi..

I've a gridview with a footer row contains two textboxes and one button for inserting the new records to the gridview.

I want to validate the values of these text boxes on client side before entering into the database .im decided to add one javascript function..but how can i get the reference to the textboxes which are there in the footertemplate.

Thanks in advance .

BTR.

[gits]

in your function just use document.getElementsByTagName('input'); and then loop through the returned node list and pick the nodes you need ... check for the type attribute or wahtever you need ...

kind regards

[btreddy]

Thank you very much for the reply..

im very new to the javascript.

If you dont mind kindly please provide soem code over here.

Thanks
BTR.

[gits]

;) the function could look like this (will check all input type='text'-nodes for empty values):

function validateFields() {
    var val = true;
 
    // get the input-nodes
    var nodeList = document.getElementsByTagName('input');
 
    // loop through the node list and break in case we find 
    // an empty value in a textbox
    for (var i = 0, node; node = nodeList[i]; i++) {
        if (node.type == 'text' && node.value === '') {
            val = false;
            break;
        }
    }
 
    return val;
}

kind regards

[btreddy]

Very Kind of you .

Thanks for the code.

But this function checks all the textboxes in the current document...i've somany text boxes in the current text boxes and some of them may be empty...so it would definitely break if other textboxes in the current document are empty.

How to check only the textboxes in the griviews footer row .

Thanks..
BTR.

[bhupinder]

Try this code

<script language="javascript">
    function chkvalue()
    {
 
    if (document.getElementById("gvdata_ctl08_txt1").value=="" || document.getElementById("gvdata_ctl08_txt2").value=="" )
    {
    alert("please enter value")
    }
    }
    </script>

[gits]

@btreddy
i will not write the entire function for you ... in the example you just need to extend the check for a specific attribute or parent-node ... but you need to know what attribute that is ... just have a look at the html-scourcecode of the page and try it or post an example in case you have problems to implement that ...

kind regards

[btreddy]

Hey ..Its Ok .I solved it.

var grid=document.getElementById('ctl00_BodyContent_editgrid');
if(grid!=null)
    {
     var text=grid.getElementsByTagName("input");
     for(var i=0;i<text.length;i++)
     {
      if(text[i].type=='text')
      {
       if(text[i].value=="")
       {
       alert('Plese Enter the value);
       return false;
       }
      }
     }
    }
 
 

Have a NiceTime.
BTR.

[gits]

;) ... glad to hear that ... and you found out the best solution for yourself ... by first retrieving the parent-node and then the contained input-nodes - well done ;)

kind regards

[Frinavale]

You should be able to get the ID of the TextBox in the FooterRow without having to loop through all of the elements on the page.

Just like you know the ID of the GridView, you also know the ID of the TextBox in the FooterRow.

If you don't actually know how to get this value, it's the ClientID property ;)

For example:

editgrid.ClientID will return "ctl00_BodyContent_editgrid" (the ID of your GridView)

So:

theTextBoxInTheFooterRow.ClientID will return you something similar to "ctl00_BodyContent_editgrid_ctrl100000theTextBoxIn TheFooterRow".

Since you can retrieve the ID of the text box in this manner, you can pass it to your validation function...or you can directly input it into your validation function...

Here's an example of your function modified to accept ID of the TextBox as a parameter:

function validateFooter(textBoxID)
{
      var textBox=document.getElementById(textBoxID);
      iftextBox.value=="")
       {
           alert('Plese Enter the value);
           return false;
       }
    }

There are a few ways to "directly input" it into your validation function.
If your function is in your asp page, you can use the Response.Write method to write the clientID of the TextBox into your function (note that <%= %> as an ASP short hand for calling the Response.Write method):

function validateFooter(textBoxID)
{
      var textBox=document.getElementById('<%= textBox.clientID %>');
      iftextBox.value=="")
       {
           alert('Plese Enter the value);
           return false;
       }
    }

Since your TextBox is going to be dynamically added to your page it's probably advisable to use the first way I mentioned (pass the ID to the function) so that in your RowDataBound event you can store the ClientID in a HiddenField.....

Ahh, there's so many ways to do this....

[gits]

using the Id typically is good for one element ... the loop is more generic especially when more fields are added later on ... and avoids such long if-else-constructs ... but of course it is an option ;) ... a rule of thumb is to just avoid dom-operations whenever possible because they strongly affect performance ... so just try to do reduce them to a minimum ...

kind regards