<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <input type="hidden" name="courseId" value="" id="courseId" /> <table border="0" cellpadding="0" cellspacing="10" class=" " style="width: 460px; padding:15px 0px 7px 0px; margin-top: 50px; margin-left: -10px;"> <input type="hidden" name="from" value="index" id="from" /> <tr class="inputWidth10" id="pleaseSelect" style="height: 20px;"> <td class="label" style="width: 125px;"> <label for='type' style="display: block; position: relative; top: 0px;">Please select<span class="star">* </span> </label> </td> <td class='' id="typeInfo"> <p class="marginBtm10" > <input type="radio" name="type" value="LEARNER" checked="checked" style="vertical-align: middle; width: 13px; height: 13px" /> I want to Hire Professionals </p> <p class="marginBtm10"> <input type="radio" name="type" value="TRAINER" style="vertical-align: middle; width: 13px; height: 13px" /> I am a Professional </p> </td> </tr> <tr id="providerType"> <td colspan="3"> <div style="background-color: #F9F9F9; margin-bottom: 10px; padding: 5px; width: 402px;"> <div class="marginBtm10"> <input type="radio" name="provider.type" value="INDIVIDUAL" checked="checked" style="vertical-align: middle; width: 13px; height: 13px" /> I am an Individual </div> <div> <input type="radio" name="provider.type" value="COMPANY" style="vertical-align: middle; width: 13px; height: 13px" /> I run a Business </div> </div> </td> </tr> <tr style="height: 35px;"> <td class="label" style="width: 55px"><label for='userRealName'>Name<span class="star">* </span></label></td> <td class='value '> <span id="name"> <input type="text" name='firstName' value="" placeholder="First Name" style="height: 25px; width: 126px; padding: 2px; border: 1px solid #afafaf;" /> <input type="text" name='lastName' value="" placeholder="Last Name" style="height: 25px; width: 127px; padding: 2px; border: 1px solid #afafaf;" /> </span> <span id="instituteName"> <input type="text" name='instiName' class="provider" placeholder="Your Business Name." value="" style="width: 262px; height: 25px; padding: 2px; border: 1px solid #afafaf;" /> </span> </td> </tr> <tr style="height: 35px;"> <td class="label"><label for='username'>Email<span class="star">* </span></label></td> <td class='value '><input type="text" name='username' placeholder="Your email id" value="" style="width: 262px; height: 25px; padding: 2px; border: 1px solid #afafaf;" /></td> </tr> <tr style="height: 35px;"> <td class="label" style="width: 107px;"><label for='password'>CreatePassword<span class="star">* </span></label></td> <td class='value '><input type="password" name='password' value="" style="width: 262px; height: 25px; padding: 2px; border: 1px solid #afafaf;" /></td> </tr> <tr style="height: 35px;" class="provider"> <td class="label"><label for='enabled'>Phone<span class="star">* </span></label></td> <td class='value'><select name="countryId" id="countryId" style="width: 93px; height: 31px; padding:2px;border:1px solid #afafaf;margin-right: 5px;" ><option value="">- Select -</option></select> <span id="result"> </span> <input class="" type="text" name="MOBILE" placeholder="Your phone number" value="" title="" style="width: 161px; height: 25px; padding: 2px; border: 1px solid #afafaf;" /> </td> </tr> <tr style="height: 35px;" class="provider locationField" id="pincodeBlock"> <td class="label"><label for='enabled'>Location<span class="star">* </span></label></td> <td class='value'><input class="" type="text" id="pincode" name="pin" value="" placeholder="Your pincode or area name" title="" style="width: 262px; height: 25px; padding: 2px; border: 1px solid #afafaf;" /> </td> </tr> <tr style="height: 35px;" class="provider" id="cityName" style="display:none"> <td class="label"><label for='enabled'>City<span class="star">* </span></label></td> <td class='value'><input class="" type="text" placeholder="City Name" value="" name="cityName" title="" style="width: 262px; height: 25px; padding: 2px; border: 1px solid #afafaf;" /> </td> </tr> <tr class="inputWidth10 provider individ" style="height: 35px;"> <td class="label" style="width: 125px;"><label for='type' style="display: block; position: relative; top: 0px;">Gender<span class="star">* </span></label></td> <td class=''> <p class="marginBtm10" style="display: inline;"> <input type="radio" name="trainer.gender" value="MALE" style="vertical-align: middle; width: 13px; height: 13px" /> Male </p> <p class="marginBtm20" style="display: inline; margin-left: 30px;"> <input type="radio" name="trainer.gender" value="FEMALE" style="vertical-align: middle; width: 13px; height: 13px" /> Female </p> </td> </tr> <tr id="cityField" style="height: 35px;"> <td class="label"><label for='enabled'>City<span class="star">* </span></label></td> <td class='value '> <input class="" type="text" id="city2" name="city" value="Noida" title="" style="width: 262px; height: 25px; padding: 2px; border: 1px solid #afafaf;" /> </td> </tr> </table> </div>

