content page control looping

hi experts,

I have a content page within a master page.It has few textboxes and text areas which I need to iterate through,I want this iteration via javascript.How to achieve it?
DevildibAsked:
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.

Robert SchuttSoftware EngineerCommented:
This may need to be refined a bit for your exact situation (for example staying within the current content block if needed?) but here is an example using a simple master page and a webform using it.

In the master page I added this javascript in the head section:
    <script type="text/javascript">
        function listTextboxes() {
            var frm = document.forms['form1'], // name of form in master page
                log = document.getElementById('<%= TextBox1.ClientID %>'),
                idx,
                fld;

            log.value = '';
            for (idx = 0; idx < frm.elements.length; idx++) {
                fld = frm.elements[idx];
                if (fld.id != log.id && (fld.tagName == 'TEXTAREA' || (fld.tagName == 'INPUT' && fld.type == 'text'))) {
                    log.value += fld.id + ' / ' + fld.name + ' : "' + escape(fld.value) + '"\n';
                }
            }
        }
    </script>

Open in new window

also added these controls in the master page for testing:
    <asp:Button ID="Button1" runat="server" Text="List text boxes" UseSubmitBehavior="False" OnClientClick="listTextboxes()" /><br /><br />
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="5" Columns="70"></asp:TextBox>

Open in new window

Then just some random controls in the ContentPlaceHolder on the actual page:
    <asp:TextBox ID="TextBox1" runat="server">t1</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox2" runat="server" Columns="30">t2</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Rows="3" Columns="70">t3</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" Rows="4" Columns="50">t4</asp:TextBox><br /><br />

Open in new window

The javascript code logs the id, name and value of the textboxes (which translate to text inputs and textareas) in a separate textbox.
Robert SchuttSoftware EngineerCommented:
This may need to be refined a bit for your exact situation (for example staying within the current content block if needed?) but here is an example using a simple master page and a webform using it.

In the master page I added this javascript in the head section:
    <script type="text/javascript">
        function listTextboxes() {
            var frm = document.forms['form1'], // name of form in master page
                log = document.getElementById('<%= TextBox1.ClientID %>'),
                idx,
                fld;

            log.value = '';
            for (idx = 0; idx < frm.elements.length; idx++) {
                fld = frm.elements[idx];
                if (fld.id != log.id && (fld.tagName == 'TEXTAREA' || (fld.tagName == 'INPUT' && fld.type == 'text'))) {
                    log.value += fld.id + ' / ' + fld.name + ' : "' + escape(fld.value) + '"\n';
                }
            }
        }
    </script>

Open in new window

also added these controls in the master page for testing:
    <asp:Button ID="Button1" runat="server" Text="List text boxes" UseSubmitBehavior="False" OnClientClick="listTextboxes()" /><br /><br />
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="5" Columns="70"></asp:TextBox>

Open in new window

Then just some random controls in the ContentPlaceHolder on the actual page:
    <asp:TextBox ID="TextBox1" runat="server">t1</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox2" runat="server" Columns="30">t2</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Rows="3" Columns="70">t3</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" Rows="4" Columns="50">t4</asp:TextBox><br /><br />

Open in new window

The javascript code logs the id, name and value of the textboxes (which translate to text inputs and textareas) in a separate textbox.
capture of output
DevildibAuthor Commented:
Does it make a diff to have the button and the log text area control on child page itself??
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Robert SchuttSoftware EngineerCommented:
Not really, as the javascript 'sees' just one page, one form, with all the textboxes. Just in my example the 'log' textbox needs a unique name and I moved the javascript code into the child page as well so it can access the log textbox more easily. This may not be necessary/practical in your situation though.

With those changes it works the same without any controls/code in the master page:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    Here some input fields:<br /><br />
    <asp:TextBox ID="TextBox1" runat="server">t1</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox2" runat="server" Columns="30">t2</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Rows="3" Columns="70">t3</asp:TextBox><br /><br />
    <asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" Rows="4" Columns="50">t4</asp:TextBox><br /><br />

    <br />
    <asp:Button ID="Button1" runat="server" Text="List text boxes" UseSubmitBehavior="False" OnClientClick="listTextboxes()" /><br /><br />
    <asp:TextBox ID="TextBoxLog" runat="server" TextMode="MultiLine" Rows="5" Columns="70"></asp:TextBox>

    <script type="text/javascript">
        function listTextboxes() {
            var frm = document.forms['form1'], // name of form in master page
                log = document.getElementById('<%= TextBoxLog.ClientID %>'),
                idx,
                fld;

            log.value = '';
            for (idx = 0; idx < frm.elements.length; idx++) {
                fld = frm.elements[idx];
                if (fld.id != log.id && (fld.tagName == 'TEXTAREA' || (fld.tagName == 'INPUT' && fld.type == 'text'))) {
                    log.value += fld.id + ' / ' + fld.name + ' : "' + escape(fld.value) + '"\n';
                }
            }
        }
    </script>

</asp:Content>

Open in new window

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
DevildibAuthor Commented:
Let me try and implement.
DevildibAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for flyhighrohit12's comment #a41385727

for the following reason:

Thanks
Robert SchuttSoftware EngineerCommented:
Looks like wrong comment selected as solution.
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.