Having written a small mobile web site using ASP.Net, some HTML 5 and jQuery Mobile, I want to be able to change the keyboard which appears when a user selects a particular field to enter data (number keyboard when a phone number is required, keyboard with ‘@’ visible when an email address is required etc).

The trouble is that when I add ‘type=”tel”‘ or ‘type=”email”‘ (without the single quotes, of course) the values from the textboxes don’t get submitted along with the rest of the form data.

So:

<asp:TextBox runat=”server” ID=”txtEmail” />

works, whereas

<asp:TextBox runat=”server” ID=”txtEmail” type=”email” />

does not.

I’ve had a quick look around the ‘net and the answer is not immediately obvious (and critics on StackOverflow seem to be even harsher than on STW so I’m loathe to post there until I’ve done some more looking!).

It’s just occurred to me that it might be the version of the .Net Framework that I’m targetting – but it doesn’t work in my dev enviroment (.Net 3.5) or in the live environment (.Net 4.0) so I don’t think it’s that…

I know there are some other developers on STW: any of you have any ideas please?

Thanks!

.net interprets and rewrites the tags that you are writing in the source code. .net will have to understand what to do with the new parameter before it will create an input tag that works

I suggest downloading the .net source and helping to implement this new parameter and submitting a patch.

Oh, wait…

Rachel

Did I reach the heady heights of stack overflow with that??

More usefully, I see no reason you can not inject the parameter using jQuery on document.ready if the asp doesn’t want to play.

Rachel

I find http://www.codeproject.com/ much more helpful than Stack Overflow…

Hi Rachel

I hoped you might be along to help!

I think that the HTML emitted to the browser for the tags in question is the same in both cases with the obvious exception of the HTML 5 attribute / value pair (but should probably check again).

Surely the new attribute / value pair (which should only be there to enable the browser to display the correct keyboard) should be ignored by .Net and the value from the form element correctly submitted?

Yes, you may have approached the StackOverflow level there 😀 – do you feel the same way about the posts on there as I do then?

Thanks again for your replies all!

I could look at injecting the parameter in the way you suggest, Rachel, but it’s a lot of work if the form has more than a couple of elements requiring additional attributes… Surely HTML 5 and ASP.Net play together more nicely than this?

Thanks, footflaps, I’ll give it a look – although I didn’t see any answers to this particular question coming up in a Google search…

Try this.

http://stackoverflow.com/questions/2768515/render-asp-textbox-for-html5-input-type-date

Rachel

But it would not be a huge burden in jQuery as you would just ID or class the controls sensibly and use that as a way of finding them all at once in jQuery.

Hi Rachel

Gonna try this:

<input id=”txtEmail” runat=”server” type=”email” />

I’ll try to remember to let you know how it pans out!

I still think that ASP.Net will have to allow

<asp:TextBox ID=”txtEmail” runat=”server” type=”email” />

in the future. Perhaps I should should try opening all my websites / projects in VS Express for Web (ie VWD 2012) and see what happens… I’m loathe to try it until I have plenty of time to sort out any problems that crop up – hopefully not many will!

Many thanks Rachel and everyone else

Julian

allthegear – Member

But it would not be a huge burden in jQuery as you would just ID or class the controls sensibly and use that as a way of finding them all at once in jQuery.

Don’t want to disagree with you as you have been such a help but I’m not keen on having to use workarounds when it should just work in Visual Studio…

Oh, and by the way, this doesn’t work either:

protected void Page_Load(Object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txtEmail.Attributes.Add(“type”, “email”);
}
}

Julian

I’m pretty rusty on web dev at the moment, but this page doesn’t mention anything about a type property! Msdn

Like i said though, this may be no help 😀

@toby1

The ‘type’ property is an HTML 5 attribute rather than an ASP.Net attribute: I think that’s why the page you link to doesn’t mention it.

Thanks for the thoughts though!

I doubt that “<input id=”txtEmail” runat=”server” type=”email” />” is going to work. <input id=”txtEmail” type=”email” /> would be a better bet. runat=”server” is for .NET controls not standard HTML which that above is. Also make sure that the browser that you’re using to test does actually support the type=”email” functionality.

