Add a new text element using jquery in bootstrap -
Hi, I am preparing a page in bootstrap, now I have to use some new dynamic features of jazzery. After clicking the user click the Options button, I must add a new text field (button ID = BTED). The new button should come in the next line after that button Here's the code.
& lt; Div class = "col-md-12 well sm" Role = "main" & gt; & Lt; Fieldset & gt; & Lt; Legend & gt; Please enter filter configuration here & lt; / Legend & gt; & Lt; Form & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-7" & gt; & Lt; Label = "server URL" & gt; Server URL: & lt; / Label & gt; & Lt; Input type = "server URL" class = "form-control" id = "server URL" placeholder = "Enter server URL" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-7" & gt; & Lt; Label for = "pwd" & gt; Filter Name: & lt; / Label & gt; & Lt; Input type = "filter name" class = "form-control" id = "pwd" placeholder = "enter filter name" & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-7" & gt; & Lt; Label = "sel1" & gt; Filter Type: & lt; / Label & gt; & Lt; Select class = "form-control" id = "sel1" & gt; & Lt; Options & gt; Text & lt; / Options & gt; & Lt; Options & gt; List & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-6" & gt; & Lt; Label = "filter option" & gt; Filter options: & lt; / Label & gt; & Lt; Span class = "inputWithButton" & gt; & Lt; Input type = "password" class = "form-control" id = "pwd" & gt; & Lt; Button class = "btn btn-info" id = "btAdd" & gt; Add option & lt; / Button & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Div class = "col-xs-7" & gt; & Lt; Label = "filter label" & gt; Filter label: & lt; / Label & gt; & Lt; Button Type = "Button" class = "BTN BTN-Success" & gt; Add filter & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "form-group" & gt; & Lt; Div class = "col-sm-offset-3 col-sm-10" & gt; & Lt; Button type = "submit" class = "btn btn-success" & gt; Submit & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Div & gt;
This is what you should do:
& Lt; Button class = "btn btn-info" id = "btAdd" onclick = "AddOption ()" & gt; Add option & lt; / Button & gt; & Lt; Div id = "optionsContainer" & gt; & Lt; / Div & gt; & Lt; Script & gt; Function AddOption () {var Container = $ ('# optionsContainer') ;; Container.epend ('& lt; input class = "form-control" id = "add-in input" placeholder = "enter option" & gt;'); } & Lt; / Script & gt; OnClick calls a function that uses the JQuery addendum to add an element.
Comments
Post a Comment