access controls within a repeater from javascript

How can I access controls within a repeater from javascript?  I do not know jQuery, so I want to use straight javascript.
LVL 1
HLRosenbergerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

guru_samiCommented:
Please post your repeater code. Jquery is pretty simplye and easy if you know javascript. Once you know how to select basic elements, you will love it and never want to do traditional JS.
0
Melih SARICAOwnerCommented:
Give Same Name to ur elements in the repeater and get all with document.GetElementsByName function


http://w3schools.com/jsref/met_doc_getelementsbyname.asp
0
HLRosenbergerAuthor Commented:
guru_sami -

I do want to learn jQuery.    But, have idea how to use it.     I know javascript.  

see attached code.  There are 3 rows in the repeater.  I need to reference the "name" and "description" in javascript to do input validation.
AddTds-client-wishlist.htm
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

HLRosenbergerAuthor Commented:
To use jQuery, do I need to install anything?  Add some sort of directive in my page?
0
guru_samiCommented:
1: Yes you need to reference the jquery library in the head section of your page.  You can use CDN or you can download the jquery js file/add it to your solution and reference it locally like any other .js file. The below one is referencing the script via microsoft CDN.
 <script  src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js" type="text/javascript"></script>

Open in new window


2: Here is sample script that will get the name inputs. The condition for below to work is it assumes you have set CssClass="name" for your name textboxes.

   
<script type="text/javascript">
        $(function () {
            // alert($("input.name").length); //this will return the count of input elements that has css class=name
            $("input.name").each(function () {
                alert($(this).val());//output the value in each input that has class=name
            });
        });
    </script>

Open in new window

0
Melih SARICAOwnerCommented:
did u check my comment about javascript ?
0
HLRosenbergerAuthor Commented:
non_zero - yes I did.  But I cannot get it to work.  I have used javascript in the past to do this, but I always encounter  difficulties.  And I am now.

I had attached the rendered HTML/asp.  I'm now attaching the source . Can you tell me how to access the name and description text boxes within the repeater?
AddTds-client-wishlist.aspx
0
Melih SARICAOwnerCommented:
change ur repeater code with this ..


and in ur javascriptcode

document.GetElementsByName("name")[n] gives the n th name
document.GetElementsByName("description")[n] gives the n th description



><asp:Repeater runat="server" id="Tds_client_wishlist_giftTableControlRepeater">		<ITEMTEMPLATE>		<Tabor:Tds_client_wishlist_giftTableControlRow runat="server" id="Tds_client_wishlist_giftTableControlRow">
<tr><td class="ticnb" scope="row">
                          <asp:ImageButton runat="server" id="Tds_client_wishlist_giftRowDeleteButton" causesvalidation="False" commandargument="DeleteOnUpdate" commandname="DeleteRecord" cssclass="button_link" imageurl="../Images/icon_delete.gif" tooltip="&lt;%# GetResourceValue(&quot;Txt:DeleteRecord&quot;, &quot;Tabor&quot;) %>">		
	</asp:ImageButton>
                        </td><td class="ttc" style="font-weight:bold;color:#408080;text-align:right;"><asp:label id="lblChoice" runat="server" text="First Choice" width="125px"></asp:label></td><td class="ttc requiredbefore" runat="server" id="gift_name"><span style="white-space:nowrap;">
