Nov 11, 2008, 8:19 AM
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:
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>