-
Forms ?? how to?
Im looking to create a submission form. But i need the form to expand with certain selections that a customer may make.
For example, i need some standard details such as name, email etc. Then if a customer selects a certain item such as "mobile disco" or "dance floor hire" i will need specific information relating to that product.
So if i have the first few fields generic then when a customer selects mobile disco an additional set of fields appears. I will need bout 10 of these addtional sets of fields.
Is this possible and what would be the best way of acheiving it? The website will be running on bitweaver.
Thanks
-
You have two options: hide every possibility initially and show them when they are relevant or when a selection is made ask the server for more information.
The first option would waste memory in the browser but might be simpler to code.
The second option involves Ajax which is basically a way of dynamically loading new parts of the page without refreshing.
-
thanks for the very quick reply.
If i was to go with the first option how would i hide the possiblilites and then have them reveal when they were selected?
Thanks
-
This is (for your purposes) probably an oversimplification and not as flexible as you might want, but it shows the basic idea:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
label {
display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
document.write(['<style type="text/css">',
'.slider { display: none; }',
'</style>'].join(''));
jQuery(function($){
function triggers(){
var slider = $('#' + $(this).attr('data-trigger')).stop(true, true);
this.checked? slider.slideDown() : slider.slideUp();
}
$('*[data-trigger]').click(triggers).each(triggers);
});
</script>
</head>
<body>
<form>
<label>See Section One: <input type="checkbox" data-trigger="section_1"></label>
<div class="slider" id="section_1">
<label>Name: <input type="text" name="name"></label>
</div>
<label>See Section Two: <input type="checkbox" data-trigger="section_2"></label>
<div class="slider" id="section_2">
<label>Password: <input type="password" name="password"></label>
</div>
</form>
</body>
</html>
I'm pretty sure you will have questions. Feel free to ask.
