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>
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.
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.
I have following 32 checkbox with 32 input field. Initially each input field is hidden. I want to show each input field when the corresponding checkbox is clicked. If the checkbox is unchecked then input field will be hidden.
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
I can hide the input field when page is load but can't get the idea what is the jQuery code to show/hide input field when checkbox is checked / unchecked.
jQuery Code :
$(document).ready(function () {
$('.ch_for').hide();
)};
You could use on click event with .toggle() to show/hide related input like :
$('.ch_for').hide();
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggle();
})
To avoid the use of $('.ch_for').hide(); you could assign a class to all the input to hide them by default (hide for example), then toggle this class on click :
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggleClass('hide');
})
Hope this helps.
$(document).ready(function () {
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggle();
})
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch01">CH01</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch03">CH03</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch04">CH04</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
HTML:
<div class="container">
<input type="checkbox" id="100" value="100" />
<div class='area100 hidden'>
<input></input>
</div>
<br />
<input type="checkbox" id="101" value="101" />
<div class='area101 hidden'>
<input></input>
</div>
<br />
</div>
JavaScript:
$(".container :checkbox").click(function () {
var testVar = ".area" + this.value;
if (this.checked) $(testVar).show();
else $(testVar).hide();
});
Here is a working JSFiddle example.
You can use:
change event
closest to get the related label
next to get the text box
toggle
trigger to initialize
The snippet:
$('.checkbox :checkbox').on('change', function(e) {
$(this).closest('label').next(':text').toggle(this.checked);
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[1]" value="ch01">CH01</label>
<input type="text" name="ch_for[1]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[1]" value="ch02">CH02</label>
<input type="text" name="ch_for[2]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[2]" value="ch03">CH02</label>
<input type="text" name="ch_for[3]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[3]" value="ch04">CH04</label>
<input type="text" name="ch_for[4]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
Try this :
<div class="checkbox form-inline">
<label><input type="checkbox" id = "CB1" name="ch_name[]"
value="ch02">CH02</label>
<input id = "IP1"type="text" name="ch_for[]" value="" placeholder="Channel
details" class="form-control ch_for">
</div>
$('#CB1').click(function() {
$('#IP1')[this.checked ? "show" : "hide"]();
});
Working Demo:
http://jsfiddle.net/GBSZ8/678/
$(document).ready(function() {
$('.ch_for').hide();
$('.checkbox').each(function() {
var $checkbox = $(this);
$checkbox.find('input[type="checkbox"]').change(function() {
var $input = $checkbox.find('input[type="text"]');
$(this).is(":checked") ? $input.show() : $input.hide();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label>
<input type="checkbox" name="ch_name[]" value="ch02">CH01</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label>
<input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
Assuming your HTML is like the following with other checkboxes:
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[2]" value="ch02">CH02</label>
<input type="text" name="ch_for[2]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[3]" value="ch03">CH03</label>
<input type="text" name="ch_for[3]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
......
jQuery: We can use toggle();
jQuery(document).ready(function($){
$('.ch_for').hide(); //Also we can initially hide it using CSS;
$('div.checkbox input[type="checkbox"]').change(function(){
$('.ch_for',this.parentNode.parentNode).toggle( $(this).is(':checked') );
}).trigger('change');
});
Here is the working sample: http://jsfiddle.net/kkpu0s5r/
$('input[type="checkbox"]').click(function(){
if($(this).is(':checked')){
$('.ch_for').hide();
}else{
$('.ch_for').show();
}
});
I would like to make a java script what will make comment field (textarea) as mandatory when you will select a selection list , for now I just make a required icon next to comment code below and stuck on it code bellow.
Thank in advice for all help
Code what I Wrote :
<select id="ddlViewBy">
<option value="1">AJS.$("#comment-popup").parent().children('label').append('<span class="aui-icon icon-required"></span>');</option>
Source Code of my Website :
<form action="/jira/rest/tempo-rest/1.0/worklogs/{issueKey}" class="aui tempo-form" data-form-type="" name="tempo-panel-form-popup" method="post">
<div class="form-body" style="max-height: 393px;">
<input type="hidden" name="id" value="">
<input type="hidden" name="type" value="issue">
<input type="hidden" name="use-ISO8061-week-numbers" value="false">
<input type="hidden" name="ansidate" value="">
<input type="hidden" name="ansienddate" value="">
<input type="hidden" name="selected-panel" value="">
<input type="hidden" name="analytics-origin-page" value="">
<input type="hidden" name="analytics-origin-view" value="">
<input type="hidden" name="analytics-origin-action" value="">
<input type="hidden" name="startTimeEnabled" value="false">
<input type="hidden" name="tracker" value="false">
<input type="hidden" name="preSelectedIssue" class="tempoIssueKey" value="AB-5048">
<input type="hidden" name="planning" value="false">
<div class="field-group">
<label for="user-picker-popup">User</label>
<div class="tempo-pickers">
<div class="aui-ss medium aui-ss-has-entity-icon" id="user-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="user-picker-popup-field">
<div class="aui-list" id="user-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span><img class="aui-ss-entity-icon" alt="" src="google.pl"> </div>
<select id="user-picker-popup" class="plan-user-picker dialog-user-picker aui-ss-select" name="user" data-container-class="medium" data-counter="popup" data-input-text="Jon Smith" multiple="multiple" style="display: none;">
<optgroup id="tempo-user-suggested-popup" data-weight="0" label="">
<option selected="selected" style="background-image:url(/jira/secure/useravatar?size=small&ownerId=jsmith&avatarId=12927)" value="jsmith">Jon Smith</option>
</optgroup>
</select>
</div>
</div>
<div class="field-group tempo-issue-container">
<label for="tempo-issue-picker-popup">Issue </label>
<div class="aui-ss" id="tempo-issue-picker-popup-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="tempo-issue-picker-popup-field">
<div class="aui-list" id="tempo-issue-picker-popup-suggestions" tabindex="-1"></div><span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span>
</div>
<select id="tempo-issue-picker-popup" class="tempo-issue-picker tempo-picker-all-issues tempo-issue-picker-logwork aui-ss-select" name="issue" multiple="multiple" style="display: none;">
<option selected="selected" value="AB-5048">AB-5048 - Holiday - Jon Smith 2016-06-13-2016-06-13</option>
</select>
</div>
<div class="tempo-datepicker">
<div class="field-group tempo-show-period">
<label for="showPeriod-popup">Period</label>
<div class="checkbox">
<input id="showPeriod-popup" name="showperiod" type="checkbox" value="showperiod" class="showperiod tempo-show-period"> </div>
</div>
<div class="field-group datepicker ">
<label for="datefield-popup">Date</label>
<input type="text" id="datefield-popup" name="date" size="7" value="2016-06-09" class="text medium-field"> <span id="datefield-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
<div class="field-group enddate datepicker " style="display: none;">
<label for="enddate-popup">End date</label>
<input type="text" id="enddate-popup" name="enddate" size="7" value="2016-06-09" class="text medium-field"> <span id="enddate-trigger-popup" class="aui-icon icon-date tempo-datepicker-trigger" tabindex="0">Select a date</span> </div>
</div>
<div class="tempo-timepicker resetable">
<div class="field-group tempo-worked-hours">
<label class="timepicker-label" tmp="Work per day" for="time-popup">Worked </label>
<input autocomplete="off" type="text" id="time-popup" name="time" size="3" value="" class="tempo-time text short-field"> </div>
<div class="remaining-and-billed-hours-container">
<div class="field-group tempo-logged-work">
<label for="totalSpent-popup">Logged</label> <span class="totalSpent" id="totalSpent-popup">8h</span> </div>
<div class="field-group tempo-remaining-estimate" style="clear: left;">
<label for="remainingEstimate-popup">Remaining estimate </label>
<input type="hidden" id="remainingEstimateHidden-popup" size="3" maxlength="6" value="">
<input type="text" id="remainingEstimate-popup" name="remainingEstimate" size="3" maxlength="6" value="" class="validate remaining resetable text short-field"> </div>
<div class="field-group tempo-original-estimate">
<label for="originalEstimate-popup">Original estimate</label> <span class="originalEstimate" id="originalEstimate-popup"></span> </div>
</div>
</div>
<div class="field-group resetable">
<label for="comment-popup">Description</label>
<textarea id="comment-popup" name="comment" class="tempo-comment textarea resetable"></textarea>
</div>
<ul id="errors-popup" class="error-list"> </ul>
<p style="width: 97%; margin: 0 0 10px 0;" id="tempo-logwork-issue-hint" class="hint-container overflow-ellipsis" title="Pressing w also opens this dialog box"> <a class="shortcut-tip-trigger" title="Click to view all shortcuts" href="#" tabindex="-1">Shortcut tip:</a> Pressing <strong>w</strong> also opens this dialog box </p>
</div>
<div class="buttons-container form-footer"> <span id="logwork-spinner" class="aui-icon aui-icon-wait" style="display:none"></span>
<div class="buttons"><span class="icon throbber"></span>
<input type="checkbox" id="issue-add-another" class="tempo-add-another-input" value="Another">
<label for="issue-add-another" class="tempo-add-another-label"> Log another </label>
<input type="submit" id="issue-add-button" class="button button-panel-button" accesskey="s" value="Log Work"> <a id="tempo-logwork-issue-cancel" class="cancel" href="/jira/browse/AB-5048?" accesskey="'">Cancel</a> </div>
</div>
Looks like you working inside the atlassian product suite.
So You make a html field mandatory you can add the required attribute
which is workable in all modern browsers except safari I thing please check this
the js(jquery) to add a attribute would be
$('#comment-popup').attr('required', 'required');
if it is a AUI-select or AUI input read the docs there
https://docs.atlassian.com/aui/latest/docs/single-select.html on a select for instance there is a non-empty attribute
I am wondering if its possible to be able to create an html type brochure that can get printed or saved to pdf but the html template would have a few things that the user can alter such as adding there own images putting there details in and a description of sorts.
I would prefer to use javascript,html,css and if necessary php.
I am at the moment kind of stuck at the moment I have created an html form so it does not go further than that.
Is there an api of sorts that I can use to create several templates and allow the users to be able add what they need.
Here is the form so far:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="FlyCreator.aspx.vb" Inherits="FlyCreator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flyer Creator test</title>
<link rel="stylesheet" type="text/css" href="css/mainFlyer.css" media="all">
<script type="text/javascript" src="jquery/view.js"></script>
</head>
<body id="main_body" >
<div id="form_container">
<h1><a>Untitled Form</a></h1>
<form id="form_Flyer" class="appnitro" enctype="multipart/form-data" method="post" action="">
<div class="form_description">
<%--<h2>Flyer Creator Test</h2>--%>
</div>
<ul >
<li class="section_break">
<h3>Name and Title:</h3>
<p>Leave fields blank if they are not needed</p>
</li>
<li id="li_1" >
<label class="description" for="element_1">Name </label>
<span>
<input id="element_1_1" name= "element_1_1" class="element text" maxlength="255" size="20" value=""/>
<label>First</label>
</span>
<span>
<input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="20" value=""/>
<label>Last</label>
</span>
<span>
<input id="element_1_3" name="element_1_3" class="element text" maxlength="50" size="40" />
<label>Title</label>
</span>
</li>
<li class="section_break">
<h3>Business Address:</h3>
<p></p>
</li>
<li id="li_3" >
<div>
<input id="element_3_1" name="element_3_1" class="element text" maxlength="35" size="30" />
<label>Company Name</label>
</div>
<div>
<input id="element_3_2" name="element_3_2" class="element text" value="" type="text" maxlength="35" size="30"/>
<label for="element_3_1">Street Address</label>
</div>
<div class="left">
<input id="element_3_3" name="element_3_3" class="element text medium" value="" type="text"/>
<label for="element_3_2">City</label>
</div>
<div class="right">
<input id="element_3_4" name="element_3_3" class="element text medium" value="" type="text"/>
<label for="element_3_4"> Province / Region</label>
</div>
<div class="left">
<input id="element_3_5" name="element_3_5" class="element text medium" maxlength="15" value="" type="text"/>
<label for="element_3_5">Postal / Zip Code</label>
</div>
</li>
<li class="section_break">
<h3>Phones,Emails, and Website:</h3>
<p></p>
</li>
<li id="li_21" >
<label class="description" for="element_21" style="text-align:left;color:black"><b>phone no1 :</b> </label>
<div>
<select class="element select medium" id="element_21" name="element_21">
<option value="" selected="selected">Choose Label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph11" value="" maxlength="3" type="text" id="ph11" size="3"/>
<input name="ph12" value="" maxlength="3" type="text" id="ph12" size="3"/>
<input name="ph13" value="" maxlength="4" type="text" id="ph13" size="3"/>
</div>
</li>
<li id="li_22" >
<label class="description" for="element_22">phone no2: </label>
<div>
<select class="element select medium" id="element_22" name="element_22">
<option value="" selected="selected">Choose Label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph21" value="" maxlength="3" type="text" id="ph21" size="3"/>
<input name="ph22" value="" maxlength="3" type="text" id="ph22" size="3"/>
<input name="ph23" value="" maxlength="3" type="text" id="ph23" size="3"/>
</div>
</li>
<li id="li_23" >
<label class="description" for="element_23">phone no3: </label>
<div>
<select class="element select medium" id="element_23" name="element_23">
<option value="" selected="selected">Choose label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph31" value="" maxlength="3" type="text" id="ph31" size="3"/>
<input name="ph32" value="" maxlength="3" type="text" id="ph32" size="3"/>
<input name="ph33" value="" maxlength="3" type="text" id="ph33" size="3"/>
</div>
</li>
<li id="li_5" >
<label class="description" for="element_5">Email : </label>
<div>
<input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<li id="li_6" >
<label class="description" for="element_6">company or personal website: </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="http://"/>
</div>
</li>
<li class="section_break">
<h3>Section Break</h3>
<p></p>
</li> <li id="li_8" >
<label class="description" for="element_8">Photo of your self </label>
<div>
<input id="element_8" name="element_8" class="element file" type="file"/>
</div>
</li> <li id="li_9" >
<label class="description" for="element_9">Main photo of house </label>
<div>
<input id="element_9" name="element_9" class="element file" type="file"/>
</div>
</li> <li id="li_10" >
<label class="description" for="element_10">interior 1 </label>
<div>
<input id="element_10" name="element_10" class="element file" type="file"/>
</div>
</li> <li id="li_11" >
<label class="description" for="element_11">house 2 </label>
<div>
<input id="element_11" name="element_11" class="element file" type="file"/>
</div>
</li> <li id="li_12" >
<label class="description" for="element_12">house 3 </label>
<div>
<input id="element_12" name="element_12" class="element file" type="file"/>
</div>
</li> <li id="li_13" >
<label class="description" for="element_13">company logo </label>
<div>
<input id="element_13" name="element_13" class="element file" type="file"/>
</div>
</li>
<li id="li_14" >
<label class="description" for="element_14">qr code </label>
<div>
<input id="element_14" name="element_14" class="element file" type="file"/>
</div>
</li>
<li id ="li_15">
<label class="description" for="element_15">Opional IEASA logo</label><img src="images/ieasa.gif" />
<div >
<input id="element_15a" name="select1" value="on" type="radio" />On<br />
<input id="element 15b" name="select1" value="on" type="radio" />Off<br />
</div>
</li>
<li class="section_break">
<h3></h3>
<p></p>
</li>
<li id="li_16" >
<label class="description" for="element_16">Property Information:</label>
<div>
<input id="element_16_1" name="element_16_1" class="element text large" value="" type="text"/>
<label for="element_16_1">Street Address</label>
</div>
<div>
<input id="element_16_2" name="element_16_2" class="element text large" value="" type="text"/>
<label for="element_16_2">Address Line 2</label>
</div>
<div class="left">
<input id="element_16_3" name="element_16_3" class="element text medium" value="" type="text"/>
<label for="element_16_3">City</label>
</div>
<div class="right">
<input id="element_16_4" name="element_16_4" class="element text medium" value="" type="text"/>
<label for="element_16_4"> Province / Region</label>
</div>
<div class="left">
<input id="element_16_5" name="element_16_5" class="element text medium" maxlength="15" value="" type="text">
<label for="element_16_5">Postal / Zip Code</label>
</div>
</li>
<li id="li_17" >
<label class="description" for="element_17">Description of property </label>
<div>
<textarea id="element_17" name="element_17" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_18" >
<label class="description" for="element_18">property details </label>
<div>
<textarea id="element_18" name="element_18" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_19" >
<label class="description" for="element_19">property details 2 </label>
<div>
<textarea id="element_19" name="element_19" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_20" >
<label class="description" for="element_20">property details 3 </label>
<div>
<textarea id="element_20" name="element_20" class="element textarea medium"></textarea>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="745249" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
<div id="footer">
</div>
</div>
</body>
</html>
To create and thereafter save/print pdf, you can try "DOMPDF". Its pretty easy to use and good results. Essentially what you would do is create your application and user options as usual using html/css/php etc. Add in your adjustments etc.
Once done, you wrap the result in a php variable called......well for now, called " $html ",
then inside of your processing page you put something like
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("YOURPDFNAMEHERE.pdf");
?>
and the domPDF lib will create a pdf with your html in it.
check it out
https://code.google.com/p/dompdf/
good luck
EDIT***
to expand on this, say that your result from all the edits/user selections is html that looks like this:
(random code)
<table >
<tr>
<td><img src="logo.jpg" alt=""></td>
</tr>
<tr>
<td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
<td>lopan right</td>
</tr>
</table>
then youd assign this code into any php variable. We will call it " $html ". Youd assign it like so:
$html = '
<table >
<tr>
<td><img src="logo.jpg" alt=""></td>
</tr>
<tr>
<td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
<td>lopan right</td>
</tr>
</table>
';
and this below
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("sample.pdf");
?>
takes your $html content and creates the pdf accordingly.