I'm using radio buttons in a ui-kit switcher component:
<ul data-uk-switcher="{connect:'#availabilityButtons', animation:'fade'}">
<button class="uk-button uk-button-primary" type="radio" name="perHourButton" id="perHourButton" value="{{this.spaceId}}" data-uk-tooltip title="Rent hourly">Per Hour</button>
<button class="uk-button uk-button-primary" type="radio" name="'perDayButton" id="perDayButton" namedata-uk-tooltip title="Rent for full days">Per Day</button>
<button class="uk-button uk-button-primary" type="radio" data-uk-tooltip id="perMonthButton" title="Rent for full months">Per Month</button>
</ul>
I want to check which radio button is checked upon form submission, so I am doing the following on the front end:
if (document.getElementById('perHourButton').checked) {
console.log("perHour Button is checked!!");
}
else{
console.log("not checked!!");
}
But I continue getting "not checked". I don't know what I'm doing wrong.
I'm afraid the "radio" value is not valid for the type attribute on a button. That Might be the reason the .checked method does not return true. Try restructuring your html using input with type="checkbox" like so:
<ul data-uk-switcher="{connect:'#availabilityButtons', animation:'fade'}">
<li>
<input class="uk-button uk-button-primary" type="checkbox" name="perHourButton" id="perHourButton" value="{{this.spaceId}}" data-uk-tooltip title="Rent hourly" value="Per Hour"/>
</li>
</ul>
Also added an li tag around the checkbox for valid html.
If the html is generated automatically by the ui-kit (I don't know this framework), you might want to check out if you can use the javascript methods in the documentation to check which button has been clicked (using jQuery) :
$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
if(area == 1){ /* do something if we clicked button with index 1 */ };});
Try this:
if (document.getElementById('perHourButton').checked == true) {
console.log("perHour Button is checked!!");
}
else{
console.log("not checked!!");
}
Related
I have a set of toggle buttons in a custom form using the following lines:
<div class="calc-toggle-wrapper">
<input type="checkbox" :checked="element.isChecked" :value="element.value" #change="change(event, element.label)" />
<label></label>
</div>
I want to make all these toggle buttons "on" or "checked" by default. I added the following to the end of the input () tag but nothing worked:
checked
checked="checked"
checked="true"
The toggle buttons on my form are still unchecked by default. I am not sure why it is not working or what I am doing wrong here. Any suggestions will be very much appreciated. Thank you.
You can use a computed property to set the default value of the checkbox. For example:
computed: {
isChecked: {
get() {
return this.element.isChecked;
},
set(value) {
this.element.isChecked = value;
// Add the value to the form here
}
}
}
Then, in your template, you can bind the checkbox to the isChecked value using the v-model directive:
<div class="calc-toggle-wrapper">
<input type="checkbox" v-model="isChecked" :value="element.value" #change="change(event, element.label)" />
<label></label>
</div>
I'm trying to get it so when one or more checkbox is clicked, I'm able to get a button to appear. I would like the toggle function to work if one or more checkbox is clicked, but instead, it will turn on when I select one checkbox, then turn off during the next selection. I'm sure I've got a couple of unnecessary properties added into here as well, but not too concerned about that. Any help would be appreciated.
HTML: Button
<button class="btn btn-primary"
*ngIf="switchCase" style="float:right"
>Save</button>
HTML: Checkbox Column
<kendo-grid-column field="checkbox" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem id="flexSwitchCheckChecked"
>
<input type="checkbox" (click)="toggleButton(dataItem, 'checkbox'
[checked]="dataItem.checkbox"
[width]="40"
>
TS: Button click method
public switchCase: boolean = false;
toggleButton() {
this.switchCase = !this.switchCase;
pass an event to your function then access its value from typescript class:
Step1(pass an $event):
on *ngFor tag level add an index var
<div *ngFor="let item of items;let i = index" >
<input type="checkbox" (change)="toggleButton($event,i)">
</div>
Step1(get its value):
toggleButton($event,i) {
let newValue = $event.target.value;
// this.switchCase =newValue;
this.items[i].checked = newValue;
}
I have popup in HTML
<div id="term_flags" class="term_flags">
<div class="modal-users-content flagsContent">
<div class="modal-users-header">
<span class="close" ng-click="closeFlagsPopup()">×</span>
<a> Check terminal flags </a>
</div>
<div class="modal-flags-body">
<div class="checkBoxes">
<div class="checkerDiv">
<input type="checkbox" ng-model='reservedFlag' ng-click='changeReservedStatus(reservedFlag)' value="flag" ng-checked="reservedFlag"> Reserved
</div>
<div class="checkerDiv">
<input type="checkbox" ng-model='seasonFlag' ng-click='changeSeasonStatus(seasonFlag)' value="flag" ng-checked="seasonFlag"> Season
</div>
<div class="checkerDiv">
<input type="checkbox" ng-model='networkFlag' ng-click='changeNetworkStatus(networkFlag)' value="flag" ng-checked="networkFlag"> Network
</div>
</div>
<div class="saveFlags">
<button class="button button6" name="changeFlags" value="Change Flags" type="submit" ng-click="saveFlags(item.terminalId)"> Save <p> </button>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
this div's display is none in the beginning. but some ng-click is called from outside of this div and display is changed from none to block and initializes checkbox statuses in this angular function
$scope.changeFlagStatus = function(item)
{
$scope.reservedFlag=(item.reservedFlag=='T')?true:false;
$scope.networkFlag=(item.networkFlag=='T')?true:false;
$scope.seasonFlag=(item.seasonFlag=='T')?true:false;
document.getElementById('term_flags').style.display = "block";
}
everything is okay , but when i click on reservedFlag changeReservedStatus(reservedFlag) method was called and change reservedFlag's checked status
$scope.changeReservedStatus = function(item) {
$scope.reservedForSave=item;
}
I saved this status in other variable and close my popup windows document.getElementById('term_flags').style.display=none
when i open this popup window again my function changeFlagStatus(item) is called again and initializes my variables for checkbox correctly but my checkbox are incorrect checked .
In example when i opened my popup window first time my variables after initialize were
$scope.reservedFlag=true;
$scope.networkFlag=false;
$scope.seasonFlag=true;
and my checkbox statuses were
reservedFlag = checked
networkFlag = unchecked
seasonFlag = checked
then i clicked on reservedFlag and changed his status from checked to unchecked and close my popup windows.
then i opened it second time and changeFlagStatus(item) method is called again to initialize my variables again for checkbox statuses
and i want to get
reservedFlag = checked
networkFlag = unchecked
seasonFlag = checked
again, but result is
reservedFlag = unchecked
networkFlag = unchecked
seasonFlag = checked
How can i get it ?
Angularjs won't work pretty good with $scope's properties for primitive variables when used again and again.
I would recommend you to declare an object to scope and set these flags as properties to this object.
$scope.flags = {};
$scope.changeFlagStatus = function(item)
{
$scope.flags.reservedFlag=(item.reservedFlag=='T')?true:false;
$scope.flags.networkFlag=(item.networkFlag=='T')?true:false;
$scope.flags.seasonFlag=(item.seasonFlag=='T')?true:false;
document.getElementById('term_flags').style.display = "block";
}
and the html part as
<input type="checkbox" ng-model='flags.reservedFlag' ng-change='changeReservedStatus()' value="flag" ng-checked="flags.reservedFlag"> Reserved
Instead of ng-click, I would recommend to use ng-change because that is the event to be used with checkbox. If you use ng-change, the injection of the model as a parameter can be avoided which helps in utilizing angularjs's feature of 2-way binding.
You can add ng-true-value and ng-false-value to the checkbox with true and false to make it more easier to handle instead of ng-value.
I would write the html part like this.
<input type="checkbox" ng-model='flags.reservedFlag' ng-change='changeReservedStatus()' ng-true-value="true" ng-false-value="false"> Reserved
Hope this will fix the issue.
I've customized my form, it's a regular order form that has 2 payment options right before the buy now button. I need to have the data going to autoresponder regardless of the payment option chosen...when they choose option 1 (cash), the form will redirect them to the thankyou page...but now that I have 2 radio buttons, how do I separate these events? How do I make them see the thankyou page if they choose option 1 - and redirect them to paypal if they choose the option 2?
<div class="gt-box">
<div class="gt-labelpos">
<label class="gt-label" id="500">How You Pay Mister?</label>
</div>
<div class="gt-inputpos">
<div class="clrB">
<input name="custom_payme" type="radio" class="gt-req gt-valid__required"
checked="checked" value="cash"></input>
<span class="gt-text">Ca$h</span>
</div>
<div class="clrB">
<input name="custom_payme" type="radio" class="gt-req gt-valid__required"
value="PayPal"></input>
<span class="gt-text">PayPal</span>
</div>
</div>
<em class="clearfix clearer"></em>
</div>
Another approach which will help you prevent redirects is on submit button click to evaluate your radio value and redirect from there. You Javascript code would look something like this
$('.submit-btn').click = function(e) {
e.preventDefault();
if ($('.custom_payme').val() === 'cash') {
$.post("Your post url for cash", form_data);
}
else {
$.post("Your post url for Paypal", form_data);
};
};
On you server side when you receive your form's data, you can check the value of the radio button and according to that redirect respectively.
I have a code
#if (Model.Subscribed)
{
<div>
#Html.CheckBox("Subscribed", false) I would like to unsubscribe!
</div>
}
else
{
<input type="hidden" name=Subscribed" value="true" />
}
I want to hide the whole sentence after checkbox is checked. It is hidden the first time when submit is hit but once when back to form page the checkbox sentence is back with unmarked checkbox.
Can any one help me.
Thanks in advance
Is this what you looking for?
#Html.CheckBox("Subscribed", false, new { onclick = "javascript:$('#spnSubscribed').hide();" }) <span id="spnSubscribed">I would like to subscribe!</span>