content page control looping

Devildib
Devildib used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Robert SchuttSoftware Engineer

Commented:
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 Engineer

Commented:
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

Author

Commented:
Does it make a diff to have the button and the log text area control on child page itself??
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Software Engineer
Commented:
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

Author

Commented:
Let me try and implement.

Author

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 Engineer

Commented:
Looks like wrong comment selected as solution.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial