group sections inside form - javascript

I have this form I want to separate the form into three different sections. One of the sections of the form is the one you see in the picture below around the red border. I have used the fieldset element to separate the section. the code is this:
.field_set {
border-color: black;
border-style: solid;
border: 1px #F00 solid;
}
<fieldset class="field_set">
<div class="form-group m-form__group row">
<legend> Start </legend>
<!-- form group 4(adress) -->
<!-- From address -->
<div class="col-md-4">
<input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="<?php echo trans('manage_request_labels.address_input_placeholder_text');?>">
</input>
</div>
<div class="col-md-4">
<select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_fuel_text');?>
</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_euroclass_text');?>
</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_vehicle_text');?>
</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
<option value="">
<?php echo trans('manage_request_labels.select_vehicle_capacity_text');?>
</option>
<option value="0">
0%
</option>
<option value="10">
10%
</option>
<option value="20">
20%
</option>
<option value="30">
30%
</option>
<option value="40">
40%
</option>
<option value="50">
50%
</option>
<option value="60">
60%
</option>
<option value="70">
70%
</option>
<option value="80">
80%
</option>
<option value="90">
90%
</option>
<option value="100">
100%
</option>
</select>
</div>
</div>
</fieldset>
My first question is why does the border go over the legend text like that and how do you solve it
second question. How would you make the border a bit rounder and more slick kind of
Last question. Is there a better way to separate the section via bootstrap or something? Any ideas are welcomed. I tried to use the well bootstrap class(https://www.w3schools.com/bootstrap/bootstrap_wells.asp) but it did not work for some reason. Nothing happened when I added the well class to the same div as "row" in the code below


You need to override some bootstrap styles (see code below).
But first, move the legend outside the div (it does not belong in there).
To get a bit more space between the elements, wrap them in the class form-group
<div class="form-group">
<input type="text" id="ac" class="form-control" name="google-autocomplete" placeholder="" />
</div>
For rounded border, use border-radius
border-radius: 4px;
.field_set {
border: 2px #F00 solid;
border-radius: 4px;
margin: .75rem;
padding: .75rem;
}
legend {
padding: 4px!important;
width: unset!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset class="field_set">
<legend>Start</legend>
<div class="form-group m-form__group row">
<!-- form group 4(adress) -->
<!-- From address -->
<div class="col-md-4">
<div class="form-group">
<input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
<option value="">
</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
<option value="">
</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
<option value="">
</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
<option value=""></option>
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
</div>
</div>
</div>
</fieldset>

Related

Why are these cards not getting filtered and floating left?

These cards have their class updated, but they don't get filtered and float to the left.
let btnDiv = document.getElementById('filterBtnContainer');
let btns = btnDiv.querySelectorAll('.btn');
btns.forEach((btn, i) => {
let btnValue = `q${i}`;
btn.classList.add('btn', 'filter');
btn.setAttribute('type', 'submit');
btn.setAttribute('value', btnValue);
btn.addEventListener('click', () => {
filterSelection(btnValue);
});
});
//filterSelection('q0');
function filterSelection(c) {
console.log(c)
let cardContainer = document.getElementById('cardsContainer');
var x, i;
x = cardContainer.getElementsByClassName("card");
if (c == 'q0') c = "";
for (i = 0; i < x.length; i++) {
removeClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) addClass(x[i], "show");
}
}
// Show filtered elements
function addClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function removeClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
.card {
background-color: #fafafa;
font-size: 12px;
border-radius: 5px !important;
flex-basis: 25%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
outline: none;
border-radius: 7px;
flex-direction: inherit !important;
transition: all 0.3s ease-in-out;
transform: scale(1);
display: none;
}
.card:hover {
transform: scale(1.01);
}
.card-img {
width: 100%;
height: 190px;
object-fit: cover;
}
.show {
display: flex;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="filterBtnContainer">
<button class="btn filter active" type="submit" value="q0">All</button>
<button class="btn filter" type="submit" value="q1">Q1</button>
<button class="btn filter" type="submit" value="q2">Q2</button>
<button class="btn filter" type="submit" value="q3">Q3</button>
<button class="btn filter" type="submit" value="q4">Q4</button>
</div>
<div id="cardsContainer">
<div class="row crd-group">
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label>
<select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsum</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden=""><label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="1"></div>
</div>
</div>
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label>
<select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsum</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="2">
</div>
</div>
</div>
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label><select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected="">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsum</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden=""><label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="3">
</div>
</div>
</div>
<div class="col-6 col-md-6 col-xl-3">
<div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
<div class="col-6 mt-3"><label for="quarter">Quarter:</label>
<select class="form-control" name="quarter" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="monthNum">Month:</label>
<select class="form-control" name="month" value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="weekNum">Week:</label>
<select class="form-control" name="weekNum" value="3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="">3</option>
<option value="4">4</option>
</select></div>
<div class="col-6 mt-3"><label for="date">Date:</label>
<input type="date" class="form-control" name="date" value="2023-02-02"></div>
<div class="col-12 mt-3"><label for="status">Status:</label>
<select class="form-control" name="status" value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select></div>
<div class="col-12 mt-3"><label for="status">Image URL:</label>
<input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></div>
<div class="col-12 mt-3"><label for="post">Post:</label>
<textarea class="form-control post" name="post">Lorem Ipsumdale-az/</textarea>
</div>
<div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;">
<label for="publishedPostLink">Published Link:</label>
</a>
<input type="text" class="form-control published-link-input" name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>
<div class="form-group" hidden="">
<label for="postNum">Post Number:</label>
<input type="text" class="form-control" name="postNum" value="4">
</div>
</div>
</div>
</div>
</div>

That is because your own styles are overriden by the bootstrap styles you have included in your page.
You need to put your styles after the bootstrap ones.
In general they should have higher specificity either by more specific selectors or if they share the same specificity, they should come later in your page.
Read https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#selector_weight_categories for more details.

jQuery class doesn't add on changing the option of a select box

I have attributes (color, size) and their units(black,blue || 32cm,42cm).
I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).children().attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

You need to target only the selected option and its corresponding data-attr.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).find('option:selected').attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

