Dynamically adding form fields

  1. #1

    Dynamically adding form fields

    I have a form for creating/adding multiple choice questions. I want to be able to give flexibility to the user to add as many answers to a question as he likes. Initially I have put 2 answer fields in the form as you can see.

    My question is how do I add more similar answer fields to the form upon say on a button click. Can it be done in the code-behind or javascript? The form window is as follows:

        <ext:Window 
            ID="CrQuestionWindow" 
            runat="server" 
            Collapsible="true" 
            Resizable="true" 
            Icon="Add"  
            Title="Add Question" 
            Width="560"
            Height="300"
            Modal="true" BodyBorder="true" 
            BodyStyle="padding : 5px;" AutoScroll="True">            
            <Content>
                <ext:FormLayout ID="CrQuestionLayout" Cls="formlayout" Width="500" runat="server">
                    <ext:Anchor>
                        <ext:TextField 
                            ID="txtPrompt"
                            FieldLabel="Question"  
                            InputType="Text" 
                            LabelStyle="padding-left:8px;font-weight:bold" 
                            AllowBlank="false" 
                            Width="300"
                            BlankText="Question prompt is required"
                            runat="server" />
                    </ext:Anchor>
                    <ext:Anchor>
                        <ext:TextField 
                            ID="Ans1" 
                            FieldLabel="Answer 1"  
                            InputType="Text" 
                            LabelStyle="padding-left:8px;font-weight:bold" 
                            AllowBlank="false" 
                            Width="400"
                            BlankText="Answer 1 cannot be blank"
                            runat="server" />                        
                    </ext:Anchor>
                    <ext:Anchor>
                        <ext:TextField 
                            ID="ans2" 
                            FieldLabel="Answer 2"  
                            InputType="Text" 
                            LabelStyle="padding-left:8px;font-weight:bold" 
                            AllowBlank="false" 
                            Width="400"
                            BlankText="Answer 2 cannot be blank"
                            runat="server" />                        
                    </ext:Anchor>
                </ext:FormLayout>
            </Content>
            <Buttons>
                <ext:Button ID="Button3" OnClientClick ="addQuestion(); return false" runat="server" Text="Add Question" />
                <ext:Button ID="Button4" runat="server" Text="Cancel">
                    <Listeners>
                        <Click Handler="#{txtPrompt}.reset();#{CrQuestionWindow}.hide();" />
                    </Listeners>
                </ext:Button>
            </Buttons>        
        </ext:Window>
  2. #2

    RE: Dynamically adding form fields

    Hi sz_146,

    yes you can, through out an AjaxEventArgs in code behind.

    If you didn't do it yet, remeber to add in your web.config file the following code:

    <httpHandlers>
      <add path="*/coolite.axd" verb="*" type="Coolite.Ext.Web.ResourceManager" validate="false" />
    </httpHandlers>
    Matteo
  3. #3

    RE: Dynamically adding form fields

    Thanks. I have checked I have already got this line in my web.config.

    Is it possible if you could give me a simple example of how to use AjaxEventArgs with the above form ?


  4. #4

    RE: Dynamically adding form fields

    oops... sorry, not AjaxEvent, I meant Listeners, controls must be created on page load/init of page lifecycle.

    Matteo
  5. #5

    RE: Dynamically adding form fields

    The problem is I don't know at the time of page load how many <ext:textfield>s I need because the user will keep adding them as much as they like. How can I dynamically add a TextField to a FormLayout. Ans also because I have got them as FormLayout --> Anchor --> TextField , do I have to add an anchor before adding a TextField ? I am totally lost.

Similar Threads

  1. [CLOSED] Adding Tag Property to all fields
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Nov 14, 2011, 5:52 PM
  2. [CLOSED] Adding Elements to a form dynamically
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 21, 2011, 4:33 PM
  3. [CLOSED] Adding Fields to Store from Javascript
    By pcole01 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 04, 2011, 4:21 PM
  4. Replies: 0
    Last Post: Apr 09, 2009, 4:49 PM
  5. Adding Form fields at run time
    By sz_146 in forum 1.x Help
    Replies: 1
    Last Post: Feb 10, 2009, 6:18 PM

Posting Permissions