multistep form - toggle between styled radio buttons - html

Question

i have built a multi step form that works , but it is not very "elegant" coded,
so i am asking
for your advice to make it more efficient ,
i have placed here only 2 steps out of 3 because the first step - email name etc', is not relevant for my question:
in each step 2 and 3 there are 2 styled radio button yes and no for the user to select,
in each step i need to toggle between check and uncheck styled images and of course prevnt that both
yes and no check images will show at the same time.
i know that the default/not styled radio buttons behavior prevents two checked buttons at the same time- can i use it here to save some lines of code?
the html(index.php)
<form method="post" id="userForm" action="process_form.php">
<fieldset class="formFieldset">
<div id="second_step" class="vanish">
<div class="form slide_two check_wrap">
<div class="quizyes quizbtn">
<img class="uncheck_pic pic one" src="images/check_not.png">
<img class="check_pic pic agree" src="images/check_bgfull.png" style="display: none;">
<h1 class="quizText">yes</h1>
</div>
<div class="quizno quizbtn">
<img class="uncheck_pic pic two" src="images/check_not.png">
<img class="check_pic not not_agree pic first_not" src="images/check_bgfull.png" style="display: none;">
<h1 class="quizText">no</h1>
</div>
<div id="feedback_wrap"><div class="feedback"></div></div>
<div id="submit_wrap" >
<input type="radio" class="yep decideOne" val ="1" name="yep" style="display: none;"/>
<input type="radio" class="nope decideOne" val ="2" name="nope" style="display: none;"/>
</div>
</div></div>
<!-- end of second step -->
<!-- third step -->
<div id="third_step" class="vanish">
<div class="form check_wrap">
<div class="quizyes quizbtn">
<img class="uncheck_pic pic one" src="images/check_not.png">
<img class="check_pic pic agree" src="images/check_bgfull.png" style="display: none;">
<h1 class="quizText">yes</h1>
</div>
<div class="quizno quizbtn">
<img class="uncheck_pic pic two" src="images/check_not.png">
<img class="check_pic not not_agree pic second_not" src="images/check_bgfull.png" style="display: none;">
<h1 class="quizText">no</h1>
</div>
<div id="feedback_wrap"><div class="feedback"></div></div>
<div id="submit_wrap">
<input type="radio" class="yep decideTwo" val ="1" name="yep" style="display: none;"/>
<input type="radio" class="nope decideTwo" val ="2" name="nope" style="display: none;"/>
</div>
</div></div>
<!-- end of third step -->
</fieldset>
<div id="submit_wrap">
<input class="submit btn" type="button" name="submit_all" id="submit_all" value="" />
</div>
</form>
the script
$(document).ready(function(){
$(function() {
$('.check_pic').hide();
//original field values
var isDecide= false;
//toggle images and set values
$('.pic').on('click', function(event) {
if ($(this).hasClass('uncheck_pic') && $(this).hasClass('one') ){
$(".yep").val('agree');
$(this).hide();
$(this).siblings('.check_pic').show();
$(".not").hide();
$(".two").show();
}
else if ($(this).hasClass('uncheck_pic') && $(this).hasClass('two') ){
var isDecide = $(".nope").val('notagree');
$(this).hide();
$(this).siblings('.check_pic').show();
$('.agree').hide();
$(".one").show();
}
else if ($(this).hasClass('check_pic') && $(this).hasClass('agree') ){
$(this).hide();
$(this).siblings('.uncheck_pic').show();
}
else if ($(this).hasClass('check_pic') && $(this).hasClass('not_agree') ){
$(this).hide();
$(this).siblings('.uncheck_pic').show();
}
});
// start the submit thing
$('#submit_all').click(function() {
if($('#second_step').is(":visible")) {
$('.decideOne').removeClass('error valid');
// prevent empty boxes and display a message
if($('.one').is(":visible") && $('.two').is(":visible")) {
$('.feedback').text('please select one').show();
return false;
}
// case the user selects yes
if($('.agree').is(":visible")) {
$('.feedback').text('thank you for selecting yes').show();
var isDecide = $(".yep").val();
var name = $("#firstname").val();
var phone = $("#phone").val();
var email = $("#email").val();
var dataString = 'user-details:name=' + name + ' phone=' + phone + ' email=' + email + ' decide=' + isDecide ;
$.ajax({
type : "POST",
url : "/",
data: dataString,
success : function(data) {
console.log('data');
$('#second_step').delay(1000).fadeOut(600, function() {
$('#first_step').fadeIn(400);
$('.feedback').hide();
});
}
});
}
// case the user selects no
if($('.first_not').is(":visible")) {
$(".yep").val();
$(".nope").val();
$('#second_step').fadeOut(600, function() {
$('#third_step').fadeIn(600);
$('.feedback').hide();
});
}
return false;
// end second step
} else if($('#third_step').is(":visible")) {
$('.third_input').removeClass('error').removeClass('valid');
// prevent empty boxes and display a message
if($('.quizyes .one').is(":visible") && $('.quizno .two').is(":visible")) {
$('.feedback').text('please select one').show();
return false;
}
// if decide yes then submit
if($('.agree').is(":visible")) {
$('.feedback').text('thank you for selecting yes').show();
var isDecide = $(".yep").val();
var name = $("#firstname").val();
var phone = $("#phone").val();
var email = $("#email").val();
var dataString = 'user-details:name=' + name + ' phone=' + phone + ' email=' + email + ' decide=' + isDecide ;
$.ajax({
type : "POST",
url : "/",
data: dataString,
success : function(data) {
console.log('data');
$('#second_step').delay(1000).fadeOut(600, function() {
$('#first_step').fadeIn(400);
$('.feedback').hide();
});
}
});//end ajax
return true;
}//end if agree is visible
// if decide no then send message and quit
if($(".second_not").is(":visible")) {
$(".nope").val("no");
$('.feedback').text('too bad bye bye').show();
$('#third_step').fadeOut(3000, function() {
$('#first_step').fadeIn(600);
$('.feedback').hide();
});
}
}
// end third step
});
//end submit_all
}) // general function
}); // document ready

Answer 1

Dude my wish to you take a look on good js library - knockout to represants all that kind show, hide functunality and forms inputs, checkbox, radiobutton modifications.

Answer 2

If you're using images to style your radiobuttons I would suggest combining the images into a Sprite and just using css to move the background-position of the image using the input[type=radio]:checked selector. No javascript necessary.
For Example - you combine your two images into a single image that is 100px wide, each individual image being 50px wide. And then style the checkbox...
input[type=radio].myCustomRadioButton {
background: url(myRadioButtonSprite.png) 0 0;
}
input[type=radio].myCustomRadioButton:checked {
background-position: -50px 0;
}
Assuming your images are lined up horizontally in your sprite, this would move the background image of the radiobutton left 50px to display the checked-image, when the radiobutton is checked.
As a side note, doing this is going to require unsetting some of the browser styling that is going to occur automatically. A good reset for form elements is to start with these styles.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

Answer 3

Keep in mind if you need to support Internet Explorer versions less than 9, the :checked pseudo-selector isn't available in pure CSS and you may need to resort to some scripting.
Listen for the change event on your custom radio buttons and update a parent element based on that.
Here's an example.
The <input> has position: absolute so the clip property can be applied to hide it and it does not affect the content box of its parent, which has relative position to contain it.
I used background-color but you could swap this in for your image urls or change the background-position of a sprite as suggested in rob-gordon's answer.
You can still add visible label text inside the label as you see in the second set of radio inputs.