I have my form fields in a Panel which, if a read-only version is required, I set Enabled = False on the Panel. This was quick and dirty and the results are mostly dirty, mostly in IE. Can't scroll through large ListBoxes. Multi-line TextBoxes only show the first few lines. There's some funky styling to disabled Labels.
Do you have any ideas as to how to disable an entire form, letting the user read the data, visually indicating that it is disabled (gray input or text in place of input), but to the server keep the control disabled so it's not loading any data that could be manipulated by enabling fields by nefarious means.
(Also, I'm hoping I don't have to add a label corresponding to each data field.)
You could remove all the buttons and use jQuery to change the background color on all inputs. This would be a quick and easy solution.
$(':input').addClass('disabled');
You can have your fields assigned the readonly attribute, ie:
<input type="text" name=myText value="Enter Your Name" readonly>
This can easily be done with js but is more robust if done right in html.
You could also disable or even remove the submit button.
I would use the ASP web controls. The TextBox for the input type="text".
All web controls have the enabled property
<asp:TextBox id="txtSomething" runat="server" />
You can now enable/disable all controls from code like you do today (for the panel). But you have to do it for every one (I don´t know how many you have).
txtSomething.Enabled = False
You can also do this with JavaScript.
Loop all elements in the form, and disable/enable them.
function DisableEnableForm(myForm,setDisable){
elems = myForm.elements;
for(i=0;i<elems.length;i++){
elems[i].disabled = setDisable;
}
}
You can trigger this JavaScript function from ASP like this:
Button1.Attributes.Add("onclick", "javascript:DisableEnableForm(´form1´,true)");
Related
I'm working on the mobile version of my website and have a few textboxes where I want the virtual keyboard to popup as numbers (phone, zip, etc). Some of these also have custom filters attached to them to validate what's entered.
Because of the validators, I use asp:TextBox instead of a plain input. I then add type as an attribute in the codebehind
<asp:TextBox ID="SearchBox_Phone" runat="server" CssClass="inp-bl-lvl width95 l"
placeholder="Phone"></asp:TextBox>
SearchBox_Phone.Attributes.Add("type", "number");
I can get the correct value in js
$get('<%= this.SearchBox_Phone.ClientID %>').value;
but in the codebehind SearchBox_Phone.Text always returns blank. If I comment out the attribute addition I can get the correct value, but I really want to keep it as is.
Any idea how I can get the value, short of setting a hidden input in js (I'd like to avoid an extra value that needs setting/clearing)?
what are benefits of using a hidden field in ASP.NET when we can use another invisible element such as label or text box?
The hidden field generate <input type="hidden" /> element on the page, which cannot be seen but the client can get the element, set the data and pass to the server:
document.getElementById('<%= SomeHiddenField.ClientID %>').value = "data_pass_to_server";
after postback you can get the value:
var clientData = SomeHiddenField.Value; // "data_pass_to_server"
If you're using invisible textbox (<asp:TextBox Visible="False" />), there's no element generated in the html file.
Either way works, for text box, don't use .visible="false"
use
yourTextBox.Style.Add("display", "none")
or
yourTextBox.Style.Add("visibility", "hidden")
A hidden field renders as input type="hidden" in the resulting HTML. Being an input the value in the input is submitted to the server on postback while this is not the case with a label. Depending on whether or not you want that value submitted to the server you should use input or label. If you don't want the value to be submitted then label is the right solution and hidden field is wrong.
I am not sure what you mean by invisible textbox but if you are trying to make it invisible via CSS keep in mind that the input type has semantic meaning to search engines, bots, etc. Also at some point your HTML might be served without CSS or with different CSS and the text box will become visible to the user. Otherwise there are no differences between hidden field and invisible text box as both of them render inputs.
Practically you can achieve the same thing with any of them, but since you want a "hidden field", semantically speaking the hidden field in ASP.NET is your best bet for readability reasons.
I need to display part of the exposed form in my page's sidebar, and the rest of the form and content in the $content area. There's really no good way that I can find to do this. I sort of got it to show up in a way by making a "block" view with "exposed form" set and then trying to only show the part that i needed through .tpl files. The problem is that then, when the submit button is clicked (the submit button is in the $content area), then the filters that are in the sidebar are not taken into account.
Some lateral thinking... Why not explore CSS-only options? You can place that form element playing with position:absolute ? Or (considering is a right-sidebar) float:right and then some negative right margin to push it to the sidebar? If you are using 960 grid system, play with pull and push classes.
First I am going to answer your question, then I will explain why you are asking the wrong question:
If you build the form outside of the formapi, you might have some luck. This will get upgly and will require you to take a lot of extra care about attack-vectors such as mass-assignment.
views_some_view.tpl.php:
<form name="input" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
my_custom_exposed_view.module:hook_block()
City:
That would make a form, which in most situations will start with <form>, have some input fields, then have a lot of random HTML, then some more input fields and then the closing .
As you may know, a <input type="submit" value="Submit" /> will only post everything of the form tags it is enclosed in. The submit button in the following HTML:
<form name="input_1" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
</form>
<form name="input_2" action="/link/to/view" method="get">
City: <input type="text" name="city" />
<input type="submit" value="Submit" />
</form>
will only send the City. These are not the droids you are looking for.
It will need to be one, big form, but since everything between form and /form is very dynamic, and contains a large quantity of HTML, including potential other forms, this is really not what you want. Moreover: a blocks appearance (shown/not-shown) is controlled completely independent of the content. You will need a lot of sturdy code to ensure the block a) never shows up when the starting form tag is not present, and b) the block will guaranteed to be shown when that opening form tag is present. Else you have not just invalid HTML, but broken HTML that will truly render your page unusable in most cases.
You simply don't want a part of the form in a block and the other part in the content.
However, you want it visualised as if one part is in the body, the rest in a sidebar.
The good news, is that with HTML presentation structure are independant. That is where your solution lies.
Give your form-fields good ids and classes. You could use a hook_form_alter to change existing forms, but you probably simply just want to create the HTML for that entire form yourself. The theme layer allows that.
Use CSS to pick out either single form-fields by ID and position:absolute them into the correct place. Or pick out classes of fields by CLASS and position:relative them into the correct place.
Make a simple identification-routine that allows adding a class to the body-tag. (see below).
Add some CSS to shift the sidebar lower, making space for the form-fields to be moved in, when that class is in the body-tag.
<body class="<?php print $splitform ?>">
function my_themename_preprocess_page() {
if ($GET['q'] == 'path/to/view') {
$vars['spliform'] = "splitform"
}
}
From the above explanation I am assuming that you are printing same form in block and in content area and you are hiding some part of form in page.tpl , if this is true then you can use hook_form_alter() in your custom module then
Store the value of the form element(present in block) in global variable.
Now use that global variable and set form element(present in content area, this form element is not visible to user).
Provide more information if you implemented other way.
Regards,
Chintan.
There is a related issue here:
https://drupal.stackexchange.com/questions/3827/multiple-copies-of-views-filter-form-exposed-filters
which describes how to duplicate your filters. However it seems like an ugly hack.
A bit cleaner seems this solution mentioned in #6:
http://drupal.org/node/641838#comment-3247748
Haven't tested it out, but it looks good.
It will still give you some overhead (duplicate views) but it might be the easiest way doing this using views.
On the other hand you might write a module and build your own custom filter block which hooks into your view. Here is a blog post about this:
http://www.hashbangcode.com/blog/creating-custom-views-filters-exposed-form-element-drupal-6-561.html
If you use something like context you could get the exposed filters block to display twice in the same page. You could then use CSS to hide the fields you don't want to do display in each form.
The fundamental problem you're having is that to have the two forms in different places, they'll each have their own form element - when a submit is triggered, only the form fields within the same form element are sent. You need to move them into one form, or rely on JavaScript to gather the fields from both forms and construct the post.
You could create the block as an empty div and have javascript from the main page populate it with the secondary filter form and whatever else you need in there. Again, you could use javascript to copy the form values from the block form to hidden fields in the main form on submit. That gives you all the control you need from one place (the node output). Only caveat is that it relies a lot more on javascript to join it all together.
I have a read-only form filled out automatically from a database. I have several fields with true/false values, and would like them displayed as checkboxes that are either empty or checked. I can databind the checkbox control and disable it, but then it appears grayed out. Is there a simple way to change this so it will show up at a normal, easy-to-read boldness but still be disabled? If not, what's the best way to do this? Should I use an image?
You can go like this as well.
<asp:CheckBox id="checkbox1" Text="Custom" onclick="javascript: return false;" />
Which will render it as
<input type="checkbox"
checked onclick="javascript: return false;">Custom</input>
Interesting question!
There's only one issue I can see with using images instead of normal checkboxes, and that's how the active checkboxes will differ from the disabled (image-based) checkboxes. So, if you go the image route, you will probably want to style all checkboxes. :)
You can effectively disable any checkbox with the following jQuery method (I've only tested in Chrome and IE 9, so far).
$('.readonly:checkbox').click(function(e) {
e.preventDefault();
});
This will "disable" any checkbox with the "readonly" class.
Or, you can use an inline JavaScript function (albiet not recommended, as it adds clutter and confusion):
<input type="checkbox" onclick="event.preventDefault();" />
The reason you would use "preventDefault()" instead of "return false", is because returning false will stop propagation. This means that your click event will not bubble to the parent element. That could potentially cause problems with other code... but it's unlikely.
Also, like Bala R mentioned, you mustn't rely on these restrictions to work. Your server side code should be aware that these values are read only, and refrain from updating them.
Here is jsFiddle example: http://jsfiddle.net/xixionia/3rXCB/
I hope this is helpful! :)
You can do something like this with javascript and use it for the checkbox's onclick handler.
jsFiddle link
function makeMeReadonly(checkbox){
checkbox.checked = !checkbox.checked;
}
and
<asp:CheckBox id="checkbox1" onclick="makeMeReadonly(this)" />
or
<asp:CheckBox id="checkbox1" onclick="this.checked = !this.checked" />
if you want it inline.
but you shouldn't depend on this for security as it will be a regular check box when javascript is not available and/or client code is not that difficult to work around client code restrictions but in your case since you have a readonly view, I wouldn't think you have any logic to save changes.
I just had the same problem and fixed it with an OnClick event on the checkbox. In the event handler the .Checked state is set to the value it is supposed to display.
private void chkBox_CheckStateChanged(object sender, EventArgs e)
{
chkBox.Checked = boolDatabasevalue;
return;
}
Works great, the user can click on the checkbox but the check mark does not change.
The only issue is a slight border shadow indicating the Focus. But the checkmark is, as OP was looking for, of easy-to-read boldness.
NB: this is C#, but in Asp.Net this should work similarly.
I'm developing an ASP.NET form for data-entry. Users have to select a client from a dropdownlist that is filled with about 1000 clients.
Now the client list is growing and the users have requested that I add a lookup feature: they'd like to type part of the name and filter the dropdownlist with clients whose name match. So if they type 'aaa' they'd like to see only clients with 'aaa' somewhere in their name.
I have looked at the ajax control toolkit's AutoComplete but that works on textboxes, not dropdownlists.
Can anyone suggest a nice solution?
Use it on a textbox then! Surely the person looking in the dropdown list knows the name of the client. There is little difference, in my opinion, in this scenario.
I have been using a jQuery tag suggest add in on my MVC app which works very well.
http://remysharp.com/2007/12/28/jquery-tag-suggestion/
If you are interested just comment and i will give you the code i am using.
If you really want to use a dropdown list you could have a textbox and dropdown list in an update panel. When the users enters the text (and clicks a button) you could then populate the dropdown using results filtered to what the users types.
I think a textbox would actually be preferred for this. A select box doesn't invite typing - so it becomes a bit of a hidden trick to filter it (not to mention that Firefox will pretty much do it right anyway).
You can easily throw an image next to a textbox to indicate that it has options, which allows both mouse driven or keyboard driven interaction.
I'm partial to JQuery, so I'd use JQuery's autocomplete - which has config options to require a match, or that clicking the box will drop down all items.
If you're interested in "progressive enhancement", you may be best off with both a traditional select input (for accessibility) that gets replaced by an autocomplete textbox driven off the same data. Something like:
<select id="s">
<option value="foo">Foo</value>
<option value="bar">Bar</value>
</select>
var d = $('#s OPTION').map(function() {
return $(this).text();
});
$('#s').hide().append('<input type="text" />')
.autocomplete(d, {
mustMatch: true,
minChars: 0,
autoFill: true,
matchContains: false
})
.result(function(e, d, f) {
// Select option for the form to submit
$('#s').val(d);
});
You could also leave the select visible - which makes it more flexible, but potentially more confusing - and hook an event handler to the select box to update the textbox as well so that they stay in sync.