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 ;-)
Related
I'm looking for an effective way to enable / disable multiple controls (textarea, checkbox) through dropbox. I.e. Selecting item A in dropbox will disable certain controls, while selecting item B in dropbox will disable some other controls. Codes on how I approach with disabling textbox:
HTML:
<template name="Gender">
<input disabled={{shouldBeDisabled}} class="input" type="text"/>
</template>
<template name="DoB">
<textarea rows="3" cols="27" disabled={{shouldBeDisabled}}>purpose</textarea>
</template>
js:
Template.registerHelper("shouldBeDisabled", function() {
return true
});
Question 1: Do we require a registerHelper function for each individual control? In the code above it seems like the registerhelper will either disable or enable both control as oppose to individual, but having multiple registerhelper seems redundant.
Question 2: How can we control the value in registerHelper via dropbox (i.e. select)? I can return the value from the dropbox, is building a switch inside registerhelper the correct way and how does it incorporate into question 1?
Question 3: Is there a build-in function to add visual effect on disabled controls? (i.e.grey out)
The way I have done this in the past w/ Meteor and Blaze is to setup a event listener on the dropdown that sets a reactive var/session variable that I then read in a helper. The helper would return the string "disabled" depending on the value.
For instance (this is from memory...I don't have access to Meteor right now, and I have switched over to React/Mantra):
Template.MyComponent.oncreated(function() {
this.isDropdownDisabled = new ReactiveVar();
});
Template.MyComponent.events({
'change #myDropdown'(event) {
this.isDropdownDisabled.set($('#myDropdown').val() == 'Selected' ? true : false);
}
});
Template.MyComponent.helpers({
isDropdownSelected() {
return this.isDropdownDisabled.get() == true ? '' : 'disabled';
}
});
<select id="myDropdown">
<option value="Not Selected">Not Selected</option>
<option value="Selected">Select Me</option>
</select>
<input id="myDynamicallyDisabledInput" type="textbox" name="dnyamic1" {{isDropdownSelected}} />
That should roughly be correct. Basic idea is that you use a reactive var to store the "state" of the dropdown value, flip the "state" when that value changes, and use a help in the inputs to determine if the disabled attribute needs to be set or not. Since helper functions are reactive by default, swapping the state var will cause the template to re-evaluate any time the dropdown value changes.
Anyone can feel free to edit this response to clean up any bad code above, as again I haven't used Blaze in some time and I did this all from memory.
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 have a weird problem in my MVC app.
When the user selects a date from a drop down, it clears the StartDate and EndDate fields.
I have the following fragment of code:
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
The weird thing is that you can wee where I'm outputting it in the label, the date comes out there. The textbox is unpopulated.
I've checked the produced markup and the textbox is not being populated.
<label>Start date: 19/05/2013</label>
<input id="StartDate" name="StartDate" type="text" value="" /> <br />
What am I missing here?
To add a little bit more information, when the page is initially populated the default start and end date are output. There is a bit of jQuery that empties those fields when a <select> is changed. If I comment that bit out then the fields retain their previous values as opposed to blank. Essentially, whatever is submitted to the server is output rather than the value in the model.
Essentially, whatever is submitted to the server is output rather than the value in the model.
This behaviour is actually by design. The idea being that generally the user would expect to see in the text box what they submitted to the server.
See here for a detailed explanation, and a work around.
Instead of doing this
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
You should do this
<label id="someId"></label>
#Html.TextBoxFor(s => s.StartDate,new{#id="startdate"})
and using jquery on change event on your textbox you can set lablel
$("#startdate").change(function(){
var date="Start Date:"+$(this).val();
$("#someid").html(date);
});
Thinks that your model is a class named What like this:
public class What
{
public string StartDate { get; set; }
}
Then, think that your application is "MyApplication", you need to add to the view as if the view is stronglytyped:
#using MyApplication.Models;
#inherits System.Web.Mvc.WebViewPage<What>
Then all should we run as you expect
Suppose I have a table like:
create table
{
id numeric(5,3),
code varchar(10)
}
I have two text boxes in my form for the two fields.
Suppose if I type 1234578 in the first text box the error has been thrown in ASP.NET because I crossed the limit.
How can I validate in JavaScript or some other way for that particular range validation?
Let's take one textbox only. Attach an 'onchange' event handler to your textbox like this:
<input type="text" onchange="handleChange(this);" />
Then declare a script for validation like this:
<script>
function handleChange(input) {
if (input.value > ..your_value_here..) alert ("Invalid input");
}
</script>
Please note that the alert pop-up used here should not be actually used. Use a more subtle reminder at a more appropriate moment. The alert here is only to make things simple.
I want to pass a query in a hidden filed from 1 page to another by querystring.
Can anyone help me out with the logic?
It's worth taking the time to learn jQuery. It's not very complicated, and it makes writing javascript much easier. There are also many jQuery plugins, such as jquery.url.
Also, as other posters have suggested, you may not wish to put the hidden field's value in the query string if you care about it being displayed to the user. However, if the data is present in a hidden field it will always be possible for a user to find it if they care to look.
If you really do want to put the hidden field in the query string and then extract it via non-jQuery javascript:
hiddenFieldPage.aspx
This form will take the user to processingPage.aspx?datum=someValue when it is submitted. You could probably also just use an ordinary link if nothing else needs to be submitted at the same time.
<form method="GET" action="processingPage.aspx">
<input type="hidden" name="datum" value="someValue">
<input type="submit">
</form>
or, inserting the value from code-behind:
RegisterHiddenField("datum", "someValue");
processingPage.aspx
This script will pop-up an alert box with the value of "datum" from the URL - assuming the form's method is set to "GET":
<script type="text/javascript">
function getUrlParam( key ) {
// Get the query and split it into its constituent params
var query = window.location.search.substring(1);
var params = query.split('&');
// Loop through the params till we find the one we want
for( var i in params ) {
var keyValue = params[i].split('=');
if( key == keyValue[0] ) {
return keyValue[1];
}
}
// Didn't find it, so return null
return null;
}
alert( getUrlParam("datum") );
</script>
If the form's method was set to "POST" (as it usually would be in ASP.NET), then "datum" won't be in the query string and you'll have to place it on the page again:
RegisterHiddenField( "datum", Request.Form["datum"] );
To retrieve the hidden value on the second page:
var datum = document.Form1.item("datum").value;
alert( datum );
You can easily submit a form on one page that points to another page using the action parameter. For instance, inside of page1.aspx put the following:
<form action="page2.aspx" method="GET">
<input type="hidden" name="username" value="joenobody" />
<input type="submit" />
</form>
Since you're using "GET" as the method instead of "POST", you could potentially use Javascript to parse the URL and get the value that was passed. Alternatively, you could use ASPX to store the value of the "username" field somewhere else on the page. I don't know ASPX (or ASP, or anything Microsoft really), but if you can find a way to output something like the following (and are using jQuery), it may do what you require. Honestly though, it sounds like you are going about something all wrong. Can you modify your question to be a bit more specific about what the general object is that you are attempting to accomplish?
<div id="some_div"><%= Request.form("username") %></div>
<script type='text/javascript'>
var value_needed = $('#some_div').html();
</script>
<form method="get">
Assuming you mean hidden in the HTML form sense, your field will be submitted along with all the other fields when the form is submitted. If you are submitting via GET, then your "hidden" field will show up in plain text in the URL. If you don't want the data in the hidden field to be accessible to users, don't put an understandable value in that field.
If you are using aspx, you do not need to parse the query string using JavaScript, or even use <form method="GET" ...>. You can POST the form to the second aspx page, extract the value in C# or VB then write it to a client-side JavaScript variable. Something like this:
page1.aspx:
<form method="POST" action="page2.aspx">
<input type="hidden" name="myHiddenServerField" value="myHiddenServerValue">
<input type="submit">
</form>
page2.aspx:
<script type="text/javascript">
var myHiddenClientValue = '<%= Request.Form['myHiddenServerField']; %>';
</script>
The above would set the client-side JavaScript variable called myHiddenClientValue to a value of 'myHiddenServerValue' after the POST.
This can be a bad idea because if myHiddenServerField contains single quotes or a newline character, then setting it on the client in page2.aspx can fail. Embedding ASP.NET Server Variables in Client JavaScript and Embedding ASP.NET Server Variables in Client JavaScript, Part 2 deals with specifically these issues, and solves them with a server-side class that ensures values being written to the client are escaped correctly.
If you use method="get" on an HTML form then any hidden inputs in that form will be converted to query parameters.
See also Jeremy Stein's answer.