<asp:TextBox runat="server" id="name" name ="name" Columns="50" MaxLength="50" cssclass="field_input" width="150px"></asp:TextBox>&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="nameTextBoxMaxLengthValidator" ControlToValidate="name" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;Tabor&quot;).Replace(&quot;{FieldName}&quot;, &quot;Name&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></span>
 </td><td class="ttc requiredbefore" runat="server" id="gift_description"><span style="white-space:nowrap;">
<asp:TextBox runat="server" id="description" name="description" MaxLength="500" columns="60" cssclass="field_input" rows="3" textmode="MultiLine" width="230px"></asp:TextBox>&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="descriptionTextBoxMaxLengthValidator" ControlToValidate="description" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;Tabor&quot;).Replace(&quot;{FieldName}&quot;, &quot;Description&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></span>
 </td><td class="ttc requiredbefore"><asp:dropdownlist cssclass="Filter_Input" id="ddQuantity" runat="server" /></td><td class="ttc"><span style="white-space:nowrap;">
<asp:TextBox runat="server" id="color" Columns="15" MaxLength="15" cssclass="field_input" width="75px"></asp:TextBox>&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="colorTextBoxMaxLengthValidator" ControlToValidate="color" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;Tabor&quot;).Replace(&quot;{FieldName}&quot;, &quot;Color&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></span>
 </td><td class="ttc"><span style="white-space:nowrap;">
<asp:TextBox runat="server" id="size" Columns="15" MaxLength="15" cssclass="field_input" width="75px"></asp:TextBox>&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="sizeTextBoxMaxLengthValidator" ControlToValidate="size" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;Tabor&quot;).Replace(&quot;{FieldName}&quot;, &quot;Size&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></span>
  
</td><td class="ttc"><span style="white-space:nowrap;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-right: 5px; vertical-align:top">
<asp:TextBox runat="server" id="rank" Columns="14" MaxLength="14" cssclass="field_input" visible="False" width="0px"></asp:TextBox></td>
<td>
&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="rankTextBoxMaxLengthValidator" ControlToValidate="rank" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;Tabor&quot;).Replace(&quot;{FieldName}&quot;, &quot;Rank&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></td>
</tr>
</table>
</span>
 
<span style="white-space:nowrap;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-right: 5px; vertical-align:top">
<asp:TextBox runat="server" id="request_date" Columns="20" MaxLength="20" cssclass="field_input" visible="False" width="0px"></asp:TextBox></td>
<td>
&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="request_dateTextBoxMaxLengthValidator" ControlToValidate="request_date" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;Tabor&quot;).Replace(&quot;{FieldName}&quot;, &quot;Request Date&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></td>
</tr>
</table>
</span>
 
<span style="white-space:nowrap;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-right: 5px; vertical-align:top">
<asp:TextBox runat="server" id="quantity" Columns="14" MaxLength="14" cssclass="field_input" visible="False"></asp:TextBox></td>
<td>
&nbsp;
<BaseClasses:TextBoxMaxLengthValidator runat="server" id="quantityTextBoxMaxLengthValidator" ControlToValidate="quantity" ErrorMessage="&lt;%# GetResourceValue(&quot;Val:ValueTooLong&quot;, &quot;Tabor&quot;).Replace(&quot;{FieldName}&quot;, &quot;Quantity&quot;) %>"></BaseClasses:TextBoxMaxLengthValidator></td>
</tr>
</table>
</span>
</td></tr></Tabor:Tds_client_wishlist_giftTableControlRow>
</ITEMTEMPLATE>

</asp:Repeater>

Open in new window

0
guru_samiCommented:
Did you try the sample code in my last post?
0
HLRosenbergerAuthor Commented:
non_zero - I can't change the repeater code.  I'm using Code Generation Product call Iron Speed.  It's generating the pages.  I need to work with what it generates.


guru_sami - I did not do anything with jQuery.  I do not have the time to learn something new right now.    I do want the learn jQuery, and appreciated your post.
0
HLRosenbergerAuthor Commented:
Nothing I try works.   Any suggestions?  I have a name and a description field within a repeater.  All I want to do is input validation - if a name is entered without a description, or a  description is entered with a name, for any row within the repeater.
0
guru_samiCommented:
If you want to try the jquery way here's the code. See the comments to understand what the code is doing.
1: Add reference to jquery by adding this to head of your page:
<script  src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js" type="text/javascript"></script>

Open in new window

2: Give some id to the parent table of the name/description textboxes e.g id="giftcards"
2: Add this function to <script> somewhere in your page.
function Validate() {
            //loop through each row of table #giftcards
            $("#giftcards tr").each(function () {
                var tbname = $(this).find("td input[id*='_name_']"); //find the name textbox
                var tbdescription = $(this).find("td input[id*='_description_']"); //find description tb
                if (tbname.val() != "" && tbdescription.val() == "") {
                    alert("Description cannot be empty");
                }
                else if (tbname.val() == "" && tbdescription.val() !== "") {
                    alert("Name cannot be empty");
                }
                else {
                    alert("All Valid");
                }
            });
        }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HLRosenbergerAuthor Commented:
Thanks.!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.