0

I successfully setup a 4 steps php form from this source. Only I'm having trouble with one task: On page one I inserted a radio button. Depending on the selection ("Yes" or "No") Step 3 should be skipped.

I have been trying for 2 hours and searched the internet - Java Script is just not my strength. How could I achieve it? Below the JavaScript I'm using:

<script type="text/javascript">
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
$(".next").click(function(){
if(current=='2' && $('input[name="Guest_sel"]:checked').val()=='No') {
/* HERE I DON'T KNOW WHAT TO PUT. THE ALERT COMES AT THE RIGHT POINT AFTER STEP 2 IF I SELECTED "NO" FOR "Guest_sel". */
alert("Test");
}
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
// Change progress bar action
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");     
}
});
</script>

In line 6 I already set the correct if statement (if(current=='2' && $('input[name="Guest_sel"]:checked').val()=='No')). But what I have to put inside the if statement?

My thought is all the steps should have a number from 1-4. And if current_step = $(this).parent() is "1" for example, next_step should be "2" and so on. So I tried current_step = $(this).parent() + 1; and things like that inside the if statement, but none of it worked. I also tried to output any of the variables above in the alert to understand what's stored in there, but only got "undefined" variables. JavaScript drives me crazy. :-(

Any ideas what to put inside that if statement to make it skip Step 3 in case the radio button "Guest_sel"="No"? Thank you so much guys!

Steve Pony
  • 63
  • 6
  • `this = $(this).parent().next();` add it inside the brakets, that should make it believe it's on step3, so it will show step 4 instead of 3 – LordNeo Feb 09 '17 at 16:36
  • Thanks LordNeo! Unfortunately that makes the whole thing not working anymore. Which is weird and I experienced it before as well: If I insert that line into the if statement - even if the condition is not positive (nothing or "Yes" selected) the whole thing doesn't work anymore. Can't even continue from Step 1 to Step 2. No matter what. No idea why? – Steve Pony Feb 09 '17 at 16:43
  • try to put your code into a snippet or a jsfiddle or codepen, so we can debug it better. Likewise, the console should be giving you some errors about it. – LordNeo Feb 09 '17 at 16:44
  • Console says *ReferenceError: invalid assignment left-hand side*. Will try the JSFiddle/Codepen and post again, never did though. Thanks for the advice! – Steve Pony Feb 09 '17 at 16:51
  • Just created a jsfiddle: http://jsfiddle.net/gkxvLs9u/2/ – Steve Pony Feb 10 '17 at 07:09

1 Answers1

1

OK, I figured it out. Took me a while, but thanks for the tipp with JSFiddle. Working file is here: http://jsfiddle.net/gkxvLs9u/3/

next_step = $(this).parent().next().next() did the trick:

$(".next").click(function(){
current_step = $(this).parent();
if(current=='2' && $('input[name="Guest_sel"]:checked').val()=='No') {
next_step = $(this).parent().next().next();
++current;
} else {
next_step = $(this).parent().next();
}
next_step.show();
current_step.hide();
setProgressBar(++current);
});
Steve Pony
  • 63
  • 6