I am trying to do set the Data bind visibility on the section like below
<div class="col-md-6" data-bind="visible: !sameAsShippingAddress() || !hasCustomerAccNum()">
Both the sameAsShippingAddress and sameAsShippingAddress are the check box fields, when either one of the checkbox is selected the the div class should be invisible
Two check box fields are
<div class="form-check" style="float:left;">
<input class="form-check-input position-static" type="checkbox" id="HasCustomerAccNum" value="HasCustomerAccNum" data-bind="checked: hasCustomerAccNum" />
<label>Has Customer Account Number?</label>
</div>
<div class="form-check" style="float:right;">
<input class="form-check-input position-static" type="checkbox" id="SameAsShippingAddress" value="SameAsShippingAddress" data-bind="checked: sameAsShippingAddress" />
<label>Billing address is same as Shipping Address</label>
</div>
and the js file, I set their fields as
self.sameAsShippingAddress = ko.observable(false);
self.hasCustomerAccNum = ko.observable(false);
The issue is only when both the fields are checked the div class is invisible
What am I missing here. I want the right side section to be invisible even when one check box is checked
<div class="col-md-6" data-bind="visible: !sameAsShippingAddress() && !hasCustomerAccNum()">
Related
I am looking to show form fields only if the user inputs a specific value in a different field. Specifically, I am asking users to input the number of children they have. If the user inputs 1, then a set of fields will appear for the user to add additional information on their child. If the user inputs 2, then 2 sets of fields will appear, one per child. From a JS perspective, I am looking to hide the field sets based on the response.
This is my HTML:
Form field based on which the JS should be based on:
<html>
<div class="_form_element _field10 _full_width ">
<label for="field[10]" class="_form-label">
How many children do you have? <span style="color: #eb636d;">*</span>
</label>
<div class="_field-wrapper">
<input type="text" id="field[10]" name="field[10]" value="" placeholder="" required />
</div>
</div>
</html>
Field set to appear based on value entered in the field above:
<html>
<div id=1 class="child_1">
<div class="_form_element _field51 _full_width " >
<label for="field[51]" class="_form-label">
First child's name
</label>
<div class="_field-wrapper">
<input type="text" id="field[51]" name="field[51]" value="" placeholder="" />
</div>
</div>
<div class="_form_element _field55 _full_width " >
<label for="field[55]" class="_form-label">
First child's birthdate
</label>
<div class="_field-wrapper">
<input type="date" class="date_field" id="field[55]" name="field[55]" value="" placeholder="" />
</div>
</div>
</div>
</html>
Thanks
My StackBlitz example
I have built an Angular Reactive Form. On it I have 2 radio buttons, one selected by default(however in my example its not showing selected on the UI).
I have an ngIf div that should display if the radio button has changed or touched || Dirty, e.g
<div formGroupName="radioButtons" class="form-group col-6 pl-0 pt-3">
<div class="form-check-inline">
<label for="yes" class="col-12 customradio"
><span>yes</span>
<input value="yes" id="yes" type="radio" name="radiot" formControlName="radiot"/>
</label>
<label for="no" class="customradio"
><span>no</span>
<input value="no" id="no" type="radio" name="radiot" formControlName="radiot" />
</label>
</div>
<div class="form-check__related" *ngIf="radioButtons.radiot.touched">
DISPLAY ME
</div>
However, I cant get it to work and get
Error: Cannot read property 'radiot' of undefined
juts replace
*ngIf="radioButtons.radiot.touched"
with
*ngIf="form.controls.radioButtons.touched"
Your problem will be solved
https://stackblitz.com/edit/angular-pfctfu
juste add a getter method inside your ts which return the form group :
get radioButtons(){
return this.form.get('radioButtons') ;
}
inside your html
{{radioButtons.controls.radiot.touched}}
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
I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>
Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/
You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)
There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.
The Problem
I am trying to run some ajax on one my pages for my website, basically I have three checkboxes all of which on pageload are unselected, when a checkbox is clicked I need to be able load in via ajax the relevant HTML. This system is currently a PHP script that depending on what the POST is set returns a different view, so I think all I need to is send the POST via AJAX, but I need to do everytime a new checkbox is checked.
My HTML looks like this,
div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
</div>
My current attempt was to ascertain whether the input has been clicked so I have done this with my javascript, though this is probably wrong,
$('input.radio').click(function(){
if($(this).hasClass('clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked');
}
});
You can do
$('input.radio').change(function(){ // will trigger when the checked status changes
var checked = $(this).attr("checked"); // will return "checked" or false I think.
// Do whatever request you like with the checked status
});
Also, if you say
three checkboxes all of which on
pageload are unselected
They should have checked=""
$("input:checkbox:checked")
will return all checkboxes that are currently checked.
The event handler .change() will bind to whenever the input changes, so for radios/checkboxes, it binds to whenever they're toggled, so no need to use click().
$(".radio:checkbox").change(function() {
var boxChecked = $(this).is(":checked");
if(boxChecked) {
...do ajax...
}
});
But this is kind of sloppy too, considering you could use the toggle() method instead. Plus, are you wanting to destroy the html when they uncheck? Or is this a one time deal?
$('input:checkbox').bind('click', function(e){
switch(e.target.id){
case 'someid':{
if($(this).is(':checked')){
//ajax call here
}
break;
}
case 'anotherid':{
// something
break;
}
}
});
Actually, you could change the arragment in checking first if the element
is checked or unchecked and then switch through the id's.. hmm