i have created a radio button such that when user click any button some content is displayed in a div.
i have done the following code for it:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.cheque {
background: #ff0000;
}
.bank {
background: #228B22;
}
.cash {
background: #0000ff;
}
<div style="margin-top: 1%;" class="row">
<div class="col-md-12">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="payment-method">
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="bank">
Direct Bank Transfer </label>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cheque">
Cheque Payment </label>
<p></p>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cash" checked="">
Pay In Cash </label>
</div>
</div>
</div>
<div class="bank box">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</strong> so i am here</div>
<div class="cheque box">Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</div>
<div class="cash box">Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</div>
</div>
</div>
</div>
i have tried adding
> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
but no use
but when i select any radio button nothing is happening. can anyone please tell me what is wrong in my code. thanks in advance
Your are only missing the default show for the cash the rest is working fine.
$(document).ready(function() {
$(".cash").show();
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.cheque {
background: #ff0000;
}
.bank {
background: #228B22;
}
.cash {
background: #0000ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 1%;" class="row">
<div class="col-md-12">
<div style="background-color: #f5f5f5; border-radius: 10px;" class="col-md-12 border-1px">
<div class="payment-method">
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="bank">
Direct Bank Transfer </label>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cheque">
Cheque Payment </label>
<p></p>
</div>
</div>
<div class="form-group col-md-4">
<div class="radio">
<label>
<input type="radio" name="payment_type" value="cash" checked="">
Pay In Cash </label>
</div>
</div>
</div>
<div class="bank box">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</strong> so i am here</div>
<div class="cheque box">Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</div>
<div class="cash box">Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</div>
</div>
</div>
</div>
Related
I have a div which I want to show when specific radio options are selected. This div resides in a form and if a guest, who is a toddler, is attending (by specifying "yes" in the radio options") then this hidden div (guest__cot) should appear. Idea being is that I only want to showcase cot options if a toddler is attending.
I have got the div appearing successfully. However, if I then select no from the radio option, the div still remains visible (doesn't removeClass).
Steps to reproduce, in the demo:
Select "yes" for "Name 1 (Toddler)"
[.guest__cot div appears]
Now, for "Name 1 (Toddler)" select "no", the div still remains visible ($(".guest__cot").removeClass("guest__cot--visible"); isn't executing)
I essentially want to showcase .guest__cot if any toddler has "yes" selected, and to hide it if otherwise.
Demo:
(function($) {
$(".member__attendance-input.is_toddler").on('change', function() {
var $this = $(this);
var attendance_value = $this.val();
var showCotField = "show-cot-field";
if (attendance_value === "yes") {
$this.addClass(showCotField);
} else if ((attendance_value === "no")) {
$this.removeClass(showCotField);
}
if ($('.member__attendance-input').hasClass(showCotField)) {
$(".guest__cot").addClass("guest__cot--visible");
} else {
$(".guest__cot").removeClass("guest__cot--visible");
}
});
})(jQuery);
.rsvp {
padding: 60px 0;
}
form {
padding: 40px;
border: 1px solid #000000;
}
.input-label {
margin: 0 20px 0 0;
}
.member {
margin-bottom: 30px;
}
.member__name {
display: block;
margin-bottom: 15px;
}
.member__options {
margin-bottom: 20px;
}
.guest__cot{
opacity: 0;
height: 0;
margin: 0;
pointer-events: none;
}
.guest__cot--visible {
opacity: 1;
height: auto;
margin-top: 20px;
pointer-events: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="rsvp">
<div class="container">
<div class="row">
<div class="col-12">
<form>
<!-- member 1 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 1 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-0" type="radio" name="attending-0" value="yes" required />
<label class="input-label" for="attending-yes-0">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-0" type="radio" name="attending-0" value="no" required />
<label class="input-label" for="attending-no-0">No</label>
</div>
</div>
</div>
<!-- member 2 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 2 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-1" type="radio" name="attending-1" value="yes" required />
<label class="input-label" for="attending-yes-1">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-1" type="radio" name="attending-1" value="no" required />
<label class="input-label" for="attending-no-1">No</label>
</div>
</div>
</div>
<!-- member 3 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 3 (Adult)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-yes-2" type="radio" name="attending-2" value="yes" required />
<label class="input-label" for="attending-yes-2">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-no-2" type="radio" name="attending-2" value="no" required />
<label class="input-label" for="attending-no-2">No</label>
</div>
</div>
</div>
<div class="guest__cot">
Show this div if either toddler options are "yes"
</div>
</form>
</div>
</div>
</div>
</div>
You can use .filter(), .map() and .get() to get the values of the selected toddler inputs. Then you use .includes()
to check if any of the values is a 'yes'. Try this
(function($) {
var $toddlerInputs = $(".member__attendance-input.is_toddler").on('change', function() {
var values = $toddlerInputs.filter(':checked').map((i, el) => el.value).get();
if (values.includes('yes')) {
$(".guest__cot").show();
} else {
$(".guest__cot").hide();
}
});
})(jQuery);
.rsvp {
padding: 60px 0;
}
form {
padding: 40px;
border: 1px solid #000000;
}
.input-label {
margin: 0 20px 0 0;
}
.member {
margin-bottom: 30px;
}
.member__name {
display: block;
margin-bottom: 15px;
}
.member__options {
margin-bottom: 20px;
}
.guest__cot{
margin-top: 20px;
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="rsvp">
<div class="container">
<div class="row">
<div class="col-12">
<form>
<!-- member 1 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 1 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-0" type="radio" name="attending-0" value="yes" required />
<label class="input-label" for="attending-yes-0">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-0" type="radio" name="attending-0" value="no" required />
<label class="input-label" for="attending-no-0">No</label>
</div>
</div>
</div>
<!-- member 2 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 2 (Toddler)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-yes-1" type="radio" name="attending-1" value="yes" required />
<label class="input-label" for="attending-yes-1">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input is_toddler" id="attending-no-1" type="radio" name="attending-1" value="no" required />
<label class="input-label" for="attending-no-1">No</label>
</div>
</div>
</div>
<!-- member 3 -->
<div class="member d-flex flex-column">
<span class="member__name">Name 3 (Adult)</span>
<div class="member__attendance member__options d-flex">
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-yes-2" type="radio" name="attending-2" value="yes" required />
<label class="input-label" for="attending-yes-2">Yes</label>
</div>
<div class="member__attendance-option">
<input class="member__attendance-input" id="attending-no-2" type="radio" name="attending-2" value="no" required />
<label class="input-label" for="attending-no-2">No</label>
</div>
</div>
</div>
<div class="guest__cot">
Show this div if either toddler options are "yes"
</div>
</form>
</div>
</div>
</div>
</div>
There are 4 Yes,No radio buttons and if I choose Yes, it shows the value 'YES'. But, if I chooseNo, it just showing blank. May I know how can I fix it?
<div id='testtwo' style="display:block;">
<label class="control-label col-sm-4" for="pnl">Is the packing properly vacuum sealed? :</label>
<div class="col-sm-4" style="margin-top:19px;">
<p class="form-control-static" style="margin-top: -7px;display: inline-flex;color: darkslategrey;">
<input type="radio" name="pkyes" value="YES">
<label for="pkyes" style="margin-left: 6px; margin-top: 8px;">YES</label><br>
<input type="radio" name="pkyes" value="NO" style="margin-left: 16px;">
<label for="pkno" style="margin-left: 6px; margin-top: 8px;">NO</label><br>
</p>
</div></div>
Below is JavaScript.
var testasd=document.querySelector('input[type=radio][name=pkyes]');
if(testasd.checked == false ){
var pk = '';
}else {
var pk = testasd.value;
}
I believe you have to check for checked. Add :checked in querySelector. Adding solution there:
const testasd = document.querySelector('input[type=radio][name=pkyes]:checked');
const pk = testasd ? testasd.value : '';
console.log(pk)
<div id='testtwo' style="display:block;">
<label class="control-label col-sm-4" for="pnl">Is the packing properly vacuum sealed? :</label>
<div class="col-sm-4" style="margin-top:19px;">
<p class="form-control-static" style="margin-top: -7px;display: inline-flex;color: darkslategrey;">
<input type="radio" name="pkyes" value="YES">
<label for="pkyes" style="margin-left: 6px; margin-top: 8px;">YES</label><br>
<input type="radio" name="pkyes" value="NO" style="margin-left: 16px;" checked>
<label for="pkno" style="margin-left: 6px; margin-top: 8px;">NO</label><br>
</p>
</div></div>
What I am trying to do: I am adding new entries whenever I submit a form and that entry should have an animation (fadeIn effect). I am adding new entries whenever I submit a form. Every entry is being added using javascript template literal in which I am adding using divisions with classes and ids. Every entry has an Id and when I use that ID to add animation, all entries get the animation as they have same ids (I know IDs should not be same that is why I am trying to change it).
What I am trying to do: I am trying to change ID of previously added entry or div.
Program is changing ID only once.
My javascript code:
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map(student => {
var passport = student.imgLink;
return `
<div class="row" id="student-id-details" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map(student => {
return `
<div class="row" id="student-id-image" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
setTimeout(changeIds, 3000);
}
const changeIds = () => {
var oldId = document.getElementById("student-id-details");
oldId.id = "no-animation";
console.log(document.querySelectorAll("#student-id-details"));
console.log(document.querySelectorAll("#no-animation"));
}
I cannot use any library or framework for doing this task.
In changeIds function, I am changing the ID. When I keep adding new entries there is only 1 node in no-animation NodeList (the first entry) and after that no ID change is taking effect.
What can be the problem here?
My html code for reference -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
<script src="script_js.js"></script>
</body>
</html>
My css code for animation -
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#student-id-image{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#student-id-details{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
I would appreciate different solutions for achieving animations in new entries only too.
You have to apply fade-in-animation class to new entry, current logic apply animation class to all list.
I just update your code with minor changes, i hope it'll help you out. Thank You
var enrolledStudents = [];
let form = document.getElementById("student-enrollment-form");
const getStudentDetails = (event) => {
event.preventDefault();
// This is the important part, test if form is valid
if (form.checkValidity() === false){
// This is the magic function that displays the validation errors to the user
form.reportValidity();
return;
}
var skillsList = [];
var name = document.getElementById("name-input").value;
var email = document.getElementById("email-input").value;
var website = document.getElementById("website-input").value;
var imgLink = document.getElementById("imglink-input").value;
var gender = document.querySelector('input[name="genderRadio"]:checked').value;
var skills = document.querySelectorAll('input[type="checkbox"]');
skills.forEach(item => {
if (item.checked){
skillsList.push(item.value);
}
})
var student = {
'name': name,
'email': email,
'website': website,
'imageLink' : imgLink,
'gender': gender,
'skills': skillsList,
}
enrolledStudents.push(student)
console.log(enrolledStudents);
const studentList = document.getElementById('student-list');
studentList.innerHTML = `${
enrolledStudents.map((student, index) => {
var passport = student.imgLink;
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; height: 120px;">
<div class="col" style="padding-top: 10px; padding-bottom: 5px; height: 100px;">
<h6 class="card-title">${student.name}</h6>
<p class="card-text">${student.gender}<br />${student.email}<br />${student.website}<br />${student.skills} ${index}</p>
</div>
</div>
`;
}).join("")
}`
const studentImages = document.getElementById("student-images");
console.log(enrolledStudents)
studentImages.innerHTML = `${
enrolledStudents.map((student, index) => {
return `
<div class="row ${enrolledStudents.length === (index + 1) ? 'fade-in-animation' : ''}" style="border: 2px solid black; border-top: none; border-left: none; height: 120px">
<div class="col" style="padding-top: 10px; padding-bottom: 6px; height: 120px; align-items: centre;">
<img src=${student.imageLink}></img>
</div>
</div>
`
}).join("")
}`
}
#right-col-header{
text-align: center;
}
ul{
padding-left: 0;
list-style-type: none;
}
p{
font-size: 13px;
}
img{
height: 6em;
width: 6em;
}
#student-ids{
height: 90%;
overflow-x: auto;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-animation{
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Student Enrollment</title>
<link href="style.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar text-center" style="background-color: #59CE8F;">
<div class="container-fluid text-center">
<span class="navbar-brand mb-0 h1 text-center" style="color: white;">Student Enrollment Form</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" style="height: 35px;"></div>
</div>
<div class="row">
<div class="col" style="border-right: 3px solid #59CE8F;">
<form id="student-enrollment-form">
<div class="row mb-3">
<label for="name-input" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name-input"/>
</div>
</div>
<div class="row mb-3">
<label for="email-input" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="website-input" class="col-sm-2 col-form-label">Website</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="website-input" required/>
</div>
</div>
<div class="row mb-3">
<label for="imglink-input" class="col-sm-2 col-form-label">Img Link</label>
<div class="col-sm-5">
<input type="url" class="form-control" id="imglink-input" required/>
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Gender</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios1" value="male" id="male-input" checked>
<label class="form-check-label" for="gridRadios1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="genderRadio" id="gridRadios2" value="female" id="female-input">
<label class="form-check-label" for="gridRadios2">
Female
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<label for="skills" class="col-sm-2 col-form-control">Skills</label>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="java-gridCheck" value="Java">
<label class="form-check-label" for="gridCheck">
JAVA
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="html-gridCheck" value="HTML">
<label class="form-check-label" for="gridCheck">
HTML
</label>
</div>
<div class="col-sm-2">
<input class="form-check-input" type="checkbox" id="css-gridCheck" value="CSS">
<label class="form-check-label" for="gridCheck">
CSS
</label>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getStudentDetails(event)">Enroll Student</button>
</div>
<div class="col-2" style="margin-left: -30px;">
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</form>
<div class="col" id="student-ids">
<h3 id="right-col-header">Enrolled Students</h3>
<div class="row mb-4"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-5" style="text-align: left;">
<div class="row" style="border: 2px solid black;">
<div class="col">
Description
</div>
</div>
<div class="student-list-division" id="student-list">
</div>
</div>
<div class="col-3" style="align-items: centre;">
<div class="row" style="border: 2px solid black; border-left: none;">
<div class="col">
Image
</div>
</div>
<div class="student-list-images" id="student-images">
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a radio button with .html added to it. But the result it's a overlap text with the radio button.
Overlapping Radio buttons with text.
Also as you can see the text goes downward instead of covering all of the bootstrap col-4 , col-4, col-4.
function addQAs() {
randQuestion = Math.floor(Math.random() * library.length); //this is a nuber, dont forget!
console.log(randQuestion);
$("#question").html(library[randQuestion].question);
$("#answer1").html(library[randQuestion].answer[0]);
$("#answer2").html(library[randQuestion].answer[1]);
$("#answer3").html(library[randQuestion].answer[2]);
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-4">
<input type="radio" id="answer1" value="answer1" index="0">
<label for="answer1"></label>
</div>
<div class="col-4">
<input type="radio" id="answer2" value="answer2" index="1">
<label for="answer2"></label>
</div>
<div class="col-4">
<input type="radio" id="answer3" value="answer3" index="2">
<label for="answer3"></label>
</div>
</div>
</form>
</div>
I havent tried any CSS for this issue.
Thanks
try to add this css
.col-4 {
position: relative;
}
input[type="radio"] {
position: absolute;
left: -15px; // set as per your requirement
top: 5px; // set as per your requirement
}
when i calculate each price the problem is insert both.
I just want each price for pickup and delivery
Javascript
function refreshprices() {
var pickup_td = getDistanceFromLatLonInKm(origin_lat,origin_lng,pickup_lat,pickup_lng);
var pickup_cost = calculatePrice(base_cost, base_dist, additional_cost, additional_dist, pickup_td);
var pickup_output = document.getElementById('pickup_price');
pickup_output.innerHTML = " $ " + pickup_cost;
var delivery_td=getDistanceFromLatLonInKm(origin_lat,origin_lng,delivery_lat,delivery_lng);
var delivery_cost=calculatePrice(base_cost, base_dist, additional_cost, additional_dist, delivery_td);
var delivery_output = document.getElementById('delivery_price');
delivery_output.innerHTML = " $ " + delivery_cost;
}
HTML
<form action="#" method="post">
<div id="pickup_option_calculate_price">
<div class="row-fluid">
<div class="span12" >
<h2>Pickup Option</h2>
<label class="radio">
<div class="option-title"><input type="radio" name="pickup" value="no_pickup" id="type_0" checked>No pickup required</div>
</label>
<div class="option-desc">You must drop off your passports and supporting documents at our office.</div>
<label class="radio">
<div class="option-title"><input type="radio" name="pickup" value="pickup" id="type_1">Pickup required ( <span id="pickup_price"> Enter Address to calculate Price </span>)</div>
</label>
<div class="option-desc">We will pickup the passports and supporting documents from your home or office.</div>
</div>
</div>
<div id="pickup_location">
<div class="row-fluid">
<input type="text" name="address" class="span10">
<input type="button" name="search" class="span2" value="Calculate Price" class="btn">
</div>
<div class="row-fluid">
<div class="span12">
<div id="coords" style="margin-top: 10px;"></div>
<div id="gmap" style="height:200px;position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
</div>
</div>
</div>
</div>
<div id="delivery_option_calculate_price">
<div class="row-fluid">
<div class="span12" >
<h2>delivery Option</h2>
<label class="radio">
<div class="option-title"><input type="radio" name="delivery" value="no_delivery" id="type_0" checked>No delivery required</div>
</label>
<div class="option-desc">You must drop off your passports and supporting documents at our office.</div>
<label class="radio">
<div class="option-title"><input type="radio" name="delivery" value="delivery" id="type_1">delivery required ( <span id="delivery_price"> Enter Address to calculate Price </span>)</div>
</label>
<div class="option-desc">We will delivery the passports and supporting documents from your home or office.</div>
</div>
</div>
<div id="delivery_location">
<div class="row-fluid">
<input type="text" name="delivery_address" class="span10">
<input type="button" name="delivery_search" class="span2" value="Calculate Price" class="btn">
</div>
<div class="row-fluid">
<div class="span12">
<div id="coords" style="margin-top: 10px;"></div>
<div id="gmap" style="height:200px;position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
</div>
</div>
</div>
</div>
</form>
when i calculate each price the problem is insert both.
I just want each price for pickup and delivery
Image is below.
Ok.Now i found it all my brother.
refreshprices();
pickup_output = document.getElementById('pickup_price');
pickup_output.innerHTML = " $ " + pickup_cost;
refreshprices();
var delivery_output = document.getElementById('delivery_price');
delivery_output.innerHTML = " $ " + delivery_cost;
function refreshprices() {
var pickup_td = getDistanceFromLatLonInKm(origin_lat,origin_lng,pickup_lat,pickup_lng);
pickup_cost = calculatePrice(base_cost, base_dist, additional_cost, additional_dist, pickup_td);
var delivery_td=getDistanceFromLatLonInKm(origin_lat,origin_lng,delivery_lat,delivery_lng);
delivery_cost=calculatePrice(base_cost, base_dist, additional_cost, additional_dist, delivery_td);
}