Problem customizing a CSS stepper using Jquery or Vanilla Js - javascript

I am creating a Mullti-phase form using HTML and CSS which works fine. It has got a stepper at the top whereby I want to disable the 2nd and subsequent fields until a submit event is triggered on a button of the 1st phase. The code below controls the steppers. It has custom ids to control each stepper. When I add disabled property to the code the steppers dont move. How can I use vanilla Js or some jquery to make sure only the 1st phase is shown while others are disabled when a user first visits and form and subsequent phases only appear when an event is triggered in the previous phase ?
~ Thanks
Js Fiddle link for CSS and HTML code
http://jsfiddle.net/8c4ktyq5/
Raadio buttons that controls the steppers
<input checked='checked' id='step-1' name='step' type='radio'>
<input id='step-2' name='step' type='radio'>
<input id='step-3' name='step' type='radio'>
<input id='step-4' name='step' type='radio'>
<input id='step-5' name='step' type='radio'>

Related

HTML onclick="" doesn't work with radio button

I'm making a flask website with bootstrap styling and I have a form with some radio style buttons (made with <input> html tag). I've been trying to call a js function through onclick="" but for me it only seems to work with real buttons (<button> tags). Here's my code.
<label id="multiBot" class="bsstyle" data-toggle="collapse" href=".multi-collapse">
<input type="checkbox" name="multis" checked autocomplete="off" id="mult" value="Mults" onchange="canvititol()"> Text
</label>
Okay, I found that I can make it work just by changing onclick="" for onchange="".

Radio button intercepting unchecked event in Angular/Javascript

I am writing an Angular component which uses radio button (Need to use default radio buttons due to project constraints).
I need to print the value of the radio button (whether it is checked or unchecked). Like following:
<input type="radio" (change)="onUpdate($event)">
<p>{{isActive}}</p>
In the component something like this:
onUpdate(event) {
this.isActive = event.target.checked;
}
But this doesn't work as the change event is not triggered when the radio button is unchecked. Is there any way to intercept the event when the radio button is unchecked?
Please help. I am stuck. Dummy app link here
Edit: What I am trying to do
I am trying to write a custom radio button so that I can styles it on my own. I cannot write a radio-group component. Hence I need a wrapper component around the default one. Something like Stackblitz-link. I need the unchecked event because I have some custom element which has to be notified about this. Any way to achieve this ?
Use a checkbox, style it like a radio button. Seems to be the easiest solution and of course use ng-model instead of onChange.
You could replace (change) with (click), because every click on the radio button is a change anyway.
<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>
The above is a solution, but I'd use this:
<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>
It binds your radio button to your isActive property, so it changes dynamically with clicking.
So using two radio buttons got this working for me, let me know if you can model this for your application.
<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>
I am setting checked to false by default in my component.
Can you please try to adjust this logic with your code? Checking some new radio will uncheck other and we can keep track of this behavior.
<p>
<input type="radio" name="r1" value="one" [(ngModel)]="isActive">
<input type="radio" name="r2" value="two" [(ngModel)]="isActive">
<input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>
<p>{{isActive}}</p>
Stackblitz link

Clear Checkbox when Radio Button selection is Changed

I am using a form builder with field IDs in Wordpress. I need to uncheck a specific checkbox if a specific radio button selection is changed. The radio button's field ID is 180. The checkbox's field ID is 640. Here's what I tried first:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[180]"]').change(function(){
$('input[name="item_meta[640]"]').val('');
})
})
</script>
Note that this script was originally written to change the value of a dropdown, not a menu. The only change I made to the code was changing "select" to "input" on line 3.
I've also tried changing
.val('');
to
.attr('checked', false);
and also to
.removeAttr('checked');
None of these work. The checkbox remains checked when the radio button is changed. Does anyone have any ideas? Thanks in advance!
UPDATE: Here are the two relevant form fields in HTML:
<div id="frm_field_180_container" class="frm_form_field form-field frm_required_field frm_top_container">
<label class="frm_primary_label">Pricing Categories
<span class="frm_required">*</span>
</label>
<div class="frm_description">Select your meta-category then locate your entry fee in the subsequent dropdown.</div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-0" value="Independent Film & Videos" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-0">Independent Film & Videos</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-1" value="Film / Video for TV & Cable Production" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-1">Film / Video for TV & Cable Production</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-2" value="TV Ads, PSAs, Screenplays, New Media, Websites, etc." class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-2">TV Ads, PSAs, Screenplays, New Media, Websites, etc.</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-3" value="Student Entry of Any Category (with 2 Additional Categories Free) - $45" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-3">Student Entry of Any Category (with 2 Additional Categories Free) - $45</label></div>
</div>
and
<div id="frm_field_640_container" class="frm_form_field form-field frm_top_container frm_last_third">
<label class="frm_primary_label">Apply Early-Bird Discount
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_640-0"><input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" /><label for="field_640-0">1-3 Categories: $5</label></div>
</div>
The following approach appears to work:
$('input[name="item_meta\\[180\\]"]').change(function(){
$('input[name="item_meta\\[640\\]\\[\\]"]').prop('checked',false);
});
JS Fiddle demo.
Note that I removed the onclick (since they weren't defined, their absence generated errors, and if you're using jQuery why are you even using in-line event-handlers?). Also, the escaping of the square-brackets (using the \\ characters).
References:
prop().
You've got a mismatch for the name of the checkbox, between your HTML and your JQuery . . .
HTML
<input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" />
Here, the name attribute is item_meta[640][].
JS
$('input[name="item_meta[640]"]').val('');
Here, the name attribute is item_meta[640].
Because of that, the selector is not matching the checkbox. If you update you JQuery selector to $('input[name="item_meta[640][]"]'), it should work fine.
As noted by Dave Thomas, you are better going with .prop('checked', false); to uncheck the box.

Checkbox RadioButton behaviour

I'm trying to implement bootstrap theme into new style for OpenLayers Layer Switcher control.
In bootstrap examples,I have noticed that input elements are nested within label elements like this:
<label class="radio span2">
<input type="radio" value="option1">
Cash
</label>
<label class="radio span2">
<input type="radio" value="option2">
Invoice
</label>
<label class="radio span2">
<input type="radio" value="option3">
Discover
</label>
It seems that when you click on the label of a radio button, it gets checked but not triggered. But when you click on the radio itself, it does get triggered. The same thing happens with checkboxes.But even if checkboxes are hit checked,click event is not triggered this time.
You can check out the code here
How can I solve this ?
You have registered a click event handler for your controls. If you don't click on a control the handler will not be called.
When a label is associated with an element, then a click on it will 'activate' the element. In case of a checkbox or radio button this means check / checked it.
Checkboxes can also be changed by other means, e.g. keyboard. So a click event handler is not the best choice. Use the change event instead.

check html checkbox using a button

I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"
While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.
This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>
How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.
If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>

Categories

Resources