OK, I have an issue with some code and I'm really not sure how to code the outcome that I want to achieve.
I'm working on a site using Laravel 5.2 and I'm having an issue with hiding and showing specific divs based on the status of a checkbox. These are in a #foreach loop but I'm fairly sure that the laravel/#foreach isn't the issue, it's my lack of jQuery experience.
So here's some code.
#foreach ($event->extras()->get() as $extra)
<p>{{ $extra->name }}</p>
<p>{{ $extra->cost }}</p>
<p><input type="checkbox" name="extra-checkbox" id="extra-checkbox" value=""></p>
<div id="extra-info">
#if ($extra->infoRequired == "1")
<input type="text" name="extra-info-text" class="form-control">
#endif
</div>
#endforeach
The issue I'm having is that the $extra variable ID's ($extra->id) in the loop could be very different so a for-loop in the javascript is out. Each checkbox needs to show/hide only the specific "extra-info" div it is associated with.
How do I modify the following code to make it work for each individual $extra independently? I've considered putting the $extra->id into the class or div id but I can't figure out how to then implement it in the javascript.
$(document).ready(function() {
$('#extra-checkbox').change(function() {
if(this.checked)
$('#extra-info').fadeIn('fast');
else
$('#extra-info').fadeOut('fast');
Edit
I've added an id to the html as it's omission was my copying error. The issue I need to get my head around is that there will be multiple checkboxes (they're actually in a table, not <p>, but I was trying to make the code readable). Each checkbox is associated with an $extra and each $extra has it's own div that needs to be shown when the checkbox is checked.
There are a few mistakes in your code.
You cannot duplicate id values. You are doing it. Change it class.
Don't put <input /> inside <p>, instead, wrap it inside <label>.
Using $('#extra-checkbox') doesn't work, because it is name not id. Use $('[name="extra-checkbox"]').
This can be done using CSS itself. See below.
See the working example here:
input[name="extra-checkbox"] + input[name="extra-info-text"] {display: none;}
input[name="extra-checkbox"]:checked + input[name="extra-info-text"] {display: inline;}
<div class="entry">
<p>Name 1</p>
<p>Cost 1</p>
<div class="form-stuff">
<input type="checkbox" name="extra-checkbox" value="">
<input type="text" name="extra-info-text" class="form-control">
</div>
</div>
<div class="entry">
<p>Name 2</p>
<p>Cost 2</p>
<div class="form-stuff">
<input type="checkbox" name="extra-checkbox" value="">
<input type="text" name="extra-info-text" class="form-control">
</div>
</div>
<div class="entry">
<p>Name 3</p>
<p>Cost 3</p>
<div class="form-stuff">
<input type="checkbox" name="extra-checkbox" value="">
<input type="text" name="extra-info-text" class="form-control">
</div>
</div>
<div class="entry">
<p>Name 4</p>
<p>Cost 4</p>
<div class="form-stuff">
<input type="checkbox" name="extra-checkbox" value="">
<input type="text" name="extra-info-text" class="form-control">
</div>
</div>
You don't need jQuery or JavaScript for this.
You don't have input with id extra-checkbox, try this:
$('input[name="extra-checkbox"]').change(function() {
if(this.checked) {
$('#extra-info').fadeIn('fast');
} else {
$('#extra-info').fadeOut('fast');
}
});
or use a class since you should not have more then one element with same id.
Use pusedo selctors to get if checkbox is checked or not
$(document).ready(function() {
$('#extra-checkbox').change(function() {
if($(this).is(":checked"){ //Return true/false
$('#extra-info').fadeIn('fast');
}
else{
$('#extra-info').fadeOut('fast');
}
})
EDIT AFTER COMMENTS
You can use which is prefix selector, which mean if any id which start with extra_checkbox will respond to this snippet.
$('div[id^="extra-checkbox"]')
For more information visit HERE
NOTE: id need to be unique as per W3C standard
You are adding the same id to multiple divs, this is bad. You need to add a unique id or a unique data attribute to every element and reference it in you change event.
Also:
$('#extra-checkbox')
should be this:
$('*[name="extra-checkbox"]')
This should work:
#foreach ($event->extras()->get() as $extra)
<p>{{ $extra->name }}</p>
<p>{{ $extra->cost }}</p>
<p><input type="checkbox" name="extra-checkbox" value="{{ $extra->name }}"></p>
<div class="extra-info" data-name="{{ $extra->name }}">
#if ($extra->infoRequired == "1")
<input type="text" name="extra-info-text" class="form-control">
#endif
</div>
#endforeach
then
$(document).ready(function() {
$('*[name="extra-checkbox"]').change(function() {
if($(this).prop('checked'))
$('.extra-info[data-name="'+$(this).data('name')+'"]').fadeIn('fast');
else
$('.extra-info[data-name="'+$(this).data('name')+'"]').fadeOut('fast');
Related
I have checkboxes inside a ngFor loop and when I click on any one of the checkboxes only the first one is getting checked & unchecked and updating only first one's status.
HTML template :
<div *ngFor="let num of count" class="m-b-20">
<div class="checkbox">
<input type="checkbox" id="check" name="num.value" value="num.checked" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/>
<label for="check"></label>
</div>
{{num.checked}}
</div>
Check value for name, you've used different for each element: num.value. This should be the same so that it works:
<div *ngFor="let num of count" class="m-b-20">
<div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/>
<label for="check"></label> </div>{{num.checked}}
</div>
checkbox-list is the new name
I think you are having the same name for the checkboxes. On iterating try to give different names to the checkbox. It will work.
First remove id and value atttribute from your code.
<div *ngFor="let num of count" class="m-b-20">
<div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" [checked]="num.checked==true" (click)="clicked(num)" ngDefaultControl/>
<label for="check"></label> </div>{{num.checked}}
this atttribute doesn't need if you are using[(ngModel)] in checkbox. check this will be working fine.
I had similar issue in Angular 6/ Bootstrap 4.
When clicking on label, it would not check the checkbox. When clicking on checkbox, it would work, but clicking on label, it would not work.
Posting my solution here for future reference.
<ng-container *ngFor="let item of items">
<div class="col-5 col-sm-5">
<div class="form-group form-check">
<!-- wrap the label around the checkbox -->
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="item_check" id="check_{{item.ID}}">
{{item.name}}
</label>
</div>
</div>
</ng-container>
So if you notice, I had to wrap the checkbox inside the label.
bind the id in input tag, and for in label tag.
<div *ngFor="let num of count" class="m-b-20">
<div class="checkbox">
<input type="checkbox" name="checkbox-list" [id]="num.value" (click)="clicked(num)" ngDefaultControl/>
<label [for]="num.value"></label>
</div>
{{num.checked}}
</div>
The problem is that id is same for all of them , so dynamically add something to each row's id and for respectively then it will work
Working on revamping some old code and needing some help on this last addition. Basically can have a variable number of checkboxes and need to get the labels text to any of those checkboxes and append that text to another div. Have rewritten this a ton of times and used a lot of others code but nothing seems to be working. Have seen several similar questions on here but none of those have worked for a solution to this problem.
Problem:
Get a labels text associated to it's input checkbox. Then once that text value is gathered append it to a separate div.
Note:
The checkboxes have an ID and a VALUE that are the same because of some different code versions just trying to get them to work. Would like a solution using VALUE only.
HTML:
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
JS:
$(".cat_filter").live('click', function() {
$(this).find("input:checkbox").attr("checked", true);
var labelName = $(this).find("label[for='"+$(this).attr("id")+"']").text();
labelName.appendTo('#labelName');
});
Fiddle:
http://jsfiddle.net/wfuller/o25z9w0f/1/
Any help would be greatly appreciated.
So this should solve your problem:
$(".cat_filter").on('click','input',function() {
//On click on an input field. if this isn't OK tell me and I will change it again.
$('#labelName').html($('label[for='+$(this).prop('id')+']').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
Greetings from Vienna
var nodeList = document.querySelectorAll('input[type ="checkbox"]');
var div = document.getElementById('myDiv');
for (node in nodeList) {
div.innerHTML += node.text; //or label if you set that attribute on the element
}
Does not rely on jQuery
I have this HTML:
<fieldset style="" title="Variaciones" id="product-create-step-3" class="fstep">
<legend>Variaciones</legend>
<section id="choices">
<input type="checkbox" value="24" id="24" name="Size"> Size
<input type="checkbox" value="25" id="25" name="Color"> Color
<section style="display: none" class="options_holder"></section>
<section style="display: none" class="variations_holder"></section></section>
</fieldset>
I need to create some input based on what checkbox/es was marked. For example if I mark first one 'Size' I should obtain this:
<section style="display: none" class="options_holder">
<input name="size[24][]" value="" placeholder="Write your size" />
</section>
if I mark second one 'Color' I should obtain this:
<section style="display: none" class="options_holder">
<input name="color[25][]" value="" placeholder="Write your color" />
</section>
if I mark both 'Size' & 'Color' I should obtain this:
<section style="display: none" class="options_holder">
<input name="size[24][]" value="" placeholder="Write your size" />
<input name="color[25][]" value="" placeholder="Write your color" />
</section>
How I would do that?
UPDATE 1
I'm trying to get which checkbox was checked by doing this:
$("#choices :checked").each(function() {
console.log(this.id + "was checked");
});
But it's not working
UPDATE 2
I realize into another problem, how I check when a checkbox was checked and after trigger some code without know any data of the checkbox? I have a code that generates check-boxes on the fly so I'll never know their name's or id's or any other data. My template for that creation looks like this:
<input type="checkbox" name="{{ entity.getLabel|lower }}" id="{{ entity.getLabel|lower ~ "_choice" }}" value="{{ entity.getId }}" /> {{ entity.getLabel }}
Where for example name could take "color" and in that case id will be "color_choice" or name could take "size" and in that case id will be "size_choice", sometimes one is created some time both are created. What I need to know and I don't is how to know which check-box was checked and when trigger some event as for example create some others input's on the fly. How do I deal with this part too?
So, your javascript should work if you change your selector to include the element that uses the pseudo-selector:
$("#choices input:checked").each(function() {
console.log(this.id + "was checked");
});
As for accessing the attribute values, you can use either the native javascript object that you're using, i.e.:
console.log("value is " + this.value);
Or you can use jQuery's attr()
console.log("name is " + $(this).attr('name'))
A working example showing both cases, as well as having attached the event to any click of input items is at this jsfiddle:
http://jsfiddle.net/k3B73/
<fieldset style="" title="Variaciones" id="product-create-step-3" class="fstep">
<legend>Variaciones</legend>
<section>
<input type="checkbox" value="24" id="24" name="Size" id='size_choice'> Size
<input type="checkbox" value="25" id="25" name="Color" id='color_choice'> Color
<section style="display: none" class="options_holder" id='options_holder'></section>
<section style="display: none" class="variations_holder"></section>
</section>
</fieldset>
<script type="text/javascript">
$(document).ready(function(){
$('#size_choice').click(function(){
if ($(this).is(':checked'))
$("#options_holder").append('<input name="size[24][]" value="" placeholder="Write your size" id="size" />');
else
$("#size").destroy();
});
$('#color_choice').click(function(){
if ($(this).is(':checked'))
$("#options_holder").append('<input name="color[25][]" value="" placeholder="Write your color" id="choice" />');
else
$("#color").destroy();
});
})
</script>
I write following function to read inputs from my fieldset, it works but I have no idea how to read value of selected this way input
$$('#split_edit div label input').each(
function(item) {
console.log(item);
}
);
This is my html structure, I can't read input value using its ID because they are dynamically generated.
<fieldset id="split_edit">
<div class="top-10">
<label>
<span class="span-3 left">Item 1 (%)</span>
<input type="text" class="text" name="packet_1" value="0" id="packet_3">
</label>
</div>
<div class="top-10">
<label>
<span class="span-3 left">Item 1 (%)</span>
<input type="text" class="text" name="packet_2" value="0" id="packet_7">
</label>
</div>
</fieldset>
How to select value from input selected by each function in PrototypeJS?
I'm sorry for obvious question but I have started using PrototypeJS several hours ago.
Using item.value:
$$('#split_edit div label input').each(function(item) {
console.log(item.value);
});
I have 2 divs, the first one has the label with the content to show, but when you click the "edit" button, it should show you the div="edit" and the content of the 1st label inside of the input that is linked to it (same id).
By the other way, I saw sites that when you type something inside that input, the original label of the "preview" div is getting updated in realtime.
Could someone help me with the script? Thank you!
<html>
<body>
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
<label id="companyCountry" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit"/>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyName" />
<label>Company Country: </label>
<input type="text" id="companyCountry" />
</div>
</body>
</html>
You can use something like below. Notice though that I changed the id of the fields to be different. It is not a good practice to give multiple controls on the same page the same id. Some browsers do not work with this and it really doesn't make sense anyways.
$(document).ready(
function()
{
$("#companyNameText").keypress(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keypress(
function()
{
$("#companyCountryLabel").html(this.value);
});
});