protected void Page_Load(Object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txtEmail.Attributes.Add(“type”, “email”);
}
}

Is that not also not javascript? That’s in the back end of the page is it not so c# or vb or something?

@chvck

You can add runat=”server” to (pretty much) any control and it will be interpreted by the .Net Framework.

I WANT the control to be a .Net control so it must have runat=”server” as a value / attribute pair.

The browsers that I’m using for my mobile site do support ‘type=”email”‘ and render the control correctly. It’s just that the form value doesn’t get submitted – and this is the problem. Actually, it doesn’t even matter if the browser DOESN’T render the control correctly. We’re looking for the values submiited by the form, and they aren’t there.

The code is C# and is in the code-behind. It adds the attribute ‘type’ with a value of ’email’ to the ASP.Net TextBox and all is good – the control is correctly rendered by the mobile browser. The problem is that the value from the control is not picked up by the code-behind!

Hi Julian,

Your not doing anything using jQuery that might move the input outside the .net form tag are you. E.g. I’ve had an issue where I had some .net inputs in the .net form which I then displayed using the jQuery UI dialog. This by default appends the dialog to the end of the body, which is out side the .net form tag (it moves the .net inputs). Result is the input values are no longer submitted in the .net form.

A

Hi A

Thanks for this! No, I’m not doing anything like what you describe.

The form values submit just fine without the type=”tel” in the tag, but disappear when it’s added. Any tags without the type attribute continue to submit their values even when the ones with the attribute don’t.

I have checked out using <input type=”tel” runat=”server” id=”txtPhone”> and as someone said above, it does not work. .Net complains that it doesn’t know about a type of “tel”

Have you come across Html5Asp.dll? Not sure about using it… And I’m not sure how my ISP will like the idea of me uploading such a thing…

Cheers

Julian

I’ve got come across that dll before. Looks useful though.A quick dig in the source suggest its a wrapper to the existing .net controls that adds the extra HTML5 functionality. I don’t think there would be any issue uploading a dll like that. Interestingly I did notice an override that handles getting the postdate for the control. Suggest to me that what your experiencing could be a known issue. Even more interestingly is that all that dll does for to add the type attribute is :Me.Attributes.Add(“type”, “email”).

Have you tried looping through all the submitted form values to see if the inputs value is there. I.e. is the data actually being submitted, but for some reason not being loaded correctly back into the control.

If all the dll does is add type=”email” by a different method I can’t see how it will make the problem go away! It looks very much like using Control.Attributes.Add(“type”, “email”); (which I’ve tried, without success)

I have stepped through the form submission and looked at each of the values being submitted but it’s not there.

I’m going to write a test page for this rather than trying it out on my mobile page!

I’ll also have to look more at Html5ASP.dll and see if i can make it work using the override.

Any more ideas gratefully recevied!

Cheers

Julian

Fixed it!

Replicated the issue in a test page: turns out that having the control inside an update panel was causing the problem.

Remove the update panel and all is good again. Shame, really, as I think update panels are a good thing – especially in a mobile site!

Can’t figure out why adding ‘type=”tel”‘ to a control works outside an update panel and not inside. Most odd… If anyone can enlighten me or knows the way round this issue so that I can have the panel back again I’d be pleased to hear about it…

Many thanks to all those who helped with this!

Apparently its a .net bug. Joy!

http://stackoverflow.com/questions/8649343/updatepanel-with-input-type-other-than-text-in-html5

Sounds like you have reached the point where the question is stackoverflow ready 😉

Well found, A!

I’m really glad it wasn’t just me missing something obvious. Guess we are indeed stackoverflow ready!

Hence the reason I try to avoid any .net dev at work these days…

Glad it worked out in the end, even though it is annoyingly weird.

Rachel

Hi Rachel

Thanks for your input on this, too!

Good thing that I love .Net development, really… It’s the only thing I can do which brings me in enough money to have a great deal of fun!

You still contracting Julian? I have thought about going that way myself recently to get more time off for the same ££.

Hiya nixie

Yep, still contracting. Looking for my next one right now – but you obviously guessed that!

Ltd Co now, so hoping to stay contracting for quite a while.

Email me or call me if you want to chat in private about contracting… Or anything else, of course!

Cheers

J