Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"tryreg"
Bootstrap 3.3.0 Snippet by
prabhatmech
3.3.0
jQuery
Preview
HTML
JS
View Full Screen
Fork
Fork this
2.3K
 
0 Fav
Post to Facebook
Tweet this
<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){ // } // }); //}
Related:
See More
Free Template
Argon Design System
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76