I have a html form and I need to get the "checked" value of some checkboxes. The problem is that when I submit the form, the data in textfields and dropdowns works fine, but all checkboxes and radiobuttons is set to not be checked.
This is my checkbox:
<input name="chkbox" value="test" type="checkbox">Label text
This is how I try to get the value in razor on submit:
if(Request["chkbox"].AsBool()){
//its checked
}
else{
//its unchecked
}
If I set the checkbox to be checked by default I get a "checked" value on form submit.
It seems like when I check a checkbox it doesn't actually change it's checked state in the form?
What am I missing here?
Related
I have an html form and i would like ALWAYS to have checkboxes to submit a value. How can i do that? I have one idea but i havent tried it and i am unsure if its the best way to do it (jquery to check if the box is checked or not, then set the value to 0/1 and check it off so it will submit)
Thanks to #Lazarus' idea, also mentioned by #BalusC, you can add an additional control to the form:
<input type="hidden" name="checkbox1" value="off">
<input type="checkbox" name="checkbox1" value="on"> My checkbox
Checkbox and the hidden fields must have the same name. The hidden input is always submitted as a default value. If the checkbox is checked then also it's submitted. So you have a list of 2 values for parameter "checkbox1", that you have to treat at server side.
...maybe a <select> tag would be more handy.
There is a legitimate reason for asking for something like this, although the behaviour envisioned here is not the right way to go about it. There is a problem with the checkbox when used correctly when editing existing data and that's that there is no way to determine whether no value was submitted because the field was not present on the form or because the user cleared all of the values. You can run into this sort of problem any time you include fields conditionally.
One could go to the trouble of maintaining a "view state", of course, but it's much easier to include a hidden "companion field" whenever a checkbox or select with the multiple option (which is also excluded when all selections are cleared) is displayed. The field should have a related but different name (a name from which the actual field name can be extracted). The Lotus Domino server has used fields named %%Surrogate_FieldNameHere for this purpose since (I believe) version 7 for exactly the reason I described here.
To tell you the truth, this feels like a big no-no.
Anyway here goes:
<script type="text/javascript">
$(document).ready(function () {
$('form').submit(function() {
$(this).find('input[type=checkbox]').each(function () {
$(this).attr('value', $(this).is(':checked') ? '1' : '0');
$(this).attr('checked', true);
});
});
});
</script>
HTML doesn't work that way. HTML checkboxes are specified as follows: if checked, then its name=value will be sent as request parameter. If unchecked, then its name=value will not be sent as request parameter. Note that when the value is unspecified, then most browsers default to "on". It's easier if you give all checkboxes the same name but a different and fixed value. This way you can obtain the checked ones as an array/collection.
If all checkboxes are already known beforehand in server side, you can just apply basic math to obtain the unchecked checkboxes:
uncheckedCheckboxes = allCheckboxes - checkedCheckboxes
If those checkboxes are created dynamically at the client side and therefore unknown beforehand in server side, then add for each checkbox a <input type="hidden"> field containing information about the dynamically created checkbox, so that the server side knows which checkboxes are all present as the moment of submission.
Although this goes against the HTML spec, if you know what you are doing, using this you no longer have to cater checkboxes which are handled completely differently when submitted - and for example naming fields with_brackets[] can actually be useable.
Complete solution
$(document).on('submit', 'form', function() {
$(this).find('input[type=checkbox]').each(function() {
var checkbox = $(this);
// add a hidden field with the same name before the checkbox with value = 0
if ( !checkbox.prop('checked') ) {
checkbox.clone()
.prop('type', 'hidden')
.val(0)
.insertBefore(checkbox);
}
});
});
Take note: the non-checked checkboxes now submit a value of "0"
Additionally, if you want to change the behaviour of a single form only, just alter the first line in the above snippet:
$(document).on('submit', 'form.your-class-name', function() {
// ...
});
if you have many checkbox, you can try this code:
<input type="checkbox" onclick="$(this).next().val(this.checked?1:0)"/> <input type="hidden" name="checkbox1[]"/>
If you have the following HTML:
<form id="myform" method="post" action="my/url">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
<input type="checkbox" id="checkbox2" name="checkbox2"/>
<input type="checkbox" id="checkbox3" name="checkbox3"/>
</form>
Normal form submit:
On form submit, before submitting, change all values of checkboxes to 0 and 1 based on if checkbox is unchecked or checked. Like so:
$('#myform').submit(function() {
var $checkboxes = $('#myform').find('input[type="checkbox"]');// Select all checkboxes
$checkboxes.filter(':checked').val(1);// Set value to 1 for checked checkboxes
$checkboxes.not(':checked').val(0);// Set value to 0 for unchecked checkboxes
$checkboxes.prop('checked', true);// Change all checkboxes to "checked" so all of them are submitted to server
});
Note: Ugly thing about this code, while form is submitting, all checkboxes will appear as "checked" for a moment. But if you apply same concept for ajax form submit, it would be better.
AJAX form submit:
$.post('my/url', {
'checkbox1': $('#checkbox1').is(':checked') ? 1 : 0,
'checkbox2': $('#checkbox2').is(':checked') ? 1 : 0,
'checkbox3': $('#checkbox3').is(':checked') ? 1 : 0
}, function(response) {
// Server JSON response..
}, 'json');
I want the validation for kendo AutoComplete when user does not select any value from AutoComplete Value that is populated.
For Little Bit background say I do have two controls one as Kendo AutoComplete and other is Input box if user types something in the AutoComplete the values is populated and he does not select any value and switch to next control it must give a validation message that please select the value from the AutoComplete.
and Also if the user type any string in the AutoComplete and Switch to next control it must also give the validation that "hey,this value is not in the AutoComplete" so that it must not save any other data other than AutoComplete datas that is being Populated.
Heres how your auto complete is defined
#(Html.Kendo().AutoComplete()
.Name("countries")
// etc.
On submit button click event
<script>
$("#btnSubmit").click(function(){
var autoCompleteValue = $("#countries").val();
if (autoCompleteValue == "" || autoCompleteValue == null){
return false; //cancels submit action
}
// else let submit go through
});
</script>
The null check is probably useless, cuz if it doesn't have a value it's usually equal to ""
The .val() solution did not work for me, because the .val() value of the control is still the text I entered (custom text, not any of the AutoComplete values), and that's wrong.
Solution is in preventing the custom input of Kendo AutoComplete. See this link:
Kendo UI - Prevent Custom User Input in the AutoComplete
I'm working on a ASP.NET web forms application. I have a four-column listview, bound to a datasource on pageload(), populated with contact names. One of the columns contains a checkbox. Users select a checkbox to indicate the corresponding contact should be processed in the next step.
The form also contains a button. When this button is clicked, the following code runs to process the selected contacts.
foreach (var x in lvPeople.Items)
{
chkSelected = (CheckBox)x.FindControl("IsLetterRecipient");
if (chkSelected.Checked)
{
// the person was selected by the user, do stuff here...
}
}
When I set a breakpoint on the line containing the IF statement, the breakpoint gets hit seven times (once for each row in the listview == seven checkboxes). However, the code inside the IF block never runs because .Checked is always False, regardless of the whether or not the checkbox is actually checked.
AutoPostBack, on the checkbox, is set to False. EnableViewState on the checkbox and listview is set to True.
What am I doing wrong? How do I get the .Checked status of the checkboxes?
Probably, when you bind the data on Page_Load you forgot to do:
if(!IsPostBack)
{
//bind the data to the list
}
I have applied validation through JQuery Validation Plugin on my page. The validation works fine but once the Clear button is hit to clear out all the fields on the form, and then the save button is clicked again, the validation doesn't fire and the form gets submitted. I have called the following javascript function on click of Clear button to clear out all the form fields :-
function ResetForm() {
jQuery(':input', '#form1')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
return false;
}
The Clear button is on a ChildPage and ResetForm function is on the MasterPage. Anybody have any guess why its getting submitted after clearing the fields ?
input is an element and not a attribute or a pseudo selectable, the main issue I see in your code is the : within the :input
Try changing to jQuery('#form1 input') to fetch the list of inputs
Also change the not() command to select filter the inputs by type
.not('[type="button"], [type="submit"], [type="reset"], [type="hidden"]')
also as for :hidden there's several factors you should know about this.
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
In light of your comment please try this tested version:
function resetForm()
{
$("#form1").find(':input').each(function()
{
var jelem = $(this);
switch(this.type)
{
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
jelem.val('');
break;
case 'checkbox':
case 'radio':
jelem.attr('checked',false);
}
});
}
#source: http://www.electrictoolbox.com/jquery-clear-form/
Another way to do this is to create a hidden input in your form but set the type as reset like so:
<input type="reset" style="display:none" />
and then do:
function resetForm()
{
$("#form1[type='reset']").click();
}
Actually the error was something else, the code provided by RobertPitt is correct for clearing of form fields and my code was also correct for clearing of form fields. But the problem is that, on the clear button I had applied a class="cancel" so that the form should not get submitted because it was an aspx:button.
But according to what is written in JQuery docs, clicking of a button whose class is cancel should skip the validation, but after that if I click on a normal submit button validation should fire which was not firing in my case.
I just removed the cancel class and it worked.
Does this help?
Reseting the form when usering the jquery validations plugin
When I used the html Helper Checkbox, it produces 2 form elements. I understand why this is, and I have no problem with it except:
The un-checking of the checkbox does not seem to be in sync with the 'hidden' value.
What I mean is that when I have a bunch of checkboxes being generated in a loop:
<%=Html.CheckBox("model.MarketCategories[" & i & "].Value", category.Value)%>
and the user deselects and checkbox and the category.Value is FALSE, the code being generated is:
<input checked="checked" id="model_MarketCategories_0__Value" name="model.MarketCategories[0].Value" type="checkbox" value="true" />
<input name="model.MarketCategories[0].Value" type="hidden" value="false" />
This is wrong since the Value is False the checkbox should NOT be checked.
Any ideas why this is happening?
What's worse, is when it's submitted, it shows up as "true,false". Very frustrating.
When you check the box programmatically, it doesn't set the associated hidden field. You can easily work around this by writing the markup for the checkbox directly instead of using the MVC control.
I've had to do this myself just recently. It's a pet peeve of mine.
See this link for more information on this.
This won't work for me because I am using Strongly Typed views/controllers.
I don't use:
public ActionResult ThisLooksWeird(FormCollection result)
{
var winnars = from x in result.AllKeys
where result[x] != "false"
select x;
// yadda
}
I use:
public ActionResult ThisLooksWeird(MyCustomModelObject result)
{
foreach (KeyValuePair<MarketCategory, Boolean> o in result.Categories) {
If (o.Value == True) {
// yadda
}
}
}
Now when I adapt my code to work as suggested in your posting, the Mapping between the two controls (checkbox/hidden) is still incorrect. It takes the value of the hidden component (which is always the value which was there when the page was loaded) instead of the checkbox which is what the value should be now.
Okay, looks like David was right. It was my misunderstanding of exactly how the two fields work together that cause his solution not to work for me.
In case this helps anyone else here is my solution and how it works:
First I had to hand craft the two fields as David had described...
<input <%
If category.Value = True Then
%> checked <%
End If
%> class="filterCheckbox" id="model_MarketCategories_<%=i%>__Value" name="model.MarketCategories[<%=i %>].Value" type="checkbox" value="true" />
<input name="model.MarketCategories[<%=i%>].Value" type="hidden" value="False" />
Now a quick recap of why there are 2 fields:
// Render an additional <input type="hidden".../> for checkboxes. This
// addresses scenarios where unchecked checkboxes are not sent in the request.
// Sending a hidden input makes it possible to know that the checkbox was present
// on the page when the request was submitted.
Now the reason both of the elements have the same name is this: If the browser will ignore all other input values with the same name once it has found one with a valid value. So if your browser always returns the value of the checkbox (regardless of whether it is checked or not) then the hidden element is ignored. If on the other hand your browser does not send the checkbox value if the checkbox is not checked, then the element immediately following the checkbox will set the value of the form property to false and return THAT.
My misunderstanding was that I thought the checkbox should always store the value of actual property, so something like:
<input <%
If category.Value = True Then
%> checked <%
End If
%> class="filterCheckbox" id="model_MarketCategories_<%=i%>__Value" name="model.MarketCategories[<%=i %>].Value" type="checkbox" value="<%=category.Value %>" />
This is what was causing issues... the checkbox 'value' should always be true. The hidden 'value' should always be false. And it is the state of the checkbox (checked or not) that will determine which gets returned to your controller.
Thanks David... sometimes the answer can be right in front of you but if your brain is not ready to receive, there's nothing a fellow programmer can do ;-)