The page I’m working with is here:
http://harrisonfjord.com/survey/index.html
When you click on an object in each step, the “alt” tag of the image map region on which you clicked is being saved as a variable answer(current question number).
The code is here (ignore the comments, I’ve just put them in so I know what the hell I’m doing!):
$(window).load(function(){
//#shape functions
$('#shape area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
} //.hover allows 2 function - first is mouse on, second is mouse off
); //End #shape .hover function
$('#shape area').click( //.click only allows 1 function.
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer1 = $(this).attr("alt");
alert(answer1);
}
);//End #Shape .click function
//#height functions
$('#height area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #height .hover function
$('#height area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer2 = $(this).attr("alt");
alert(answer2 + answer1);
}
);//End #height .click function
//#world functions
$('#world area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #world .hover function
$('#world area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer3 = $(this).attr("alt");
alert(answer3);
}
);//End #world .click function
}); //End (window) onLoad function
As you can see, I’m creating an alert for each variable just so I can see that it’s working when I click. However, after I press “next”, the variable seems to erase itself. As you can see, in the second step, I’m alerting (answer1 + answer2), yet nothing comes up. Further, if you check the html code for “step 4”, you’ll see that instead of images I’m running a simple document.write script:
<h3>
<script type="text/javascript">
document.write(answer1);
</script>
</h3>
yet, again, nothing displays. Why are my variables not persisting through the whole jquery survey?
Excuse the massive code below, but it might help resolve the issue – the entire .js code that runs the jquery survey steps, as well as the hover/click functions of each map.
(function($){
$(window).load(function(){
//#shape functions
$('#shape area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
} //.hover allows 2 function - first is mouse on, second is mouse off
); //End #shape .hover function
$('#shape area').click( //.click only allows 1 function.
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer1 = $(this).attr("alt");
alert(answer1);
}
);//End #Shape .click function
//#height functions
$('#height area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #height .hover function
$('#height area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer2 = $(this).attr("alt");
alert(answer2 + answer1);
}
);//End #height .click function
//#world functions
$('#world area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #world .hover function
$('#world area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer3 = $(this).attr("alt");
alert(answer3);
}
);//End #world .click function
// jQuery.extend merges contents of two or
// more objects together into the first object
//$.extend(useranswers,{
//answer1 : $("img.selected-region").attr('rel')
//});
//$.cookie('survery',
//JSON.stringify(useranswers),
//{ expires: 7, path: '/', domain: '<your_domain_name>' }
//);
}); //End (window) onLoad function
$.fn.smartWizard = function(options) {
var defaults = {
selectedStep: 0, // Selected Step, 0 = first step
errorSteps:[], // Array Steps with errors
enableAll:false, // Enable All Steps, true/false
animation:true, // Animation Effect on navigation, true/false
validatorFunc:function(){return true;} // Step validation function, Step index will be passed
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var wizcurrent = 0;
var steps = $("ul > li > a", obj);
// Apply Default Style to Steps
applyCSS($(steps, obj),"wiz-anc-default");
// Hide All Steps on load
hideAllSteps();
$(steps, obj).bind("click", function(e){
e.preventDefault();
var isDone = $(this, obj).attr("isDone");
if(isDone == 1){
var selIdx = steps.index(this);
applyCSS($(wizcurrent, obj),"wiz-anc-done");
selectStep(selIdx);
}
});
// activates steps up to the selected step
for(i=0;i<steps.length;i++){
if(i<=options.selectedStep || options.enableAll==true){
activateStep(i);
}
}
// highlight steps with errors
$.each(options.errorSteps, function(i, n){
//applyCSS(steps.eq(n),"wiz-anc-error");
setErrorStep(n)
});
selectStep(options.selectedStep);
//Next Navigation
$(".next", obj).bind("click", function(e){
e.preventDefault();
var curStepIdx = $(steps, obj).index(wizcurrent);
if(options.validatorFunc(curStepIdx)){
var nextStepIdx = curStepIdx+1;
applyCSS($(wizcurrent, obj),"wiz-anc-done");
selectStep(nextStepIdx);
}
});
//Back Navigation
$(".back", obj).bind("click", function(e){
e.preventDefault();
applyCSS($(wizcurrent, obj),"wiz-anc-done");
var prevIdx = $(steps, obj).index(wizcurrent)-1;
selectStep(prevIdx);
});
function selectStep(idx){
if(idx < steps.length && idx >= 0){
var selStepAnchor = $(steps, obj).eq(idx);
var selStepIdx =selStepAnchor.attr("href");
hideAllSteps();
selStepAnchor.attr("isDone","1");
if(options.animation==true){
$(selStepIdx, obj).fadeIn("fast");
}else{
$(selStepIdx, obj).show();
}
applyCSS($(selStepAnchor, obj),"wiz-anc-current");
wizcurrent = selStepAnchor;
}
}
function activateStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isDone","1");
applyCSS($(selStepAnchor, obj),"wiz-anc-done");
}
function setErrorStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isError","1");
$(selStepAnchor, obj).addClass("wiz-anc-error");
}
function unsetErrorStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isError","");
$(selStepAnchor, obj).removeClass("wiz-anc-error");
}
function hideAllSteps(){
$(steps, obj).each(function(){
$($(this, obj).attr("href"), obj).hide();
});
}
function applyCSS(elm,css){
$(elm, obj).removeClass("wiz-anc-default");
$(elm, obj).removeClass("wiz-anc-current");
$(elm, obj).removeClass("wiz-anc-done");
$(elm, obj).addClass(css);
}
});
};
})(jQuery);
Since you are defining the variables “var answer1” within a function, they’re only defined in the scope of this function. Try this:
Then loose the “var” within your click event functions.