<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 ----------> <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-left: -10px;"> <div style="text-align: center;text-transform: uppercase;margin-top: 23px;border-top: 2px solid #DDDCDC;position:relative;"> <span style="background-color: #fff;position: absolute;top: -11px;left:47%;padding: 0px 10px;">or</span> </div> <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'>Create Password<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> </table> <center> <div style="margin: 0px 0 0 0px;"> <div style="float: left; margin: 0px 0px 16px 0px; width: 100%;"> <div style="float: left;"> <input type="submit" value="Submit" alt="Log In" style=" background-color: #FF9934; width:245px; height:30px; border: 1px solid rgb(236, 162, 27); border-radius:2px; margin-left:90px; color: white; font-size: 15px;" /> </div> </div> </center> </form> </div> </div>

var enrollType; $(document).ready(function() { loadCountryCode() $('#name').show() $(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() { 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){ } }); }