Textbox with type="number" has blank Text - asp.net

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)?

Related

Hide aspx button in code behind

I am trying to hide an aspx button on page load if another element has a certain value.
Button:
<input type="button" class="formButton" id="btnShowTerminate" value="Terminate Credential" onclick="ToggleTerminationRow()">
My issue is that I don't know how to edit the buttons attributes (to make it hidden) in the code behind.
In code behind (on PageLoad event):
Page.btnShowTerminate.Visible = false;
HTML controls need to be given the runat="server" attribute in order to be used in the server-side code.
To hide the button from your code behind, use an If statement to test if your 'other element' has the required value.
C#
If(exampleElement.Value == "example value")
{
Page.btnShowTerminate.Visible = false;
}
VB
If exampleElement.Value == "example value"
Page.btnShowTerminate.Visible = false;
End If
This error -
'System.Web.UI.Page' does not contain a definition for
'btnShowTerminate' and no extension method 'btnShowTerminate'
accepting a first argument of type 'System.Web.UI.Page' could be found
(are you missing a using directive or an assembly reference?
is because you haven't included runat="server" in your input.
The exampleElement.Value may have to be different depending on what type of element exampleElement is. For example, Value will work with a TextBox , but you would need to use InnerHtml for a div
Although, a button (any control for that matter) can be hidden from code behind by setting the Visible property to false, there is subtle, and dangerous nuance to that. Doing this causes the button not only to be hidden, but the resulting HTML button will not render on the page. Should you have JavaScript that is referencing the button, the JavaScript will fail because the button does not exist on the rendered page. In debugging, the bug will be caught, but if the JavaScript is never exercised until the code is deployed to a server, it will fail there but no exception will be thrown. The code just won't work and there will be no indication as to why!
The safe way to hide the button is setting the Style as follows:
btnName.Style.Add("display", "none");
This way the button will be rendered but hidden and JavaScript will be able to find it.

How can I access custom Textbox attributes in ASP.Net?

I am using/abusing CSS classes and custom html attributes to provide default data to a set of textboxes. The code-front for this looks like the following (with some supporting javascript to handle checking/setting the default data when the field is blank):
<asp:TextBox ID="TXT_LenderName" class='defaultText' data-default='Institution Name' runat="server"></asp:TextBox>
This works.
I am working on the code-behind to process this form. I would like to be able to compare the value of the TXT_LenderName.Text to the value of the data-default attribute, but I haven't been able to find a way to get the value of a custom html attribute. Suggestions?
This is tested and worked
string customAttrDataDefault = TXT_LenderName.Attributes["data-default"];
txtpassword.Attributes.Add("value","Password value");
try this:
TXT_LenderName.Attributes["AttributeName"]= value;//here get or set the value.
If the control, like the TextBox control inherits from the System.Web.UI.WebControls.Control class then it should have an Attributes property which is a name value pair collection of the control's attributes.

ASP.NET hidden field vs. invisible textbox

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.

What is the easiest way to disable a form but keep it readable?

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)");

Is there a way to use Thickbox with dynamic content?

Here's the scenario:
I have a textbox and a button on a web page. When the button is clicked, I want a popup window to open (using Thickbox) that will show all items that match the value entered in the textbox. I am currently using the IFrame implementation of Thickbox. The problem is that the URL to show is hardcoded into the "alt' attribute of the button. What I really need is for the "alt" attribute to pass along the value in the textbox to the popup.
Here is the code so far:
<input type="textbox" id="tb" />
<input alt="Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700" class="thickbox" title="Search" type="button" value="Search" />
Ideally, I would like to put the textbox value into the Search.aspx url but I can't seem to figure out how to do that. My current alternative is to use jQuery to set the click function of the Search button to call a web service that will set some values in the ASP.NET session. The Search.aspx page will then use the session variables to do the search. However, this is a bit flaky since it seems like there will always be the possibility that the search executes before the session variables are set.
Just handle the onclick of your button to run a function that calls tb_show(), passing the value of the text box. Something like
... onclick = "doSearch()" ...
function doSearch()
{
tb_show(caption, 'Search.aspx?KeepThis=true&q=\"' +
$('input#tb').val() +
'\"&TB_iframe=true&height=500&width=700');
}
If you read the manual, under the iframe content section, it tells you that your parameters need to go before the TB_iframe parameter. Everything after this gets stripped off.
Here is an idea. I don't think it is very pretty but should work:
$('input#tb').blur(function(){
var url = $('input.thickbox').attr('alt');
var tbVal = $(this).val();
// add the textbox value into the query string here
// url = ..
$('input.thickbox').attr('alt', url);
});
Basically, you update the button alt tag every time the textbox loses focus. Instead, you could also listen to key strokes and update after every one.
As far as updateing the query string, I'll let you figure out the best way. I can see putting a placeholder in there like: &TB=TB_PLACEHOLDER. Then you can just do a string replace.
In the code-behind you could also just add the alt tag progammatically,
button1.Attributes.Add("alt", "Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700");

Resources