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.
Related
I would like to get a typed value from a ReactStrap Input component, via the onChange function.
The aim is to use a text input only but be able to get a specific typed value (String or Number in my example below).
<Input valueAs="String" name="input1" type="text" onChange={this.onChange}></Input>
<Input valueAs="Number" name="input2" type="text" onChange={this.onChange}></Input>
You can see the expected type is defined by the valueAs attribute.
I expect to get an event in this.onChange with:
a value as a String for Input 1
a value as a Number for Input 2
What is the best way to do this with React / Reactstrap?
Input component of reactstrap does not have a property called valueAs. To get value in a format you need, you can do:
<Input name="input1" type="text" onChange={(e) => this.onChange(`${e.target.value}`)}/>
{/* to make it integer you can add unary plus sign like so: */}
{/* this.onChange(+e.target.value) */}
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.
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...)
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.