So I wasn't sure how to word this, but I want to create a multi-step form that asks the user a few questions, then based on what they choose, shows different code. I made a simple jsfiddle to explain. When they choose their answer, it will automatically fade into the next question or display a set of code, like an image. Also, having it work with radio buttons.
What is this called and will I need javascript to acplish it?
<select>
<option>Select Color</option>
<option>Green</option>
<option>Blue</option>
<option>Red</option>
<option>Orange</option>
</select>
So I wasn't sure how to word this, but I want to create a multi-step form that asks the user a few questions, then based on what they choose, shows different code. I made a simple jsfiddle to explain. When they choose their answer, it will automatically fade into the next question or display a set of code, like an image. Also, having it work with radio buttons.
What is this called and will I need javascript to acplish it?
<select>
<option>Select Color</option>
<option>Green</option>
<option>Blue</option>
<option>Red</option>
<option>Orange</option>
</select>
- I don't know if there's an "official" name for this kind of interface. But where exactly are you stuck? Since you're using jQuery, I assume you'd be attaching handlers to the form elements and fading out/in page elements when those form elements change, no? – David Commented Sep 16, 2014 at 18:58
- That sounds about right, just not sure how to implement it. Where could I find more info about that? – Garrett Johnson Commented Sep 16, 2014 at 19:01
- I guess in the jQuery documentation? It's not really specific what you need "more info" about. Attaching handlers to form elements? Changing the visibility of page elements? Something else? jQuery's documentation contains examples for all of this. – David Commented Sep 16, 2014 at 19:02
5 Answers
Reset to default 4A few pointers:
jsFiddle Demo
(1) I used position:absolute so all DIVs would be located on top of each other. See here for more info about absolute/relative/fixed/static positioning
(2) Use the change() event to detect when the SELECT value has changed
(3) fadeOut ALL DIVs with class="ques", then fadeIn the one that you wish to display next
(4) Each DIV and each SELECT have a unique, numbered ID attribute. We get the number of the SELECT that just changed, turn that ID from a string into an integer, and add one. Now we know which DIV to fadeIn()
(5) The initial $('#q1').show(); just displays the first question, to get things started, because in the CSS we used .ques{display:none;} to hide all the questions, including the first one.
jsFiddle Demo
HTML:
<div id="bubble">
<div id="contain">
<div id="q1" class="ques">
<p>Which is your favorite color?</p>
<select id="q-1">
<option>Select Color</option>
<option>Blue</option>
<option>Red</option>
<option>Green</option>
<option>Orange</option>
</select>
</div><!-- #q1 -->
<div id="q2" class="ques">
<p>Which is your favorite car?</p>
<select id="q-2">
<option>Select Car</option>
<option>Ford</option>
<option>Chev</option>
<option>Kia</option>
<option>Peugot</option>
</select>
</div><!-- #q2 -->
</div><!-- #contain -->
</div><!-- #bubble -->
jQuery:
$('#q1').show();
$('select').change(function(){
$('.ques').fadeOut(800);
var num = $(this).attr('id').split('-')[1];
var nxt = parseInt(num) + 1;
$('#q'+nxt).fadeIn(800);
});
EDIT:
Thanks a lot. Is it possible to show a different select if they choose green instead of red?
$('select').change(function(){
$('.ques').fadeOut(800);
var ans = $(this).val();
if (ans == 'Green'){
$('#q15').fadeIn(800);
}else if (ans == 'Red'){
$('#q12').fadeIn(800);
}
});
Revised jsFiddle
You will need javascript to acplish this. I have added a fiddle to explain how it can be done.
Check the fiddle using the following url : http://jsfiddle/hec4otv3/17/
HTML Code:
<div id="step1">
<div class="bubble">
<div class="contain">
<p>Which is your favorite color?</p>
<select id='color'>
<option value="">Select Color</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>
</div>
after selecting answer, it should fade into a new question/code.
</div>
<div id="blue-step" class="hide">
<div class="bubble">
<div class="contain">
<p>Which is your favorite sub-color?</p>
<select id='color'>
<option>Select Color</option>
<option>dark Blue</option>
<option>light blue</option>
<option>sky blue</option>
<option>navy blue</option>
</select>
</div>
</div>
</div>
<div id="red-step" class="hide">
you choose red
</div>
<div id="green-step" class="hide">
you choose green
</div>
<div id="orange-step" class="hide">
you choose orange
</div>
Javascript:
window.shownextstep=function(){
var txt=document.getElementById('color').value;
document.getElementById('step1').style.display='none';
document.getElementById(txt+"-step").style.display='block';
}
var e=document.getElementById('color');
e.onchange=shownextstep;
CSS:
.bubble {
width:220px;
height:150px;
background:url("http://i.imgur./MBRmEEf.png")no-repeat;
background-position:center;
background-size:200px;
}
.contain {
padding: 10px 0 0 30px;
}
select {
margin-left:10px;
}
.hide{
display:none
}
Sounds like you should use JQuery animate http://api.jquery./animate/. To get the fade effect one of the properties you'll want to use is opacity. You might also want to use some easing in and out. You can then call the plete() function to load the next question.
yo can try this checking the value via jQuery. Instead of alert you can give jquery any mand you like.
$(document).ready(function(){
$('select').change(function(){
var selectVal = $(this).find(':selected').val();
if(selectVal == 'Green'){
alert(selectVal);
}
else if(selectVal == 'Blue'){
alert(selectVal)
}
else if(selectVal == 'Red'){
alert(selectVal)
}
else {
alert(selectVal)
}
});
});
http://jsfiddle/hmd0t5u5/1/
Here you have a full working simple three steps example, with no need to jQuery.
You just need to define the submit_form() function. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.
function shows_form_part(n){
var i = 1, p = document.getElementById("form_part"+1);
while (p !== null){
if (i === n){
p.style.display = "";
}
else{
p.style.display = "none";
}
i++;
p = document.getElementById("form_part"+i);
}
}
function submit_form() {
var sum = parseInt(document.getElementById("num1").value) +
parseInt(document.getElementById("num2").value) +
parseInt(document.getElementById("num3").value);
alert("Your result is: " + sum);
}<body onload="shows_form_part(1)">
<form>
<div id="form_part1">
Part 1<br>
<select id="num1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<!--form elements 1-->
<button type="button" onclick="shows_form_part(2)">»</button>
</div>
<div id="form_part2">
Part 2<br>
<input type="number" value="2" id="num2"><br>
<!--form elements 2-->
<button type="button" onclick="shows_form_part(1)">«</button>
<button type="button" onclick="shows_form_part(3)">»</button>
</div>
<div id="form_part3">
Part 3<br>
<!--form elements 3-->
<input type="number" value="3" id="num3"><br>
<button type="button" onclick="shows_form_part(2)">«</button>
<button type="button" onclick="submit_form()">Sum</button>
</div>
</form>
</body>