I have 3 different forms with different amount of check boxes each section represents a form basiclly so when the use selects a checkbox in that section it shows how much they have checked out of the total amount for that section
HTML
<body class="container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<p class="count-checked-checkboxes">Name of Section 0</p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form1" action="">
<input id="question-1" type="checkbox">
<label for="question-1">solution name</label>
<br>
<input id="description" type="checkbox">
<label for="description">solution name</label>
<br>
<input id="question-2" type="checkbox">
<label for="question-2">demo question</label>
<br>
<input id="question-3" type="checkbox">
<label for="question-3">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<p class="count-checked-checkboxes">Name of Section 0</p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form id="form2" action="">
<input id="ques-1" type="checkbox">
<label for="ques-1">solution name</label>
<br>
<input id="description1" type="checkbox">
<label for="description1">solution name</label>
<br>
<input id="ques2" type="checkbox">
<label for="ques2">demo question</label>
<br>
<input id="ques3" type="checkbox">
<label for="ques3">another demo question</label>
<br>
<input id="ques11" type="checkbox">
<label for="ques11">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<p class="count-checked-checkboxes">Name of Section 0</p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<form id="form3" action="">
<input id="ques4" type="checkbox">
<label for="ques4">solution name</label>
<br>
<input id="description3" type="checkbox">
<label for="description3">solution name</label>
<br>
<input id="ques5" type="checkbox">
<label for="ques5">demo question</label>
<br>
<input id="ques6" type="checkbox">
<label for="ques6">another demo question</label>
<br>
<input id="ques44" type="checkbox">
<label for="ques44">another demo question</label>
<br>
<input id="ques64" type="checkbox">
<label for="ques64">another demo question</label>
</form>
</div>
</div>
</div>
</div>
</body>
jquery
$(function(){
var e = document.forms[0];
var numQuestion;
var i;
var formName = $(this).e;
for(i = 0; i < e.length; i++){
numQuestion = e.getEle**mentsByTagName('label');
console.log(numQuestion.length);
}
$('#' + formName).closest('.panel-heading').find('.numOfQuestions').text('/' + e.length);
var $checkboxes = $('input[type="checkbox"], #form1');
$checkboxes.change(function(){
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$(this).closest('.panel-heading').find('.count-checked-checkboxes').text('Name of Section ' + countCheckedCheckboxes);
});
});
my progress so far
Here's what I came up with that does the job. Commented for clarity, I think you can follow it to make whatever modifications that are necessary.
// --- when user changes a checkbox ---
$(document).on('change', 'input[type="checkbox"]', function(e) {
// --- get the form name ---
var $form = $(this).closest('form');
var formName = $form.attr('id');
// --- count the checkboxes for this form ---
var totalCheckboxes = $form.children('input[type="checkbox"]').length;
// --- place count value in the 'numOfQuestions' p ---
var $panel = $form.closest('.panel-default');
$panel.find('.numOfQuestions').text('/' + totalCheckboxes);
// --- count total checkboxes checked ---
var countCheckedCheckboxes = $form.children('input[type="checkbox"]:checked').length;
// --- place checked count in 'count-checked-checkboxes' p ---
$panel.find('.count-checked-checkboxes').text('Name of Section '+countCheckedCheckboxes);
});
selector is probably the issue
$(this).siblings('.panel-heading').find('.count-checked-checkboxes')
try using parent() or closest()
Add change event to each input checkbox, then inside the change event, find closest .pannel-body then find('input:checked') and get the length assign to count.
Next just update (use closest to find the .pannel) and update the text
NOTE: closest will go up find a parent, it will not find a sibling or child.
$('input[type="checkbox"]').on('change', function() {
var count = $(this).closest('.panel-body').find('input:checked').length;
$(this).closest('.panel').find('.count-checked-checkboxes').text(count);
updateTotal();
});
function updateTotal(){
var total = 0;
$('.count-checked-checkboxes').each(function(){
total += +$(this).text();
});
$('#mytotal').text(total);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="container">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>Total: <span id="mytotal"></span></div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<p>Name of Section <span class="count-checked-checkboxes">0</span></p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form1" action="">
<input id="question-1" type="checkbox">
<label for="question-1">solution name</label>
<br>
<input id="description" type="checkbox">
<label for="description">solution name</label>
<br>
<input id="question-2" type="checkbox">
<label for="question-2">demo question</label>
<br>
<input id="question-3" type="checkbox">
<label for="question-3">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<p>Name of Section <span class="count-checked-checkboxes">0</span></p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form id="form2" action="">
<input id="ques-1" type="checkbox">
<label for="ques-1">solution name</label>
<br>
<input id="description1" type="checkbox">
<label for="description1">solution name</label>
<br>
<input id="ques2" type="checkbox">
<label for="ques2">demo question</label>
<br>
<input id="ques3" type="checkbox">
<label for="ques3">another demo question</label>
<br>
<input id="ques11" type="checkbox">
<label for="ques11">another demo question</label>
</form>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed btn1" role="button" data-toggle="collapse" data-parent="" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<p>Name of Section <span class="count-checked-checkboxes">0</span></p>
<p class="numOfQuestions"></p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<form id="form3" action="">
<input id="ques4" type="checkbox">
<label for="ques4">solution name</label>
<br>
<input id="description3" type="checkbox">
<label for="description3">solution name</label>
<br>
<input id="ques5" type="checkbox">
<label for="ques5">demo question</label>
<br>
<input id="ques6" type="checkbox">
<label for="ques6">another demo question</label>
<br>
<input id="ques44" type="checkbox">
<label for="ques44">another demo question</label>
<br>
<input id="ques64" type="checkbox">
<label for="ques64">another demo question</label>
</form>
</div>
</div>
</div>
</div>
</body>
Related
I am unable to make the trash icon visible more than one when I checked the checkbox element.
The first card only shows the trash icon, and the rest of the cards are not showing.
I have tried getElementById, querySelectorAll and getElementsByClassName. Nothing works properly as expected.
Can you find the logic error in the code?
function check() {
if (document.querySelector(".check").checked == true) {
document.querySelector(".deleteButton").style.visibility = "visible";
} else {
document.querySelector(".deleteButton").style.visibility = "hidden";
}
}
.deleteButton {
visibility: hidden;
}
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<a onclick="check()">
<input type="checkbox" class="check">
</a>
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled"></i>
</a>
</h4>
</div>
</div>
<br>
</div>
Don't wrap a checkbox in a link
Also delegate
I delegate from a div I called container. It needs to be the nearest common container for your cards
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("check")) {
tgt.closest(".card-body").querySelector(".deleteButton").classList.toggle("hide", !tgt.checked)
}
else if (tgt.closest("a").classList.contains("deleteButton")) {
e.preventDefault();
tgt.closest(".card").remove()
}
})
.hide {
display: none
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div id="container">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 1
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id1">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 2
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id2">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="check">
</div>
<h4 class="card-title">
Description 3
<a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id3">
<i class="fas fa-trash-alt" disabled="disabled">Delete</i>
</a>
</h4>
</div>
</div>
<br>
</div>
</div>
we having three tabs initially first tabs should enabled i's working fine. after click submit button second tab should be open but it's is not working.
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a').tab('show')
.attr('data-toggle', 'tab');
});
</script>
Pass the value
in this picture value pass to the linkHref but after click submit button hide the first tab but next tab is not opening ..
Second Image blank page
second screen shot blank page after enter submit button
Here you go with a solution https://jsfiddle.net/7baqxro0/1/
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li a').removeClass('active');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a')
.tab('show')
.addClass('active')
.attr('data-toggle', 'tab');
$('a.nav-link').not('.active').css('pointer-events', 'none');
});
$('a.nav-link').not('.active').css('pointer-events', 'none');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav nav-tabs" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>
Please add your CSS to the code, intentionally I skipped it.
I've used CSS property pointer-events: none instead of disabled.
Hope this will help you.
working: https://jsfiddle.net/q6adcnLs/
you have multiple elements with same id attribute
you've misplaced .active class to .nav-link (which should be in the .nav-item)
you can use return true or return false instead of preventDefault()
UPDATE:
disable other inactive tabs https://jsfiddle.net/q6adcnLs/1/
I'm using a Bootstrap collapsible panel.
Here's the Fidle for it
I'm trying to do the following :
I want to move both the buttons on the Panel header(at the extreme
right end) i.e. exactly opposite to the text "Panel"
But I only want the buttons to be visible when the panel is expanded. And
when the panel is hidden the buttons should be hidden too.
How can I achieve this. What would be the JS for it?
I tried to do the following in JS:
$(document).ready(function () {
$("#btnSearch").hide();
$(".panel-title").click(function () {
$("#btnSearch").show();
});
});
But with this the buttons won't hide when the panel is made to hide.
Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.
It is very similar to this bootsnipp
$(".panel-success").on('show.bs.collapse', function() {
$('.buttonCon').addClass('vis');
}).on('hide.bs.collapse', function() {
$('.buttonCon').removeClass('vis');
})
.panel{
position:relative;
}
.buttonCon{
position:absolute;
top:5px;
right:10px;
display:none;
}
.buttonCon.vis{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-success">
<div class="buttonCon">
<button type="button" class="btn btn-primary" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
<button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
Buttonn2
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
<div class="form-group row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-2 col-md-offset-5">
</div>
</div>
</div>
</div>
</div>
You can use bootstrap collapse events to achieve it.
$('#accordion').on('shown.bs.collapse', function() {
$(".buttons").show();
})
$('#accordion').on('hidden.bs.collapse', function() {
$(".buttons").hide();
})
Check this fiddle.
The following JsFiddle is another option compared to the answers already given.
Mainly, it prevents the use of position: absolute which can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.
I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.
Got it working by combining the answers provided by #kittyCat (the updated solution) and #BuddhistBeast .
Here's the Fiddle.
HTML code :
<div class="container">
<div class="panel panel-success" id="js-panel">
<div class="panelButtons">
<button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
Button2
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
</div>
</div>
</div>
JS Code :
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!
You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/
I have some html and i am willing to change the font colour of h4 tag by keydown or keyup
example;
when i keydown id="txt1",id="txt2"the font colour change to be green
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
similarly for all panel how i can do this? thanks
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<section>
<div class="section_inner">
<input type="text" name="txt1" id="txt1"/>
<input type="text" name="txt2" id="txt2"/>
</div>
</section>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<section>
<div class="section_inner">
<input type="text" name="txt3"/>
<input type="text" name="txt4"/>
<input type="text" name="txt5"/>
<input type="text" name="txt6"/>
</div>
</section>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<section>
<div class="section_inner">
<input type="text" name="txt7"/>
<input type="text" name="txt8"/>
<input type="text" name="txt9"/>
<input type="text" name="txt10"/>
</div>
</section>
</div>
</div>
</div>
</div>
<script>
var collapseOne = 0;
//collapseOne reqeried validation
$('#collapseOne input[type=text]').keyup(function(){
$('#collapseOne input[type=text]').each(function(){
if ( $(this).hasClass('required') ){
if ( $(this).val() != '' ){
collapseOne = 1;
}
}
});
if ( collapseOne == 1 ){
//$(this).find("data-id='collapseOne'").css("color","green");
//$(this).closest('.panel-heading h4').css("color","green");
}
});
</script>
If you want to change color of h4 then try this
$( "body" ).keydown(function() {
$("h4").css("color","green");
});
try this:
$("body").keypress(function( event ) {
if ( event.which == 40 || event.which == 38 ) {
$("h4").find("a").css("color","green");
}
});
or
$("body").keypress(function( event ) {
if ( event.which == 40 || event.which == 38 ) {
$("h4 > a").css("color","green");
}
});
more info abyout keypress
I think that's what you want
$( "input" ).keydown(function(e) {
$(e.target).closest("h4").css("color","green");
});