I'm making a modal with bootstrap.
I'm new to Web Engineering and need some help.
My modal is supposed to have two dynamic tabs, one for Sign In, and one for Sign Up. I wanted to use two concepts in one task so I'm using dynamic tabs along with modal.
Please let me know what's wrong in it. The sign in tab works fine, but when I click on sign up, it shows the sign up credentials below the fixated div and items of sign in above, rather than overwriting it like it happens in dynamic tabs.
It looks like this: Modal Image
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-dialog">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
</ul>
</div>
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar" style="height:200px; width:200px; align:center; margin-left: 220px">
</div>
<div class="modal-body" style="padding:40px 50px;">
<div class="tab-pane fade active in" id="signin">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<!-- Login button-->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</div></div>
</form>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
<!-- MODAL SIGN UP-->
<div class="tab-pane fade" id="signup">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="humancheck">Humanity Check:</label>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>
you're putting the signup div inside of the signing div :
<div class="modal-body" style="padding:40px 50px;">
<div class="tab-pane fade" id="signup">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked="">Remember me</label>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="humancheck">Humanity Check:</label>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</form></div><div class="tab-pane fade active in" id="signin">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked="">Remember me</label>
</div>
<!-- Login button-->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</div></div>
</form>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
<!-- MODAL SIGN UP-->
</div>
</div>
you need to put the signup div outside of the signing div :
you must provide "show" or "hide" parameter inside modal function.
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal("show");
});
});
</script>
// optional
hide modal on button click
$("#myModal").modal("hide");
Related
I have a form that looks like this:
I want every input to be mandatory and requires user to enter before proceeding to the next tab,by click the next button. I implemented the jquery validation plugin and it looks like below:
Code:
<form method="POST" action="{{ route('register') }}" id="register-form">
#csrf
<div class="tab-content" id="myTabContent">
<!-- Registration Tab-->
<div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required id="email" placeholder="Email">
</div>
<div class="form-group col-md-12">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" required id="password">
</div>
<div class="form-group col-md-12">
<label for="password-confirm">Confirm Password</label>
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button" id="next-btn">Next</a>
</div>
</div>
<!-- Information Tab -->
<div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
<!-- Personal Particulars -->
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
<div class="form-row">
<div class="form-group col-md-6">
<label for="full_name">Full Name (as per NRIC)</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
</div>
<div class="form-group col-md-6">
<label for="nric">NRIC Number</label>
<input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="address_1">Address Line 1</label>
<input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 2</label>
<input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
</div>
<div class="form-group col-md-12">
<label for="address_1">Address Line 3</label>
<input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
</div>
<div class="form-group col-md-6">
<label for="city">City</label>
<input type="text" name="city" id="city" class="form-control" placeholder="City">
</div>
<div class="form-group col-md-12">
<label for="state">State</label>
<select name="state" id="state" class="form-control">
<option disabled selected>Choose your state..</option>
#foreach($states as $state)
<option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contact_number_home">Contact Number (Home)</label>
<input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
</div>
<div class="form-group col-md-6">
<label for="contact_number_mobile">Contact Number (Mobile)</label>
<input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
</div>
</div>
<div class="form-row">
<div class="col-12">
<label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
<label class="form-check-label" for="existing_customer">No</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="existing_customer" value="1">
<label class="form-check-label" for="existing_customer">Yes</label>
</div>
</div>
</div>
<!-- Next Button -->
<div class="text-right">
<!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
<a class="btn btn-secondary next-button">Next</a>
</div>
</div>
<div class="tab-pane fade" id="agreement" role="tabpanel" aria-labelledby="agreement-tab">
<h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Agreement</h5>
<!-- Registration Agreement -->
...............
<div class="row">
<div class="col-12 col-md-8 offset-md-2 pl-3 pr-3 pt-2 mb-0">
<canvas class="display-block signature-pad" style="touch-action: none;"></canvas>
<p id="signatureError" style="color: red; display: none;">Please provide your signature.</p>
<div class="p-1 text-right">
<button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;">Reset</button>
<button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;">Save</button>
</div>
<input type="hidden" name="signature" id="signatureInput">
</div>
</div>
<div class="row">
<div class="col-12 mb-0 pt-2">
<!-- Submit Button -->
<div class="text-right">
<input type="hidden" name="registrationFor" value="customer">
<button type="submit" class="bjsh-btn-gold text-right">Sign Up</button>
</div>
</div>
</div>
// Validate each input tab before moving to the next tab
$(document).ready(function() {
$("#register-form").validate({
rules: {
email: "required",
password:"required",
password_confirmation:"required"
},
messages: {
email: "Please enter an email",
password: "Please enter a password",
password_confirmation: "Please confirm your password"
}
})
$('#next-btn').on('click',function() {
$("#register-form").valid();
});
});
I checked my console and there is no error and I implemented the correct library, however I can still proceed to the next button. Why is it not working?
actually error occurs but your form is redirecting to another page so add this
event.preventDefault();
before
$("#register-form").valid();
I have the following fiddle:
https://jsfiddle.net/b3x6ou4k/
When I change the CSS link from Bootstrap 3 to Bootstrap 4 (using https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css as the CSS), the circle buttons change to square.
Why does the CSS for circular buttons:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
not work in Bootstrap 4 and how do I keep this style:
rather than this style:
when upgrading from 3 to 4?
You'll want to consult the migration docs, but this seems to approximate what you had before: https://jsfiddle.net/xrcu92bo/1/
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step col-xs-3">
1
<p><small>Shipper</small></p>
</div>
<div class="stepwizard-step col-xs-3">
2
<p><small>Destination</small></p>
</div>
<div class="stepwizard-step col-xs-3">
3
<p><small>Schedule</small></p>
</div>
<div class="stepwizard-step col-xs-3">
4
<p><small>Cargo</small></p>
</div>
</div>
</div>
<form role="form">
<div class="panel panel-primary setup-content" id="step-1">
<div class="panel-heading">
<h3 class="panel-title">Shipper</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-2">
<div class="panel-heading">
<h3 class="panel-title">Destination</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-3">
<div class="panel-heading">
<h3 class="panel-title">Schedule</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
</div>
</div>
<div class="panel panel-primary setup-content" id="step-4">
<div class="panel-heading">
<h3 class="panel-title">Cargo</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-success pull-right" type="submit">Finish!</button>
</div>
</div>
</form>
</div>
Basically, .btn-default doesn't exist in Bootstrap 4; the closest you get is .btn-light. I also added the .border class, since the light button doesn't have a lot of contrast with your background.
Also, the disabled property doesn't actually do anything on an anchor tag - you'll want to use the disabled class if you want to prevent users from clicking on "disabled" steps.
I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?
I'm using validation on fields, which need to be entered before a user is to log in. However, I'm encountering a problem. I'm using the required tags within the html input tags but when a user clicks on the login button, there is no message telling them that the fields are required.
I have been researching on w3Schools
Which states the use of required will proc a message when the field is empty, if the user tries to click submit without the user entering the required fields.
Any suggestions?
<div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<br />
<h3 style='color: #fff;' class="register-heading">Log in to view your <span style='font-weight: bold;'>dashboard</span></h3>
<div class="row register-form">
<div class="col-md-12">
<div class="form-group">
<input id="login-email" type="email" class="form-control" placeholder="Email *" value="" required/>
</div>
</div>
<div class="form-group col-md-12">
<input id="login-password" type="password" class="form-control" placeholder="Password *" value="" required />
</div>
<div class="col-md-2"></div>
<div class="col-md-6">
<input class="btnRegister pull-left" id="login-btn" type="submit" value="Login"/>
</div>
<div class="col-md-4"></div>
</div>
</div>
You're not using a <form> therefore, the button does not know where to 'submit' too. See this working example.
<form>
<div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<br />
<h3 style='color: #fff;' class="register-heading">Log in to view your <span style='font-weight: bold;'>dashboard</span></h3>
<div class="row register-form">
<div class="col-md-12">
<div class="form-group">
<input id="login-email" type="email" class="form-control" placeholder="Email *" value="" required/>
</div>
</div>
<div class="form-group col-md-12">
<input id="login-password" type="password" class="form-control" placeholder="Password *" value="" required />
</div>
<div class="col-md-2"></div>
<div class="col-md-6">
<input class="btnRegister pull-left" id="login-btn" type="submit" value="Login" />
</div>
<div class="col-md-4"></div>
</div>
</div>
</form>
For the required attribute to work, your input tags need to be within form tags:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<br />
<h3 style='color: #fff;' class="register-heading">Log in to view your <span style='font-weight: bold;'>dashboard</span></h3>
<div class="row register-form">
<form>
<div class="col-md-12">
<div class="form-group">
<input id="login-email" type="email" class="form-control" placeholder="Email *" value="" required/>
</div>
</div>
<div class="form-group col-md-12">
<input id="login-password" type="password" class="form-control" placeholder="Password *" value="" required />
</div>
<div class="col-md-2"></div>
<div class="col-md-6">
<input class="btnRegister pull-left" id="login-btn" type="submit" value="Login" />
</div>
<div class="col-md-4"></div>
</form>
</div>
</div>
I'm beginner for the Angular and try to create Angular 5 ,when i click the radio button show and hide div area.
,I created customer-1 and customer-2 radio button when i click the customer-2 radio button is it not working (shown 1st div),That one is normal html to working fine, but it's not work for angular 5 ,
anyone know how to put that one correctly in Angular5?
Thanks
html
<div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">SIGN UP</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="top-radio">
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1">
<label for="radio1">
customers-1
</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2">
<label for="radio2">
customers-2
</label>
</div>
</div>
<form class="fotm" id="cc_signup" style="display: none;" action="rfq.html">
<div class="frm-btm-mrg">
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Company name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Website" type="text">
</div>
<div class="form-group">
<input class="form-control contact-num" placeholder="Contact number" type="text">
</div>
<div class="checkbox">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign up</button>
</form>
<form class="fotm" id="nc_signup" action="rfq.html">
<div class="frm-btm-mrg-2">
<div class="form-group">
<input class="form-control" placeholder="User name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign ups</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Live code- stackblitz
javascript
<script>
function changediv(divid){
$("#nc_signup").hide();
$("#cc_signup").hide();
$("#"+ divid).show();
}
</script>
function changediv(divid)
{
$("#nc_signup").hide();
$("#cc_signup").hide();
$("#"+ divid).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="modal fade cust-my-modal cust-my-modal-2" id="signup_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">SIGN UP</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="top-radio">
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio1" onClick="changediv('nc_signup')" checked="checked" value="option1">
<label for="radio1">
customers-1
</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio2" onClick="changediv('cc_signup')" value="option2">
<label for="radio2">
customers-2
</label>
</div>
</div>
<form class="fotm" id="cc_signup" style="display: none;" action="rfq.html">
<div class="frm-btm-mrg">
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Company name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Website" type="text">
</div>
<div class="form-group">
<input class="form-control contact-num" placeholder="Contact number" type="text">
</div>
<div class="checkbox">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign up</button>
</form>
<form class="fotm" id="nc_signup" action="rfq.html">
<div class="frm-btm-mrg-2">
<div class="form-group">
<input class="form-control" placeholder="User name" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Email id" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="password">
</div>
<div class="form-group">
<input class="form-control" placeholder="Re-enter password" type="password">
</div>
<div class="checkbox">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
I agree terms & conditions
</label>
</div>
</div>
<button type="submit" class="btn">Sign ups</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
The Angular way to do this is to put code in app.component.ts instead of in a script-tag with jquery selectors.
You should have two member variables in your class that are changed by a method in the component.ts-fil, and bind to that method by using (click) in the HTML. To bind to variables in the code, use the [attr]-syntax.
You can take a look at my fork of your code here https://stackblitz.com/edit/angular-ktt3ri