I am trying to hide the form and show the necessary one on clicking the button. But the javascript code isn't working.
jfiddle link: https://jsfiddle.net/5d28uLkL/
Pls correct the errors if any
HTML:
<div class="nav">
<button href="#" data-category-type="high">CRSS</button>
<button href="#" data-category-type="low">TUBU</button>
<div id="Categories">
<div class="container" data-category-type="high">
<div class="fs-form-wrap" id="fs-form-wrap">
<div class="fs-title">
<h1>CR Strips</h1>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
<input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
<input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
</li>
</ol><!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form><!-- /fs-form -->
</div><!-- /fs-form-wrap -->
</div>
<div class="container" data-category-type="low">
<div class="fs-form-wrap" id="fs-form-wrap1">
<div class="fs-title">
<h1>TUBE</h1>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
<input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
<input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
</li>
</ol><!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form><!-- /fs-form -->
</div><!-- /fs-form-wrap -->
</div>
</div>
</div>
JAVASCRIPT:
$('.nav a').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();
});
Just give id's for the buttons used and link them to the js.
Html:
<button id="high" href="#" data-category-type="high">CRSS</button>
<button id="low" href="#" data-category-type="low">TUBULAR COMPONENTS</button>
JS:
$('#high').on('click',function(){
$('#fs-form-wrap').show();
$('#fs-form-wrap1').hide();
});
$('#low').on('click',function(){
$('#fs-form-wrap1').show();
$('#fs-form-wrap').hide();
});
Here is something that works for your HTML.
It gets the index of the clicked button to decide which .container to show.
$('.nav button').on('click', function (e) {
var thisButtonEq = $(this).index();
$(".container").hide().eq(thisButtonEq).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<button href="#" data-category-type="high">CRSS</button>
<button href="#" data-category-type="low">TUBU</button>
<div id="Categories">
<div class="container" data-category-type="high">
<div class="fs-form-wrap" id="fs-form-wrap">
<div class="fs-title">
<h1>CR Strips</h1>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
<input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
<input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
</li>
</ol><!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form><!-- /fs-form -->
</div><!-- /fs-form-wrap -->
</div>
<div class="container" data-category-type="low">
<div class="fs-form-wrap" id="fs-form-wrap1">
<div class="fs-title">
<h1>TUBE</h1>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
<input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
<input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
</li>
</ol><!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form><!-- /fs-form -->
</div><!-- /fs-form-wrap -->
</div>
</div>
</div>
Edit your javascript to this.
$('.nav button').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();
});
Hey You have selected the wrong selector..
use this $('.nav button') instead of $('.nav a').
Just checked..works fine..And <button> doesnot have href.remove that.
Thanks
Edit your javascript
$('.nav button').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('category-type');
var nam = $(this).data('category-type');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();
});
your working link https://jsfiddle.net/5d28uLkL/2/
you put .data() parameter wrong
There are many mistakes in your code. It shold be something like this i belive:
Html:
<div class="nav">
<button href="#" class="switch" data-category-type="high">CRSS</button>
<button href="#" class="switch" data-category-type="low">TUBU</button>
<div id="Categories">
<div class="container high">
<div class="fs-form-wrap" id="fs-form-wrap">
<div class="fs-title">
<h1>CR Strips</h1>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
<input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
<input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
</li>
</ol>
<!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form>
<!-- /fs-form -->
</div>
<!-- /fs-form-wrap -->
</div>
<div class="container low">
<div class="fs-form-wrap" id="fs-form-wrap1">
<div class="fs-title">
<h1>TUBE</h1>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">Company's Name</label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2">Contact Person</label>
<input class="fs-anim-lower" id="q2" name="q2" type="text" placeholder="" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q3">Phone</label>
<input class="fs-anim-lower" id="q3" name="q3" type="text" placeholder="" required/>
</li>
</ol>
<!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form>
<!-- /fs-form -->
</div>
<!-- /fs-form-wrap -->
</div>
</div>
</div>
Js:
//here you've got wrong selector
$('.nav button.switch').on('click', function(e) {
e.preventDefault();
var cat = $(this).data('category-type'); //here you get class of your container from data attribute on button.
$('#Categories > div').hide(); //hide all
$('#Categories > div.' + cat).show(); //show selected
});
I make some changes to your html and js code and make some comments on js code.
I hove it helps you. JsFiddle here.
Related
I have a form with 2 sets of checkboxes with a view this could be 3 or 4 down the line.
For this question I have 2 which each have >5 checkboxes and multiple items can be selected in those check boxes.
When a user selects the checkboxes I want to update the URL and refresh with parameters which I'll be using to filter content.
URL I want:
example.com/category/?content=video_static&channel=facebook-ads_instagram-ads
URL I'm getting:
example.com/category/?content=video&content=static&channel=facebook-ads&channel=instagram-ads
I'm not currently changing the URL with javascript but just a form input and submit. I'm thinking I'll need to use Javascript to enable better URL handling.
I want to use undercores to then seperate the checkbox selections which at the minute I'm happy to just refresh the page.
I appreciate this may be very simple for some but Javascript isn't my thing and I have about 20 tabs open trying. Any help is appreciated.
Here is example form (please ignore the tweo different checkbox HTML formats, I hadn't updated the second before this):
<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="static" name="content" value="static">
<label for="static">static</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="carousel" name="content" value="carousel">
<label for="carousel">carousel</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="video" name="content" value="video">
<label for="video">video</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="gif" name="content" value="gif">
<label for="gif">gif</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="dpa" name="content" value="dpa">
<label for="dpa">dpa</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="stories" name="content" value="stories">
<label for="stories">stories</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="influencer" name="content" value="influencer">
<label for="influencer">influencer</label>
</div>
</div>
<div class="list-group">
<h3>Channels</h3>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="facebook-ads">
facebook-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="instagram-ads">
instagram-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="google-ads">
google-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="microsoft-ads">
microsoft-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="tiktok-ads">
tiktok-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="snapchat-ads">
snapchat-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="youtube-ads">
youtube-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="pinterest-ads">
pinterest-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="podcast-ads">
podcast-ads
</label>
</div>
</div>
<button id="select">Apply Filter</button>
</form>
The following should do it:
document.querySelector("form").onsubmit=ev=>{
ev.preventDefault();
let o={};
ev.target.querySelectorAll("[name]:checked").forEach(el=>{
(o[el.name]=o[el.name]||[]).push(el.value)})
console.log(location.pathname+"?"+
Object.entries(o).map(([v,f])=>
v+"="+f.join("_")).join("&")
);
}
<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="static" name="content" value="static">
<label for="static">static</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="carousel" name="content" value="carousel">
<label for="carousel">carousel</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="video" name="content" value="video">
<label for="video">video</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="gif" name="content" value="gif">
<label for="gif">gif</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="dpa" name="content" value="dpa">
<label for="dpa">dpa</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="stories" name="content" value="stories">
<label for="stories">stories</label>
</div>
<div class="list-group-item checkbox">
<input type="checkbox" class="" id="influencer" name="content" value="influencer">
<label for="influencer">influencer</label>
</div>
</div>
<div class="list-group">
<h3>Channels</h3>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="facebook-ads">
facebook-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="instagram-ads">
instagram-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="google-ads">
google-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="microsoft-ads">
microsoft-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="tiktok-ads">
tiktok-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="snapchat-ads">
snapchat-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="youtube-ads">
youtube-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="pinterest-ads">
pinterest-ads
</label>
</div>
<div class="list-group-item checkbox">
<label>
<input type="checkbox" class="" name="channel" value="podcast-ads">
podcast-ads
</label>
</div>
</div>
<button id="select">Apply Filter</button>
</form>
Instead of only showing the new location string with console.log() you should of course use it to apply your filter settings, either through an AJAX call or simply by replacing the current document.location.href.
HTML
<div class="wrap_temi">
<ul class="list-inline list-unstyled">
<li class="list-inline-item">
<input type="checkbox" value="amici" autocomplete="off"> Amici
</li>
<li class="list-inline-item">
<input type="checkbox" value="bacio" autocomplete="off"> Bacio
</li>
</ul>
</div>
<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">
I need to be able to add/remove tags in the input as per amici, bacio
I tried to use .map() but I'm not familiar with it or following this answer but I am not sure how to apply it to my case.
Hope this is what you're looking for:
$(document).ready(function() {
$('input:checkbox').on('change', function() {
var tags = $('input:checkbox:checked')
.map(function() {
return $(this).val();
}).get().join(', ');
$("#usp-tags").val(tags);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_temi">
<ul class="list-inline list-unstyled">
<li class="list-inline-item">
<input type="checkbox" value="amici" autocomplete="off"> Amici
</li>
<li class="list-inline-item">
<input type="checkbox" value="bacio" autocomplete="off"> Bacio
</li>
</ul>
</div>
<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">
Here is a way of retrieving the value using map.
Use :checked to get back the selected options:-
$('.wrap_temi [type="checkbox"]').change(function(){
var tags = $('.wrap_temi [type="checkbox"]:checked')
.toArray()
.map(x => x.value)
.join(', ');
$('#usp-tags').val(tags);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_temi">
<ul class="list-inline list-unstyled">
<li class="list-inline-item">
<input type="checkbox" value="amici" autocomplete="off"> Amici
</li>
<li class="list-inline-item">
<input type="checkbox" value="bacio" autocomplete="off"> Bacio
</li>
</ul>
</div>
<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">
How to show input with class searchFilter below radio button only when that radio button is checked and hide all the others .searchFilter inputs?
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
No need for javascript for this, you can do this with css:
.searchFilter {
display: none;
/* hide search filters */
}
input[type=radio]:checked~.searchFilter {
display: block;
/* show filters that appear after a checked input */
}
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example1">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example2">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example3">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
Do this way:
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
$('.searchFilter').hide();
$('input[type=radio]:checked').next('.searchFilter:first').show();
});
});
This should do the trick.
$(document).ready(function(){
$('.filter-option').children('input[type=radio]').on('change', function(){
$(this).parents('.details').find('input[type=radio]').each(function(){
$(this).is(':checked') ? $(this).siblings('.searchFilter').show() : $(this).siblings('.searchFilter').hide();
});
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example4" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
Please check my code it might help you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//For first form
//select last radiobutton as default
$("form").find(".searchFilter").attr("disabled",true).val("")
$("form").find(".searchFilter").last().attr("disabled",false)
//On radiobuttion selection change
$('input[type=radio]').on('change',function(){
$("form").find(".searchFilter").attr("disabled",true).val("");
$(this).siblings(".searchFilter").attr("disabled",false)
});
});
</script>
</head>
<body>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form >
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
</body>
</html>
There are 4 tabs and in that 4 tabs there are 4 forms, I want to write a jQuery program such that if I submit Form1 in tab1 then the tab2 containing form should be enabled and when I submit form2, tab3 containing form 3 should be enabled that goes on until I reach form4.
I wrote the code but it is enabling all tabs instead of next one.
I am a beginner in jQuery, please comment below for any query.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myLinks">
<li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content" id="myTabs">
<div id="home" class="tab-pane fade in active">
<h1>Form 1</h1>
<form>
<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>
<div id="menu1" class="tab-pane fade">
<h1>Form 2</h1>
<form>
<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>
<div id="menu2" class="tab-pane fade">
<h1>Form 3</h1>
<form>
<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>
<div id="menu3" class="tab-pane fade">
<h1>Form 4</h1>
<form>
<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>
</div>
</div>
<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() {
$('#myLinks li a').each(function(){
$(this).attr('data-toggle','tab');
});
});
</script>
</body>
</html>
Working fiddle.
You could check on submit if the current active tab is the last or not, if not move to the next tab using the .next() and .tab('show'):
$('.nav-tabs li.active').next('li').find('a').attr('data-toggle','tab').tab('show');
I think that what you looking for :
$("#myTabs form").on('submit',function(e) {
e.preventDefault();
var li_count = $('.nav-tabs li').length;
var current_active = $('.nav-tabs li.active').index();
if(current_active<li_count){
$('.nav-tabs li.active').next('li').find('a').attr('data-toggle','tab').tab('show');
}else{
alert('Last Step');
}
});
Hope this helps.
Here is another solution: Working fiddle
When you submit the form,you need to show next tab. For that, you should to identify current li ,then, set data-toggle="tab" for next li.
$("#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');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myLinks">
<li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content" id="myTabs">
<div id="home" class="tab-pane fade in active">
<h1>Form 1</h1>
<form>
<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>
<div id="menu1" class="tab-pane fade">
<h1>Form 2</h1>
<form>
<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>
<div id="menu2" class="tab-pane fade">
<h1>Form 3</h1>
<form>
<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>
<div id="menu3" class="tab-pane fade">
<h1>Form 4</h1>
<form>
<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>
</div>
</div>
<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() {
$('#myLinks li a').each(function(){
$(this).attr('data-toggle','tab');
});
});
</script>
</body>
</html>
How can i hide the textbox when the class active is found in UL > LI
when i should show its label and textbox otherwise, it should be hidden. i am trying to get the value of selected checkbox and hide it but unable to reach there.
$('ul.multiselect-container').has('li.active').css('display', 'none');
<ul class="multiselect-container dropdown-menu">
<li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Paypal</label></a>
</li>
<li class="active"><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Stripe</label></a>
</li>
<li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3">Beanstream</label></a>
</li>
</ul>
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
<br>
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
<br>
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
Update
Sorry if question is not clear,
when i click the first checkbox, say paypal then only paypal label and text box should appear below, the remaining text box 2 and its labels should hide. we need to loop through UL tag with each() i guess.
Here is a fiddle. http://jsfiddle.net/nzw7LoL0/5/
update 2
i am unable to add a class to the div called option and option 1 since html is generated with a framework. so i need to hide the row which has the class .control-group http://jsfiddle.net/d280wqr4/5/
$('input:checkbox').on('change', function () { // Apply change listener to checkboxes
if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
$('.option' + $(this).prop('value'))find('.control-group').show();
} else { // Otherwise, hide the relevant element
$('.option' + $(this).prop('value')).find('.control-group')hide();
}
});
<div class="control-group "><label for="Configuration_paypalId" class="control-label">Paypal Id</label><div class="controls"><input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 option option1"><p class="help-block">Merchant id or email of the Paypal account</p></div></div>
<div class="control-group "><label for="Configuration_stripeId" class="control-label">Stripe Id</label><div class="controls"><input type="text" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 option option2"><p class="help-block">Stripe id or email of the Stripe account</p></div></div>
Assign a common class so that the selector becomes simple
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4 classname">
then
$('input.classname').toggle($('.multiselect-container li.active').length == 0);//hides input with class `classname` if `li` has `active` class
$('ul.multiselect-container').has('li.active').hide();//hides the ul if li has active class
$('.multiselect-container input:checkbox').click(function(){
var type = $(this).data('type');
$('.'+type).toggle(this.checked);
$(this).closest('li').addClass('active')
});
$('.payid').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1" data-type="paypal"> Paypal</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2" data-type="stripe"> Stripe</label></a></li>
<li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3" data-type="bean">Beanstream</label></a></li>
</ul>
<div class="paypal payid">
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="stripe payid">
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="bean payid">
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>
If you are able to change your markup little bit then you can make use of data-* attribute this way:
$('.dropdown-menu :checkbox').change(function(e) {
var target = $(this).data('target');
$('.' + target).toggle();
});
.paypal, .stripe, .beanstream{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li class="">
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" data-target='paypal' value="1">Paypal</label>
</a>
</li>
<li class="">
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" data-target='stripe' value="2">Stripe</label>
</a>
</li>
<li class="">
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" data-target='beanstream' value="3">Beanstream</label>
</a>
</li>
</ul>
<label for="Configuration_paypalId" class="control-label paypal">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 paypal">
<br>
<label for="Configuration_stripeId" class="control-label stripe">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 stripe">
<br>
<label for="Configuration_beanId" class="control-label beanstream">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4 beanstream">
You need to apply a "change" listener to the checkboxes, and then work out if they are checked and show/hide another element based upon this information. You do need a class or id that matches the value property of the checkbox.
The below example should be working as you're hoping.
$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
$('.option' + $(this).prop('value')).show();
} else { // Otherwise, hide the relevant element
$('.option' + $(this).prop('value')).hide();
}
});
.option {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="1" />Paypal
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="2" />Stripe
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="3" />Beanstream
</label>
</a>
</li>
</ul>
<div class="option option1"> <!-- The number refers to the value of the checkbox -->
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4">
</div>
<div class="option option2">
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" value="" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4">
</div>
<div class="option option3">
<label for="Configuration_beanId" class="control-label">Bean Id</label>
<input type="text" value="" id="Configuration_beanId" name="Configuration[beanId]" maxlength="60" class="span4">
</div>
Update based upon more information
If you can't edit the html because it's dynamically generated, you'll need to do it based upon the index. This will only work if the order of the checkboxes matches the other of the inputs, but if it's dynamically generated then I don't see why this shouldn't be the case.
$('input:checkbox').on('change', function() { // Apply change listener to checkboxes
var index = parseInt($(this).prop('value')) - 1; // Make the index zero based
if ($(this).is(':checked')) { // If this checkbox is checked, show the relevant element
$('.control-group:eq(' + index + ')').show();
} else { // Otherwise, hide the relevant element
$('.control-group:eq(' + index + ')').hide();
}
});
.control-group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="multiselect-container dropdown-menu">
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="1" />Paypal
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="2" />Stripe
</label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox">
<input type="checkbox" value="3" />Beanstream
</label>
</a>
</li>
</ul>
<p>------------------------------</p>
<div class="control-group">
<label for="Configuration_paypalId" class="control-label">Paypal Id</label>
<input type="text" value="" id="Configuration_paypalId" name="Configuration[paypalId]" maxlength="60" class="span4 option option1" />
<p class="help-block">Merchant id or email of the Paypal account</p>
</div>
<div class="control-group">
<label for="Configuration_stripeId" class="control-label">Stripe Id</label>
<input type="text" id="Configuration_stripeId" name="Configuration[stripeId]" maxlength="60" class="span4 option option2" />
<p class="help-block">Stripe id or email of the Stripe account</p>
</div>