$(document).ready(function() { // loadCountryCode() //$('#name').show(); var enrollType; $("#providerType").hide(); //$(document).on("change","#countryId", function() { // toggleLocationCountry() //}); //toggleLocationCountry(); // memberType = $("input[name='type']:checked").val(); // providerType = $("input[name='provider.type']:checked").val(); // if(typeof hideMemberType !== 'undefined' && hideMemberType==true){ // $("#typeInfo").hide() // } $("input[name='provider.type']").change(function() { memberType = $("input[name='type']:checked").val(); providerType = $("input[name='provider.type']:checked").val(); toggleIndividInfo(); }); // register for the change event $("input[name='type']").change(function() { memberType = $("input[name='type']:checked").val(); toggleIndividInfo(); toggleLearnerTrainer(); // toggleIndividInfo(); }); // set the right state on load of page // toggleLearnerTrainer(); // toggleIndividInfo(); //check url has _type=TRAINER is their fire a event // if(window.location.href.indexOf('_type=TRAINER')>-1){ // callProviderEventTracking('TRAINER_CLICK'); // } //}); // the function for toggling function toggleLearnerTrainer() { //alert(memberType ) //alert(enrollType) if (memberType == 'TRAINER' || enrollType=='INSTITUTE') { $("#cityField").hide(); $("#providerType").show(); $(".provider").show(); $(".locationField").show(); toggleLocationCountry(); if(enrollType=='INSTITUTE'){ $(".individ").hide(); } //call event for provider selection // callProviderEventTracking('TRAINER_CLICK'); } else { $("#providerType").hide(); $(".provider").hide() $('#name').show() $("#cityField").hide(); $(".locationField").show(); $("#instituteName").hide() $("#cityField").show(); } } function toggleIndividInfo(){ if(((typeof memberType!=='undefined' && memberType == 'TRAINER')||enrollType=='INSTITUTE') && providerType=='INDIVIDUAL'){ $("#instituteName").hide() $(".individ").show(); $('#name').show() } else if((typeof memberType!=='undefined' && memberType == 'TRAINER')|| enrollType=='INSTITUTE'){ $('#name').hide() $("#instituteName").show() $(".individ").hide(); } } }); //function loadCountryCode(){ //alert(branchId); // $("#countryId").hide(); // $("#result").html('Retrieving...'); // $.ajax({ // type: "POST", // url: "/locality/getCountryCodeList", // success: function(msg){ // if (msg != ''){ // msg = "" + msg; // //alert(msg); // $("#countryId").html(msg).show(); // $("#result").html(''); // toggleLocationCountry(); // } // else{ // $("#result").html('<em>No item result</em>'); // } // } // }); // return false; ////} //function toggleLocationCountry(){ // var countryCode=$( "#countryId option:selected" ).text(); // if(countryCode.search('India')==0){ // $("#cityName").hide(); // $("#pincodeBlock").show(); // }else{ // $("#cityName").show(); // $("#pincodeBlock").hide(); // } //} //call event tracking for provider //function callProviderEventTracking(eventFor){ // console.log('provider tracking '); // $.ajax({ // type: "POST", // data:{eventFor:eventFor}, // url: "/register/providerSelectedEventTracking", //success : function(msg){ // } // }); //}