How to generate dynamic form using JavaScript/JQuery?

Question

Suppose a form.php file, and there is "add" button, once it's clicked, a drop down list will show, to let you choose which type of input type you want. For example:

<select name="Type">
        <option value="Text">Text</option>
    <option value="MultipleChoice">MultipleChoice</option>
    <option value="Checkbox">Checkbox</option>
</select>

My question is, I don't know how to implement the function that, once the type is chosen, suppose checkbox, then a checkbox will shown, and could let you input the label of each checkbox, you can do this one by one. Also I want to make this process could happen iteratively. I'm not sure if I explain clearly, it's a little bit like the google form function. Any ideas? If providing some codes would be better. Thanks!

This isnt really the place for this question. This something that is defiantly possible but you'd be better of reading some tutorials and trying it yourself. Then come back when you have some more specific questions. — Alex
– Alex, Commented Aug 4, 2011 at 14:52
if you question is " it's possible?" i say "YES", but it will be a headache when you validate, and recibe this "dynamic form" to process the data. — FxckDead
– FxckDead, Commented Aug 4, 2011 at 14:54

Kumar · Accepted Answer · 2011-08-04 14:52:17Z

0

Here is plain vanilla old school HTML/JS

<select name="Type" onchange="showformelement(this.value)">
    <option value="text">Text</option>
<option value="MultipleChoice">MultipleChoice</option>
<option value="Checkbox">Checkbox</option>
</select>
<script>
function showformelement(whichelement){
    //use whichelement to embedd element in DOM
}
</script>

If you can use jQuery or similar toolkit it may be a much simpler job

answered Aug 4, 2011 at 14:52

Kumar

5,1558 gold badges41 silver badges52 bronze badges

Add a comment |

Kumar · Accepted Answer · 2011-08-04 20:35:02Z

I know what are you looking for, just let you know that it isn't a simple script, it will have way too many functions and will be little hard to build.

Just to start, if you search on the web for PHP and jQuery based form builders and similar other things, you will find many ready to use scripts. Well, if you don't want to search for one, the principle logic will look like following:

PS: I will explain how to develop using jQuery.

<select id="options">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>

<script>
$(document).ready(function(){
$('#options').change(function(){
var optSelected = $('#options option:selected').val()    
  if(optSelected == 1){
    // Shows up and div with Checkboex for edit
  }
  if(optSelected == 2){
    // Shows up and div with Combobox for edit
  }
  if(optSelected == 3){
    // Shows up and div with Textbox for edit
  }
  })
})
</script>

After doing that, you will need to build the options of each type... There is too much work... look, I didn't write here your script, I just explained you how to build...

This is a huge system...you will need to know a bit of JavaScript to make one of these...

As @Wallysson explains you will have to actually write down action for nearly every element. This will be too much of work and its not a simple and easy task as well. Try using some ready made script. — Kumar
– Kumar, Commented Aug 4, 2011 at 18:14

Madara's Ghost · Accepted Answer · 2011-08-04 20:57:35Z

0

Even simpler, without needing to do any casing or conditioning, (uses jQuery).

Example: http://jsfiddle.net/SMAfA/

$(function() {
    $("#type").change(function() {
        type = $("option:selected", this).text();
        $("#target").append("<input type="+type+">");
    })
})

answered Aug 4, 2011 at 20:57

Madara's Ghost

176k52 gold badges273 silver badges314 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to generate dynamic form using JavaScript/JQuery?

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related