I know this is a common question on SO, but none of those solve my issue.
This code doesn't allow me to click/select the radio button. And I am unable to see whats wrong. It may bey something simple that I am missing, I'll be glad if someone can help out.
<div input-field class="col m6" ng-init="student.username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="0" required />
<label>Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="1" required />
<label>Auto Generate</label>
</p>
The problem is I cannot select the Radio button, where set in ng-init or not.
JSFIDDLE: https://jsfiddle.net/znfvmr80/5/
Well the fix was relative easy, and kinda due to me missing out on a for attribute. Thanks to #Joyson for helping out, him thinking got me thinking.
This is the correct code:
<div input-field class="col m6" ng-init="student_username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="0" required id="same_as_reg" />
<label for="same_as_reg">Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="1" required id="autogen" />
<label for="autogen">Auto Generate</label>
</p>
Materialize requires a for attribute label for radio buttons to work.
Thanks everyone!
The code you have given is working fine i think you could check more in your js before or after initialization.
Related
Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !
Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !
im making a website for this company and they have to go through this to make deliveries, for some reason my submit button won't work, sorry im new.
the code i pasted is in 2 different section, the script is on the top while the div class is on the body section.
Tried searching the web but cant seem to find a solution.
</script>
<div class="4u12u$(large)">
<input type="checkbox" id="hygiene" name="hygiene"><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety"><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan"><label for="pan">Pan/Wheel Chuck</label>
</div>
I want to do something like "Check all of this before proceeding" thingy.
You are missing the basics, ive chosen to GET the form here as it applies to the url
<form action="#" method="get">
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked="checked">
<input type="submit" value="submit">
</form>
You can learn about html (and other languages) over at https://www.w3schools.com/ they have some good resources to start from.
try this way
<div class="4u12u$(large)">
<form action="your url" method="post">
<input type="checkbox" id="hygiene" name="hygiene" required><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety" required><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan" required><label for="pan">Pan/Wheel Chuck</label>
</form>
</div>
So I have a radio button whose model is needed by the function that is called when I hit the button below it:
<form class="form-inline" role="form">
<div class="form-group">
<div>
<input type="radio" ng-model="display" value="true">True <input type="radio" ng-model="display" value="false">False
</div>
<button>
....
</button>
</div>
</form>
However, the results never come back right. If I go in and debug the code, within the javascript every single time the damn value of $scope.display is "true". It doesn't have to do with me not using ng-value, based on what I have read about it, right? Previously, this element worked correctly and was not in a form/form-inline/form-group, but a simple div. Does that have something to do with it?
it does work here is a pluncker: pluncker
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="display" value="true">true
<input type="radio" ng-model="display" value="false">
false
<br>
display = {{display}}
I'm trying to utilize a jQuery Mobile collapsible widget. However, using the code straight from their site (specifically the Legend), I noticed there are spaces between the control group.
<form>
<fieldset data-role="collapsible">
<legend>Legend</legend>
<div data-role="controlgroup">
<input type="checkbox" name="checkbox-1-a" id="checkbox-1-a" />
<label for="checkbox-1-a">One</label>
<input type="checkbox" name="checkbox-2-a" id="checkbox-2-a" />
<label for="checkbox-2-a">Two</label>
<input type="checkbox" name="checkbox-3-a" id="checkbox-3-a" />
<label for="checkbox-3-a">Three</label>
</div>
</fieldset>
</form>
Is there a way to remove these? I tried going through the default css to see if there is an attribute I can change but I couldn't find anything. Here is my jsfiddle that shows the spaces and my code. Any help would be much appreciated!
The gaps are a result of the whitespaces and line breaks in the html markup. This does it for me:
<form>
<fieldset data-role="collapsible">
<legend>Legend</legend>
<div data-role="controlgroup">
<input type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label for="checkbox-1-a">One</label><input type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label for="checkbox-2-a">Two</label><input type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label for="checkbox-3-a">Three</label>
</div>
</fieldset>
</form>
Updated jsFiddle
Or, making the html markup a little less ugly:
<form>
<fieldset data-role="collapsible">
<legend>Legend</legend>
<div data-role="controlgroup">
<input
type="checkbox" name="checkbox-1-a" id="checkbox-1-a"><label
for="checkbox-1-a">One</label><input
type="checkbox" name="checkbox-2-a" id="checkbox-2-a"><label
for="checkbox-2-a">Two</label><input
type="checkbox" name="checkbox-3-a" id="checkbox-3-a"><label
for="checkbox-3-a">Three</label>
</div>
</fieldset>
</form>
I am very new to coding and CS and so sorry if this question is kind of obvious. I couldn't really find anything about this before that I understood. I am making a set of radio buttons and I would like the user to check off what applies to them and submit it. How do I get the value of the button (with javascript) that they click so that my code could generate a corresponding output.
<p> Pick a hair length </p>
<input type="hidden" value="" id="rdValue" />
<div>
<label> <input type="radio" name="length" value="short"> Short </label>
</div>
<div>
<label> <input type="radio" name="length" value="med"> Medium </label>
</div>
<div>
<label><input type="radio" name="length" value="long"> Long </label>
</div>
<p> Pick a hair type </p>
<div>
<label> <input type="radio" name="type" value="curly"> Curly </label>
</div>
<div>
<label> <input type="radio" name="type" value="wavy"> Wavy </label>
</div>
<div>
<label><input type="radio" name="type" value="straight"> Straight </label>
</div>
You could use this to get the value for the selected radio button from the "length" radio buttons for example:
$("input:radio[name='length']").val();
This question is very similar to yours, and has answers in jQuery and Javascript. It's pretty simple.
Basically, you get the DOM elements of the radio buttons from the page, then loop through them checking their values. Once you find one that is "true", you've found the selected value.