So I'm working through validating my forms in asp.net and I noticed the rendered form input elements are changing the "name" attribute from something like name="firstName" to name="ctl00$ContentPlaceHolder1$txtFN".
It appears to be grabbing the id of the input element as well as some other text which at this point I can't entirely make sense of.
For reference:
this is the rendered element -
<input name="ctl00$ContentPlaceHolder1$txtEmail" type="text" id="ContentPlaceHolder1_txtEmail" class="reqT">
and this is what I am setting up initially -
<asp:TextBox ID="txtFN" class="reqT" runat="server" name="firstName"></asp:TextBox>
Would anyone be able to clarify:
- the significance of this insert
- is it changeable, and if so what sort of effects does this have
Thanks!
ASP.NET does that to insure completely unique names on input elements. You can disable it by changing the ClientIDMode to Static.
Scott Gu explains a few ways to do that here: http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx
I personally find the web.config option to be the easiest:
<system.web>
...
<pages clientIDMode="Static" />
...
</system.web>
Related
This question might appear as duplicate of:
XPATH required for an input text field? but question is why my custom xpath is not working. Though it is working for buttons, plain text on page, links etc.
Here is the HTML of it:
<input id="uemail" class="input_text" type="email" value="" tabindex="1" size="30" name="user[email]" autofocus="autofocus" autocorrect="off" autocapitalize="off"/>
For this HTML I tried to find it in firebug, I wrote:
//*[text()[contains(.,'user_email')]]
//id[text()[contains(.,'user_email')]]
//*[id()[contains(.,'user_email')]]
but none of worked, what am I missing.
Reasons:
1. Because, You are looking for text using text() but there is no text(as per given HTML), like you might have in links, buttons, plain text on page etc,so remove it.
2. after 'contains' you are looking for all elements just look for its type i.e. id
3. third you know that it's an input field so use * or input. * means any and input means that this is an input box.
So, finally it becomes://input[contains(#id,'user_email')]. Which I am sure will work.
<!-- Some place on the webpage -->
<input type="text" id="firstName">
<!-- Some other place on the same webpage, or maybe content ajaxed in later -->
<input type="text" id="firstName">
Let's say I have a server-side script that generates an HTML page with some input fields each with its own ID. One server-side class may be responsible for adding input fields to one part of the webpage while another class handles another part of the webpage. Or you might have different programmers working on different parts of the page. I want to avoid collision with the HTML input field IDs. An example of this could be a parent form that has a jQuery dialog popup with input field IDs the same as the parent. Currently, I am prefixing the IDs with the name of the server-side class that generates them (and an underscore to make it clear which part is the prefix). To get a fully unique ID this way, I might have to start including the full namespace of the server-side class, and this might make my IDs very long.
Is there a better approach than prefixing the inputs or what is the best practice for this? I normally use camelCase for all my variables, with only this exception. Is this a good exception for breaking that rule?
What are most of you doing? Are you altering the way you select these input fields instead of by ID? Wrapping the input fields in form tags or div tags and adding functionality to the server-side to create these? (I'd like to have the freedom of not restricting what I wrap these inputs in to select them. My server-side code should just generate client-side code that grabs the values only knowing those inputs are going onto the page, and not knowing about any other tags on the page. Much easier to manage.) Are you adding css classes to each group of fields?
This answer is a little more directed towards users coming in from search engines. In my opinion, if you are using the id attribute in a dynamically generated form, they should probably be some kind of generated id/hash, unless it truly is a unique field. That aside, this is probably the best way to namespace HTML forms, especially when it is subject to collision:
<input name="pet_store[name]" value="" />
<input name="dogs[0][name]" value="" />
<input name="dogs[1][name]" value="" />
<input name="dogs[2][name]" value="" />
<input name="cats[0][name]" value="" />
<input name="cats[1][name]" value="" />
<input name="cats[2][name]" value="" />
If submitted all at once, the inputs will automatically be organized into arrays (at least in PHP, for nodejs you might have success with https://www.npmjs.com/package/qs).
In jQuery, you can select all dog name fields like this:
$('input[name$="[name]"][name^=dogs]')
I would use classes in this case. If you can't control what the uniqueness of ID's then they become pretty meaningless.
Instead of generating a super-long class name from the code that generates the html, you could add many shorter css classes to inputs that need them. It's not unusual to have lots of different classes in your document and they can all be used together with jQuery selectors. Also remember that if your inputs are in different forms then the form id (or class) could also be considered to work a bit like a 'namespace' too.
For reference, point 7.5.2 of the W3C Global Structure of an HTML document states that the id must be unique.
The idea of ids is that they are a unique reference to an element and as such it is not legal (valid HTML) to have multiple elements referring to the same id. If you want to avoid collisions and still identify the element you could use a combination of classes.
For example if you have 2 forms asking for a name (as in your previous comment) you could use:
<input type="text" class="ajax firstName" />
For the form generated by ajax, and
<input type="text" class="initial-form firstName" />
For the initial form on the webpage.
Equally you could use the data- attribute to hold a namespace. E.g:
<input type="text" data-namespace="ajax" class="firstName" />
(This can be accessed through Javascript with element.dataset["namespace"])
Use data-xxx attributes if you must, but I can't really think of a practical case of independent server-side scripts generating hundreds of DOM elements with unique IDs up to the point where name collision would become an issue.
I have a Facelets page with two <h:inputText> text fields and one <h:selectOneMenu> dropdown field. When I refresh my page, then the values that are entered in text fields should be cleared and dropdown should be reset to its default selection. This is not happening. How is this caused and how can I solve it?
Modern webbrowsers will autocomplete input fields by default or by configuration. If you'd like to prevent this browser specific behaviour, then you need to add autocomplete="off" to the individual input fields.
<h:inputText ... autocomplete="off" />
<h:inputText ... autocomplete="off" />
<h:selectOneMenu ... autocomplete="off" />
See also:
W3 Web Forms 2.0 specification - autocomplete attribute
I want to know is there any way to add a custom attribute to the a
HTML element.
For example ,
<input type="text" name="txtNAME1" displayName="dname1" />
In the above example the custom attribute "displayName" is not a
standard HTML attribute. So I want to know if I can define the same and push the intended value to the server and access the same attribute's value.
Thanks in advance!
Which language are you using? You can do this in C# using
<input type="text" name="txtNAME1" displayName="dname1" runat="server" id="test" />
Then, in the code behind:
test.Attributes["displayName"];
You can also access it in jQuery with
$('test').attr('displayName')
and send it through to the server via a handler.
I want to render a <label> tag. But want to set some of it's properties while it's rendering like for and text value.
Actually my real problem is I want to associate a label with a radio button and this is the code so far I have:
<asp:RadioButton ID="Option4" GroupName="A" runat="server" />
<label for='<%=Option4.ClientID %>' id="lblOption4" runat="server">4</label>
But the problem with this code is that it is not working and rendering the for attibute's value as it is i.e. <%=Option4.ClientID %>. :-(
Is their any asp net server control which would render tag?
I don't want to set the Text property of the radio button due to some CSS limitations so plz do not give answers like why don't you set the Text property of the radio button.
if this is .NET 2.0 or later, then use the ASP.NET LABEL control.
<asp:RadioButton ID="Option4" GroupName="A" runat="server" />
<asp:Label AssociatedControlId="Option4" Text="4" runat="server" />
If this is to ultimately handle accessiblity issues you could try the following tutorial: Creating an Accessible LABEL control in ASP.NET