Bootstrap- Align two <select> horizontally

These two select from the same control-group are getting displayed vertically. I want to display them horizontally. I tried doing inline-block on CSS, but there are some other <div> with the same control-group class, with different width and margin settings. Changing the class name doesn't help either.
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
<select name="Delivery" id="Delivery" disabled="">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select>
<script>
var category = document.getElementById('Delivery');
document.getElementById('week').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'OPEN') {
category.value = 'OPEN';
} else {
category.value = 'CLOSE';
}
} else {
category.value = '';
}
}
</script>
</div>

Flexbox version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div style="display: flex; flex-direction: row;">
<select></select>
<select></select>
</div>
</div>
Bootstrap version:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div class="row>
<div class="col-md-6>
<select></select>
</div>
<div class="col-md-6>
<select></select>
</div>
</div>
</div>
CSS version:
<div class="control-group">
<label for="week" style="display: block; width: 100%;">Dispatch schedule:</label>
<select style="display: float: width: 49%;></select>
<select style="display: float: width: 49%;></select>
</div>

you could use multi column grid
and set no of columns or width accordingly.
fiddle - https://jsfiddle.net/nLddvkw6/1
**
<div class="control-group">
<div class="row">
<div class="border col-xs-4"><label for="week">Dispatch schedule:</label></div>
<div class="border col-xs-4"><select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
</div>
<div class="border col-xs-4"> <select class="form-control" name="Delivery" id="Delivery" disabled="" style="width:110px;">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select></div>
</div>
</div>

JavaScript hide a corresponding field with specific delimiter

I want to hide the corresponding textarea field of a dropdown, It will be used in a lot of instance that's why I want it on a function.
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1" ></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2" ></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3" ></textarea>
</div>
As you can see in the code the dropdown name=campaign-dd# has a specific textarea name=campaign-comment#.

