Spaces between jquery mobile controlgroup - javascript

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>

Related

Submit button not working with checkboxes

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>

Radio Button and AngularJS

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.

Getting Radio Buttons to output info

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.

jQuery autoselect radiobox is not working

I cannot get my jquery code to auto select a radiobox.
Here is my html:
<div class="formField rsform-block rsform-block-existingcustomer" style="margin-bottom: -22px;">
<!--<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" /><label for="existingCustomer0">Yes</label><input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" /><label for="existingCustomer1">No</label><br/>
<span id="component100" class="formNoError">Please tell us if you're an existing customer.</span>-->
Are you an existing client?<br>
<label for="existingCustomer0" class="radio"><span class="icon"></span><span class="icon-to-fade"></span>Yes
<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" class="addRadio">
</label>
<label for="existingCustomer1" class="radio checked"><span class="icon"></span><span class="icon-to-fade"></span>No
<input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" class="addRadio" style="display:none;">
</label>
</div>
and here is a snippet of the jQuery code that is supposed to do it:
if(aaid) {
var num_one = aaid;
jQuery('input[value="Yes"]').prop('checked', true);
Does anyone see the problem? I am trying to autoselect the "yes" checkbox, so that it will activate the next part which is create a dropdown menu.
Thanks in advance! :)
Try this:
$(document).ready(function () {
$('input:radio[name="form[existingCustomer]"][value="Yes"]').attr('checked',true);
//OR
$('input:radio[name="form[existingCustomer]"][value="Yes"]').prop('checked',true);
});
Example
I see a couple issues with your code here.
1. input hmtl does not have proper ending/end tag
2. not sure why you wrap it around the label
3. Be sure to put your jquery code in document ready so that it checks the radiobox when the page is loaded.
4. in you html code, you are pre-setting the No radio to be checked. Is that on purpose? It looks like you set it to no and then using jquery to set it back to yes.
Anyway, try attr instead of prop. Something like this.
$('input:radio[value="Yes"]').attr('checked', true);

clicking on custom checkbox does not run the associated onClick function

I'm trying to use Ryan Fait's custom checkboxes. These are much more readable than the standard checkboxes, but clicking on them does not run the associated onClick functions. Any advice will be appreciated. The relevant portion of my code follows:
<p style="font-family:arial; font-size:large">
<input type="checkbox" class="styled" id="level-0" type="radio" value="0"
onClick="count();"> 0 (ages 5-7)
<input type="checkbox" class="styled" id="level-1" type="radio" value="1"
onClick="count();" checked> 1 (beginner)
<input type="checkbox" class="styled" id="level-2" type="radio" value="2"
onClick="count();" checked> 2 (easy)
<input type="checkbox" class="styled" id="level-3" type="radio" value="3"
onClick="count();" checked> 3 (intermediate)
<input type="checkbox" class="styled" id="level-4" type="radio" value="4"
onClick="count();"> 4 (challenging)
<input type="checkbox" class="styled" id="level-5" type="radio" value="5"
onClick="count();"> 5 (hard)
<input type="checkbox" class="styled" id="level-all" type="radio" value="6"
onClick="all_levels();"> All
<input id="available" type="button" style="background-color:white; border:2px;
font-family:arial; font-size:large" value="??"> </p> <br>
From Styling Checkboxes and Radio Buttons With CSS and JavaScript on Ryan Fait's site:
How does it work?
In a nutshell, the JavaScript looks for every form element with
class="styled" on it; hides the real form element; sticks a span tag
with a CSS class on it next to the element; and, finally, mouse events
are added to the span that handles the visual stages form inputs go
through when they are clicked.
Your inline onClick handlers are not firing because your checkboxes aren't actually being clicked. Ryan explicitly says that it "hides the real form element; sticks a span tag with a CSS class" ... so you are actually clicking on the <span> that Ryan's code inserted; the real checkbox is hidden.
Later in the article, Ryan says outright:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because
these events can only be used once, if you want to add more functions
to an event, you will need to call them from inside my script.
You will need to call them from inside my script
Take your onClick= out of the <input> tags; add your code to his code -- you'll have to figure out which bit of your code to call from his code, since I see you're doing different things from your onClicks.
You should also take your style="..." out of your tags and use a stylesheet, but that's a separate issue.

Categories