"myforms"
Bootstrap 3.3.0 Snippet by prabhatmech

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
<div id="signupbox" style=" margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign Up</div>
<div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="/accounts/login/">Sign In</a></div>
</div>
<div class="panel-body" >
<form method="post" action=".">
<input type='hidden' name='csrfmiddlewaretoken' value='XFe2rTYl9WOpV8U6X5CfbIuOZOELJ97S' />
<form class="form-horizontal" method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value='XFe2rTYl9WOpV8U6X5CfbIuOZOELJ97S' />
<div id="div_id_select" class="form-group required">
<label for="id_select" class="control-label col-md-4 requiredField"> Select<span class="asteriskField">*</span> </label>
<div class="controls col-md-8 " style="margin-bottom: 10px">
<label class="radio-inline"><input type="radio" checked="checked" name="select" id="id_select_1" value="S" style="margin-bottom: 10px">Knowledge Seeker</label>
<label class="radio-inline"> <input type="radio" name="select" id="id_select_2" value="P" style="margin-bottom: 10px">Knowledge Provider </label>
</div>
</div>
<div id="div_id_As" class="form-group required">
<label for="id_As" class="control-label col-md-4 requiredField">As<span class="asteriskField">*</span> </label>
<div class="controls col-md-8 " style="margin-bottom: 10px">
<label class="radio-inline"> <input type="radio" name="As" id="id_As_1" value="I" style="margin-bottom: 10px">Individual </label>
<label class="radio-inline"> <input type="radio" name="As" id="id_As_2" value="CI" style="margin-bottom: 10px">Company/Institute </label>
</div>
</div>
<div id="div_id_username" class="form-group required">
<label for="id_username" class="control-label col-md-4 requiredField"> Username<span class="asteriskField">*</span> </label>
<div class="controls col-md-8 ">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
var enrollType;
// $("#div_id_As").hide();
$("input[name='As']").change(function() {
memberType = $("input[name='select']:checked").val();
providerType = $("input[name='As']:checked").val();
toggleIndividInfo();
});
$("input[name='select']").change(function() {
memberType = $("input[name='select']:checked").val();
toggleIndividInfo();
toggleLearnerTrainer();
});
function toggleLearnerTrainer() {
if (memberType == 'P' || enrollType=='company') {
$("#cityField").hide();
$("#providerType").show();
$(".provider").show();
$(".locationField").show();
if(enrollType=='INSTITUTE'){
$(".individ").hide();
}
}
else {
$("#providerType").hide();
$(".provider").hide();
$('#name').show();
$("#cityField").hide();
$(".locationField").show();
$("#instituteName").hide();
$("#cityField").show();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

What would be the proper way to adjust the width, if I wanted to make the popup wider?

newguy () - 6 years ago - Reply 0