So I've got three RadioButtons, They're not in a RadioButtonList because I need to add some textboxes next to each of them.
I've added a GroupName, and on the front end they behave as expected. ONLY ONE appears checked at a time.
However in the code, if I do:
RadioButton1.Checked = true;
RadioButton2.Checked = true;
RadioButton3.Checked = true;
I would expect only the last one, RadioButton3, to be checked, because they all belong to the same group. This is not the case. All three evaluate to true.... how can that be?
I have to set them explicitly to false... am I missing something?
I think this is the correct behavior although it is not what you might expect.
Consider that a RadioButton is just a CheckBox with some extended functionality to automatically to give that exclusive checking functionality. In the background it is still a checkbox though. See the hierarchy from MSDN:
System.Object
System.Web.UI.Control
System.Web.UI.WebControls.WebControl
System.Web.UI.WebControls.CheckBox
System.Web.UI.WebControls.RadioButton
The output has all items with the attribute checked="checked" output for the input of type="radio". Eg:
<input id="rad1" type="radio" name="Test" value="rad1" checked="checked" /><label for="rad1">1</label><br />
<input id="rad2" type="radio" name="Test" value="rad2" checked="checked" /><label for="rad2">2</label><br />
<input id="rad3" type="radio" name="Test" value="rad3" checked="checked" /><label for="rad3">3</label>
From the Checked property documenation:
Checked (inherited from CheckBox):
Gets or sets a value indicating
whether the CheckBox control is
checked.
So the Checked property acts just like the CheckBox version with no functionality included to look for other controls in the same group and remove them which makes sense since it is a singular control.
Related
I'm following this article
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
for a checkbox, but how do I set and get the check value?
As I need to a do a post back with the value.
<label class="container">Accept Offers?
<input type="checkbox" id="Offers" name="Offers"/>
span class="checkmark"></span>
</label>
change your code to this
<input type="checkbox" id="Offers" value="checkedValue" name="Offers"/>
If you see the Request.Form object or query-string (in case of HTTP GET submission) you will see the value, If this is not checked null will be seen or Request.Form will have not that key that belong to Checkbox.
I'm using a template with custom CSS (.less) for checkboxes (making them appear as "Yes|No", "On|Off", etc.)
Using #Html.CheckboxFor(model => model.BooleanProperty, new { #class="custom-switch" }) results in a checkbox not appearing, at all.
So I got to digging around, found many questions on here with similar issues, but none of the solutions worked for me so far. The solution I'm currently working on is to use a custom EditorFor template. This is rendering the checkbox correctly, however, what I'm experiencing is that if the slider is switched to "NO", it's passing across to the controller as null instead of false, and if it's switched to "YES" it's passing across to the controller as "on".
I know that Html.CheckboxFor renders a checkbox element followed by a hidden input element. What purpose does this serve? Following are rendered HTML from the two methods as well any questions pertaining to that specific :
Straight HTML for Checkbox
::before ::after
When this is passed to the controller, why is the value of BoolProperty "true,false"?
#Html.CheckboxFor(model => model.BoolProperty, new { #class="custom-switch" })
<input checked="checked" data-val="true" data-val-required="The BoolProperty is required." id="BoolProperty" name="BoolProperty" type="checkbox" value="true" class="custom-switch">
<input name="BoolProperty" type="hidden" value="false">
What purpose does the hidden input field play? If I remember right, only the first "BoolProperty" named value would actually be passed to the controller anyways. I can't find anything that would suggest that one updates the other when the value changes, and through testing, I've noticed that the value does not change.
#Html.EditorFor(model => model.BoolProperty, new { #class = "custom-switch" })
<input type="checkbox" checked name="BoolProperty" class="custom-switch">
<label>::before ::after</label>
Why would this pass across the values of "on" or null to the controller? Why not true and false?
The Boolean Editor Template
#model Boolean?
var isChecked = ViewData["checked"] != null && ViewData["checked"].ToString() == "true";
<input type="checkbox" checked="#(isChecked ? "checked" : string.Empty)" name="#name" class="#ViewData["class"].ToString()" />
<label class="lbl"></label>
The hidden field is there to force the field to be included in the form POST even when nothing is checked. Without it, the field is omitted altogether, per the standard. You wouldn't know the difference between a "false" value or a non-existent field.
http://www.w3.org/TR/html401/interact/forms.html
As far as why it uses "on" vs "true", that is something you can control yourself. If you want true/false instead of on/off, use that. "on" is just a default, but not required.
<input type="checkbox" class="checkbox" name="BoolProperty" value="true" />
<input type="hidden" class="checkbox" name="BoolProperty" value="false" />
About the hidden field
I can't find anything that would suggest that one updates the other
when the value changes, and through testing, I've noticed that the
value does not change.
No, it doesn't change. The browsers, then a checkbox is not checked, don't submit anything using that name. So, the hidden propose is to submit the value "false" (with the same name) when the checkbox isn't checked.
When the checkbox is checked (as you said) the posted value is "true,false" (first the value of the checkbox and then the value of the hidden). The MVC binder deals with this string to convert it to true value setting it to the BooleanProperty.
About the on value
It is the default value for the checkbox. See here.
i have checkbox on the form
<input class="addToFavorite" type="checkbox" name="addToFavorite"> Add to favorite
now when form posting i check if this checkbox checked with this code. But it return true every time. how i can check if checkbox has been really checked?
boolean wantAddToFavorites = false;
if (isPayAction) {
wantAddToFavorites = request.getParameter("addToFavorite").equals("on");
}
FireBug result
as you see It always send its value
If you want to check on server-side if a checkbox has been checked or not, you should do the following:
1. Add a value to your checkbox
<input class="addToFavorite" type="checkbox" name="addToFavorite" value="addToFavourite"> Add to favorite</input>
2. Check this checkbox value on server-side
if(request.getParameter("addToFavorite") == null){
//checkbox not checked
}else{
//checkbox checked
}
In a checkbox, the value attribute holds the string that will be sent if the box is checked. By default it sends the string "on".
What determines whether it is checked or not is the checked attribute.
Example:
<input type="checkbox" name="check1" checked /> Sends "on"
<input type="checkbox" name="check2" /> Sends null
<input type="checkbox" name="check3" value="hello" checked /> Sends "hello"
<input type="checkbox" name="check3" value="hello" /> Sends null.
I inherited a form that includes a RadioButtonList structure that's similar to this (names changed to protect the innocent):
<asp:RadioButtonList id="ChicagoCubsInfield" RepeatDirection="Vertical" RepeatColumns="1" XPath="somePath">
<asp:ListItem Value="Tinker" Text="Tinker (Shortstop)" />
<asp:ListItem Value="Evers" Text="Evers (Second Base)" />
<asp:ListItem Value="Chance" Text="Chance (First Base)" />
</asp:RadioButtonList>
When it renders in a browser, of course, it looks something like this:
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker (Shortstop)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers (Second Base)</label></td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance (First Base)</label></td></tr>
</table>
Here's my problem: I need it to look like this (note the difference in table cell rendering):
<table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker</label></td><td>(Shortstop)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers</label></td><td>(Second Base)</td></tr>
<tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance</label></td><td>(First Base)</td></tr>
</table>
In other words, I need the name and (position) separated out into separate columns, but they still need to align by row. Is this possible in a RadioButtonList?
I've tried making them into individual RadioButton objects, but after doing so, I started getting the following:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
I tried messing around with validation (including setting the CausesValidation property to "False"), all to no avail.
Note: I am not as concerned about the validation error as much as I am about the table rendering; that is more important (unless, that is, fixing the validation error helps fix the rendering issue).
What would be the best way to tackle this?
Thanks in advance . . .
Edit: I was able to recreate what I wanted by using straight client-side <input> tags, but this is not ideal. I would much prefer using server-side <asp:RadioButton>.
I've been doing some digging, and it appears that the reason why my RadioButton tags are failing validation is because of the ct100 prefixes that are concatenated to the beginning of the ID/Name tags. When the page is working (with the RadioButtonList) the IDs for each ListItem seems to have a "ct100_Content_" prefix, but the name has a "ct100$Content$" prefix.
The error I'm getting (when trying to use individual RadioButtons) is:
Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.
From what I'm seeing, I think the control is looking for "ctl00_Content_ChicagoCubsInfield_0" (note the "_" instead of the "$").
How do I force the ID to use the underscores instead of dollar signs? I need to keep it local to these tags, as I believe settings are used elsewhere (again, this is not my form), and I don't want to break anything else.
Edit: So much for that theory. I came across the "ClientIDMode" attribute, set it to "Static", and explicitly set my IDs. No dice. The digging continues . . .
This may be answer what you are looking for:
$( document ).ready(function() {
$('label[for^="ChicagoCubsInfield"]' ).each(function() {
var data = $(this).text();
var arr = data.split('(');
$(this).text(data.substring(0, data.indexOf("(")));
$(this).parent().parent().append("<td>(" + arr[1] + "</td>");
// alert(arr[0] + " : " + arr[1]);
});
//alert( $('#ctl00_Content_ChicagoCubsInfield').html());
});
See Demo:
Demo Here
When all was said and done, here's what I ended up doing . . .
I added this to my <script>:
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(0)').append(<td>(Shortstop)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(1)').append(<td>(Second Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(2)').append(<td>(First Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr td').css([misc formatting goes here]);
This did exactly what I wanted. Now I can format the table at my leisure.
It seems this ought to be dead simple, but I'm stuck. I've written some asp.net code that outputs a pair of radio buttons:
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='<%=gblYapperChecked %>' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' checked='<%=gblNonYapperChecked %>' />
if (registrationUser.isYapper == 1)
{
gblYapperChecked = "checked";
gblNonYapperChecked = "";
}
else
{
gblYapperChecked = "";
gblNonYapperChecked = "checked";
}
As expected, I get two radio buttons, "Yapper" and "Non-Yapper". However, even when I step thru my code and see that gblYapperChecked is "checked" and gblNonYapperChecked is "", Non-Yapper is always selected by default in the web browser.
What am I doing wrong?
UpdateHere is the HTML code as it actually appears in the browser. "Yapper" should be selected, but "Non-Yapper" appears selected instead.
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='checked' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='yapper' id='chkNonYapper' value='nonYapper' checked='' />
Note that the HTML "checked" attribute is generally determined by being present or not present. See http://www.w3.org/TR/html401/interact/forms.html#adef-checked for the spec.
In particular what this means is that if you want it to be checked you cna have checked, checked=true, checked=checked and so on. So what you want is to not have the checked attribute at all if you don't want the checkbox selected.
I would advise structure such as:
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' <%=registrationUser.isYapper?"":"checked='checked'" %> />
This should eliminate your checked attribute entirely dependant on your isYapper boolean.
The "checked" attribute is weird, it has no value. If a radio button is checked, include the "checked" attribute by itself in the tag. If unchecked, don't do anything. See here:
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_RADIO.html
Are you setting dblYapperChecked before or after the control is created? Personally, I'd run the radio buttons on the server side and set the checked value on the control directly, but your method should work if the values are set soon enough (try initializing them to the expected values and see if that makes a difference...)