I'm trying to implement a horizontal control group in jquery mobile which has radio buttons inside. I am trying to build the HTML string dynamically from code behind.
These radio buttons are in a for loop .
StringBuilder tileString = new StringBuilder(string.Empty);
foreach (Product product in productsInCart)
{
tileString.Append("<div><legend >Choose shipping type:</legend></div><br />");
tileString.Append("<input type='radio' name='radio-choice-1' id='radio-choice-1' onclick='findPaymentMethod()' value='In Flight' checked='checked' />");
tileString.Append("<label for='radio-choice-1'>In flight</label>");
tileString.Append("<input type='radio' name='radio-choice-1' id='radio-choice-2' value='On Arrival' onclick='findPaymentMethod()' />");
tileString.Append("<label for='radio-choice-2'>On Arrival</label>");
} `
As you can see there is a property on the first radio button.
checked='checked'
But when this is run in a for loop only the last radio element in the for loop gets checked. Can anyone suggest me whats wrong with the code ? Or am i missing something here ?
EDIT: HTML string that gets generated is added .
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup' data-type='horizontal' id='6' data-mini='true'>
<div>
<legend >Choose shipping type:</legend>
</div>
<br />
<input type='radio' name='radio-choice-1' id='radio-choice-16' value='In Flight' checked='checked'/>
<label for='radio-choice-16'>In flight</label>
<input type='radio' name='radio-choice-1' id='radio-choice-26' value='On Arrival' />
<label for='radio-choice-26'>On Arrival</label>
</fieldset>
</div>`
`<div data-role='fieldcontain'>
<fieldset data-role='controlgroup' data-type='horizontal' id='1' data-mini='true'>
<div>
<legend >Choose shipping type:</legend>
</div>
<br />
<input type='radio' name='radio-choice-1' id='radio-choice-11' value='In Flight' checked='checked'/>
<label for='radio-choice-11'>In flight</label>
<input type='radio' name='radio-choice-1' id='radio-choice-21' value='On Arrival' />
<label for='radio-choice-21'>On Arrival</label>
</fieldset>
</div>
Only 1 radio element is getting checked within the fieldset
Here's an image of the desired effect.
Your name attribute (like id one) must be unique.
Working example: http://jsfiddle.net/Gajotres/SBxVc/
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup' data-type='horizontal' id='6' data-mini='true'>
<div>
<legend >Choose shipping type:</legend>
</div>
<br />
<input type='radio' name='radio-choice-16' id='radio-choice-16' value='In Flight' checked='checked'/>
<label for='radio-choice-16'>In flight</label>
<input type='radio' name='radio-choice-26' id='radio-choice-26' value='On Arrival' />
<label for='radio-choice-26'>On Arrival</label>
</fieldset>
</div>
<div data-role='fieldcontain'>
<fieldset data-role='controlgroup' data-type='horizontal' id='1' data-mini='true'>
<div>
<legend >Choose shipping type:</legend>
</div>
<br />
<input type='radio' name='radio-choice-11' id='radio-choice-11' value='In Flight' checked='checked'/>
<label for='radio-choice-11'>In flight</label>
<input type='radio' name='radio-choice-21' id='radio-choice-21' value='On Arrival' />
<label for='radio-choice-21'>On Arrival</label>
</fieldset>
</div>
Related
Im having a problem stacking radio buttons once the screen size reaches a certain size (in this case, 768px for mobile phones). I have this local #media override that takes the radio-inline and displays it as a block - however, once I do this, the first Radio Button "0", is slightly offset and does not align with the rest below it. Any thoughts on a work around or if im doing something wrong?
<style>
#media (max-width: 768px){
.radio-inline{
display:block;
}
}
</style>
<div class="container-fluid">
<div class="jumbotron">
<div>
<asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE
TEXT"/>
<br />
<br />
<asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-lg-12">
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="1" required> <b>1 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="2" required>
<b>2   </b>
</label>
</div>
</div>
</div>
You need to remove the spaces, " ", from each input. This should fix the issue as shown in this code snippet. If you need spacing, use CSS.
https://jsfiddle.net/tbuchanan/Lqj412tu/
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0</b>
</label>
I'm building this checkbox that it woyld only work if all 3 checkboxes are checked on the web. Otherwise it will fail.
I tried to set without value - but it doesn't work at all.
I tried to give them the same value as the name or field - doesn't work.
Works only if the value is set as true - but for some reason it expects it all to be true?
<fieldset class="question-fieldset twocolinputs">
<h2>Question #81:</h2>
<div class="answer-single">
<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-a">
Email
</label>
</div>
<div class="answer-single">
<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-b">
SMS
</label>
</div>
<div class="answer-single">
<input id="2-c" name="MX3C" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-c">
Llamada
</label>
</div>
</fieldset>
In an <input> of type checkbox, you set the checked property to true, not the value:
<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" checked="true">
▲
Update
Demo 2 is an example of radio button pairs with the value of true and false strings submitted to server.
It seems that everyone is assuming that you want the checkboxes checked by default. Although I could be mistaken, I don't interpret it that way. What I gather is that you only get a value submitted if all of your checkboxes are checked which is odd. As a test I have placed your unmodified code inside a <form> and added a <input type='submit'> button, then posted the <form> to a test server. It will only send the values of the checkboxes that are checked as expected.
Demo 1 - PLUNKER
Demo 1 - STACK (Does not function due to SO security measures, see PLUNKER for a functioning example)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='main' method='post' action='http://httpbin.org/post'>
<fieldset class="question-fieldset twocolinputs">
<h2>
Question #81:
</h2>
<div class="answer-single">
<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-a">
Email
</label>
</div>
<div class="answer-single">
<input id="2-b" name="MX3B" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-b">
SMS
</label>
</div>
<div class="answer-single">
<input id="2-c" name="MX3C" type="checkbox" class="checkbox-button-input" value="true">
<label class="answer-label" for="2-c">
Llamada
</label>
<input type='submit'>
</div>
</fieldset>
</form>
</body>
</html>
Demo 2 - PLUNKER
Demo 2 - STACK (See PLUNKER for working example)
<!DOCTYPE html>
<html>
<head>
<style>
input,
label {
font: inherit;
}
[type=submit] {
float: right;
}
</style>
</head>
<body>
<form id='main' method='post' action='http://httpbin.org/post'>
<fieldset>
<legend>Question #82</legend>
<p>Using radio buttons that share the same name attribute ensures that only one of them can be checked</p>
<label>True
<input type='radio' name='Q82' value='true'>
</label>
<label>False
<input type='radio' name='Q82' value='false'>
</label>
</fieldset>
<fieldset>
<legend>Question #83</legend>
<p>If you wish to set a default, use the checked attribute. ex. checked='false' (see the radio buttons below)</p>
<label>True
<input type='radio' name='Q83' value='true'>
</label>
<label>False
<input type='radio' name='Q83' value='false' checked='true'>
</label>
</fieldset>
<input type='submit'>
</form>
</body>
</html>
<input id="2-a" name="MX3A" type="checkbox" class="checkbox-button-input" checked>
Anchor tag acts as a form submit button?
<form method="get" action="<?php bloginfo('url'); ?>/">
<div class="field-search">
<input type="text" class="form-control input-lg" placeholder="Search for..." value="<?php the_search_query(); ?>">
<i class="fa fa-search font-16"></i>
</div>
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
Login
</div>
</form>
jquery
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
possible duplicate of
(Anchor tag as submit button?)
(This is a copied answer)
Try this approach see if it works.
Add a click event to your anchor tag as below and do a event.stopPropagation()
$('a').on('click', function(e){
e.stopPropagation();
})`
See if this works
I cannot figure out for the life of my why this jquery mobile panel won't render with the same look and feel of the jquery mobile theme used in the application.
The panel is loading on the same page as the rest of my jquery mobile page so the jquery mobile css files and jquery js files are all referenced and working on other parts of the page.
What am I missing within my layout?
thanks
<div data-role="page" id="map_page">
<div data-role="panel" id="transitLayersPage" data-position="right" data-display="overlay">
<div data-role="header">
<h1>Routes</h1>
</div>
<div data-role="controlgroup">
<div id="checkboxes">
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(0)" />
<label>Routes 1</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(1)" />
<label>Routes 2</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(2)" />
<label>Routes 3</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(3)" />
<label>Routes 4</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(4)" />
<label>Routes 5</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(5)" />
<label>Routes 6a</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(6)" />
<label>Routes 6b</label>
</div>
Close panel
</div>
</div>
You forgot to add for attribute to label. Moreover, you should not use duplicate id for checkbox, each checkbox must have a unique id.
<input type="checkbox" id="foo">
<label for="foo">bar</label>
Demo
hi I have a grouped radio buttons (they look like normal jquery buttons when grouped). and instead of text, i want an icon (or a small image) to be displayed on it. could anyone teach me how can i do this on jquery mobile?
Live Example:
http://jsfiddle.net/uZeDz/6/
Example:
<div data-role="page" id="radio-icons">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1"><img src="http://cdn2.iconfinder.com/data/icons/Snow/Snow/snow/Cat.png" /></label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2"><img src="http://images.findicons.com/files/icons/8/dog/48/48_dog4.png" /></label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3"><img src="http://icon.downv.com/32x32/5/142/1070746.0048c51761d5b53e5a2297e458ba0ff7.gif" /></label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4"><img src="http://cdn6.droidmill.com/media/market-media/com.tinyminds.android.widgets.lizardbattery_icon.png" /></label>
</fieldset>
</div>
</div>
</div>