jQuery mobile and unique ID attributes on forms

greagighinetop

New Member
I have a question regarding the use of the ID attribute within forms when using jQuery mobile. While what I have seems functional, I'd like to get everything into a consistent and accurate state.The jQuery mobile documentation states:\[quote\] When constructing forms to be used in jQuery Mobile, most of the standard guidelines used to create forms that submit via normal HTTP post or get still apply. However, one thing to keep in mind is that the id attributes of form controls need to be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time, so you must be careful to use unique id attributes so there will be only one of each in the DOM (and of course, be sure to pair them properly with label elements via the for attribute).\[/quote\]I have a multiple page website. 1 form per page. All the forms, across all pages have a unique ID, based on the page name (e.g. "return-user-details.php" page gets a form ID of id="rudForm").Many of these pages however need the same input field (a text field element (aka form control?) for a username). These all use the name="username" attribute and value. They do not have an ID attribute. Currently this particular field is presented as:\[code\]<legend>Username:</legend><input type="text" name="username" maxlength="20" /><label for="username">&nbsp;</label>\[/code\]My main question is whether or not I need to have a unique ID for the username text field across all pages as well as the form ID, or could I make do with id="username" for this field on all pages? I suppose the answer to this would also apply to every element/form control? (and therefore perhaps it would be a good idea to use the "page prefix" for every ID within the form on the page).As I've said, currently I can use different pages each of which contain this field and they seem to function fine, and so my subsequent question is regarding what could be going wrong by using the above? While I understand the abstract concept of "multiple pages being present in the DOM" (e.g. requiring things to be unique) I don't understand jQuery well enough to understand how this may translate into problems. Could it result in styling / formatting issues? Or maybe also incorrect data being submitted?Many thanks,Rob
 
Top