On initial load. I want to hide it. And will display it once YES is selected
In this case you can put a common class on all the .field elements which contains the comment fields, in my example below I used .comment and hide them in CSS. Then in JS you can put a change event handler on the select elements which shows/hides the related comment field based on the selected option. Try this:
$('select').change(function() {
$(this).closest('.field').nextAll('.field:first').toggle($(this).val() == 'Yes');
});
.field.comment {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field comment">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field comment">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field comment">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

Adding classes that makes more sense would be easier, but you can construct the name for the textarea from the name given to the select, to hide it etc.
$('.field select').on('change', function() {
var parts = this.name.split('-');
var numb = parts[1].replace(/\D/g, '');
$('[name="' + parts[0] + '-comment' + numb + '"]').toggle(this.value !== 'Yes')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em>Select "Yes" to hide comment</em>
<br><br><br>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

Input focus doesnt work / can't select radio button - Bootstrap

I have the following html code which uses twitter bootstrap framework, where I am not able to select the input fields,its focus gets removed when I click on it and also I am not able to select a radio button.Even if I select one,it moves to the first radio button and Im not able to select the second one.Please help me resolve this issue.And the main thing is that this is happening in firefox browser and in chrome and IE its working fine!
<form action="test.php" style="border: solid 1px #eee;box-shadow: 10px 10px 5px #888888;margin-top:20px" class="panel-body" method="POST" id="myForm" data-validate="parsley">
<div id="alert" style="display:none" class="alert alert-danger text-center">Please enter a valid card number !</div>
<div>
<div class="col-md-4">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC"><label for="radio43" class="css-label cb3">Credit Card</label>
</div>
<div class="col-md-4">
<input type="radio" name="cardType" id="one" class="" value="DB"><label for="radio53" class="css-label cb3">Debit Card</label>
</div>
<div class="col-md-4">
<img src="certificate.png" width="120" class="bw">
</div>
</div>
<!-- Card Payment -->
<div id="a">
<br>
<br>
<br>
<input type="hidden" id="ccType" name="ccType">
<ul style="float:right;display:none" class="cards">
<li class="visa"></li>
<li class="visa_electron"></li>
<li class="mastercard"></li>
<li class="maestro"></li>
</ul>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputEmail1">Card number</label>
<div class="fake-input">
<input type="text" class="form-control zwitch_data" autocomplete="off" data-required="true" data-trigger="change" id="ccnumber" name="ccnumber" onblur="testCreditCard () ">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputPassword1">CVV</label><input type="password" maxlength="4" class="form-control" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Month</label>
<select name="expiry_month" class="form-control" data-required="true" data-trigger="change">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Year</label>
<select name="expiry_year" class="form-control" data-required="true" data-trigger="change">
<option selected="" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputPassword1">Name on Card</label><input type="text" class="form-control" name="name_on_card" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="ak" value="">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="app" value="Checkout">
<input type="hidden" name="orderID" value="123456">
<input type="hidden" name="email" value="">
<input type="hidden" name="mobileNo" value="9999999999">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block m-b-sm">Pay</button>
</div>
</div>
</div><!-- Card payments ends here -->

I don't see anything wrong with the code you posted, per se.
I personally prefer to wrap radio input buttons in the label tag without the for="" attribute. This makes it so clicking on the text also selects the radio button. Like so:
<label class="css-label cb3">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC">
Credit Card
</label>
I tested your code in this jsfiddle (granted, I added my radio button change) and it seems to work. There must be something else in your code that is causing the issue. You could try posting a link to your development website.

I encountered probably same problem. Don't use "contenteditable='true'" property.
ERROR EXAMPLE:
<div class="input" contenteditable="true">
<label for="RadioOne"><input type="radio" value="val1" name="radio" id="RadioOne">Radio 1</label>
<label for="RadioTwo"><input type="radio" value="val2" name="radio" id="RadioTwo">Radio 2</label>
</div>
In your case if it isn't "contenteditable" search for other attributes which could interfere.

I think the problem is in your question, not in the code. Radio buttons all have the same name and are treated as a group. This is why the first one is selected with a tab, then to get to individual buttons with the arrow keys. I might have misunderstood the question but I hope its useful.
g

Categories