html/jquery multiple step form - go to next step depending on which radio button was selected -
i'm new jquery , need form, single form broken in multiple steps (7). in first step (see code below) have 5 radio buttons: school, friends, home , health, , activity. i'm trying achieve if user selects radio button school , clicks "next" button show div containing questions related school, if chooses friends show div friends related questions, , on... subject specific divs hidden on document load.
please nice, newbie here. on appreciated :)
<div class="form"> <h2>what interests you? (select one)</h2> <label class="val" style="width:250px;color:red;">please select one</label><br> <input type="radio" id="school" name="path" value="school" /> school <br> <input type="radio" id="home" name="path" value="home" /> home <br> <input type="radio" id="friends" name="path" value="friends" /> friends <br> <input type="radio" id="activities" name="path" value="activities" /> activities <br> <input type="radio" id="health" name="path" value="health" /> health <br> </div> <div class="clear"></div><!-- /clearfix --> <button class="btn btn-primary" type="submit" name="submit_first" id="submit_first" value="">next</button> </div> <!-- clearfix --><div class="clear"></div><!-- /clearfix --> <div id="step1-1"></div> <div id="step1-2"></div> <div id="step1-3"></div> <div id="step1-4"></div> <div id="step1-5"></div>
try on click of simple button
var val = $('input:radio[name=path]:checked').val(); switch (val ) { case 'school': $('#step1-1').show(); break; case 'home': $('#step1-2').show(); break; case 'friends': $('#step1-3').show(); break; case 'activities': $('#step1-4').show(); break; case 'health': $('#step1-5').show(); break; default: }
Comments
Post a Comment