Response title
This is preview!
Move this topic
I am using jquery modal plugin to raise modal forms on a page. If I make the modal form visible on page load (as a test, and not yet raised by the plugin), the browser's autofill functionality works fine in the input fields. But, when I raise the modal form using jquerymodal (it detaches then appends the modal element to the body) the autofill no longer works. Any idea as to why?
I thought it might have to do with the fact that the form code is inside <form> tags on the page, but when the jquery modal plugin operates on the element, it appends it outside those tags. I thought this might cause issues with the browser understanding that they are input fields. But, removing the form tags entirely made no difference. I can't even get autocomplete to work on this element when it is raised as a modal window.
Any help would be appreciated!
1
Replies(10)
Are we to guess what you wrote? Which browser? What are you auto-filling? What do you mean by "form code? HTML, or Javascript?
Use jsFiddle to make a demo that we can try.
Yeah, I'd hesitated making a fiddle because it's vb.net. I will post the code I've got a little bit later. Browser is Chrome so far. I am autofilling email, first and last name, phone, and country. Sorry about the "form code." That was an editing error (corrected above). I just meant code inside my form tags gets lifted when it's "modal-ized" and appended to the body outside the form. I'm using the jquery modal plugin (jquerymodal.com) and the input elements were originally asp controls in vb.net. See my response to Jake below as to the workaround I've begun exploring, that of replacing asp controls with html input fields and making sure they have autocomplete keywords set correctly. I've been testing in Chrome only so far but will need to expand to include ff and ie.
Leave a comment on watusiware's reply
The example shows to use the form as the modal.
- <a class="btn" href="#ex2" rel="modal:open">Open Modal</a>
- <!-- Modal HTML embedded directly into document -->
- <form action="" class="login_form modal" id="ex2" style="display:none;">
- <h3>Please login to continue</h3>
- <p><label>Username:</label><input type="text" /></p>
- <p><label>Password:</label><input type="password" /></p>
- <p><input type="submit" value="Login" /></p>
- </form>
If that is not convenient, use the form= attribute on each form field. That way the element stays with the form, even though it was moved outside of it.
NB the form attribute does not work in IE.
JΛ̊KE
Thanks for this. The issue with your approach is that I'm stuck with almost the entire page being inside of a form. I can't change that, so I can't put these form tags inside the larger form.
One thing I've tried in Chrome (haven't tested other browsers yet) that seems to be working, though I'm still not clear why all the way, is convering my asp controls (it's vb.net) to straight html input fields. I can do this because, for the most part, I can work around needing server side access to values for the controls. When I do this AND set autocomplete using keywords (e.g., autocomplete="given-name" for first name) AND make sure that all input fields have some keyword set for autocomplete, then the autofill suggestions from the browser appear and can be chosen.
If you or anyone can explain why this works I'd love to hear it
Leave a comment on jakecigar's reply
Nobody here uses ASP anything. Find an ASP forum.
Taking steps to distance you from ASP solutions makes you a better programmer.
JΛ̊KE
Leave a comment on jakecigar's reply
I just meant code inside my form tags gets lifted when it's "modal-ized" and appended to the body outside the form.
I still don't know what you mean by "code". Do you mean Javascript code? There is rarely any good reason to place Javascript code inside of some node. And likely to cause troubles if you are moving that node around, cloning it, etc.
Your Javascript code (generally) belongs in a file or files referenced with <script> inside <head></head>. OR, as some prefer but rarely done any more, at the bottom of your HTML before the closing </body>.
Ha! Not much one can do if working for a "Microsoft shop"! ;)Taking steps to distance you from ASP solutions makes you a better programmer.
The secret word to cajole your boss is "Azure". Did you know that more than 50% of Azure servers run Linux? Lots and lots of non-ASP solutions on Azure!
Leave a comment on watusiware's reply
Ah, code. html/asp code in my aspx file.
If the modalLogin id is what I raise modally, it appends that element and its content to the body, outside the form tags that wrap most of the page's content, thus breaking the autofill functionality
Example:
- <div id="modalLogin">
- <asp:TextBox ID="EmailAddress" Name="email" TabIndex="21" CssClass="gen-textbox4 animatedPlaceholderInput" runat="server" MaxLength="50"></asp:TextBox>
- </div>
Leave a comment on neilhkessler's reply
That code should never make it to the browser.
It is transformed into HTML by your server and should arrive in the browser as classic HTML without ASP stuff.
We’ve learned over the years, that your ID never makes it to the browser either. It is changed into some long "unique" string.
JΛ̊KE
Leave a comment on jakecigar's reply
Your chosen plugin may not be compatible with ASP. At least not the way you are using it. Use an ASP solution. If you must use ASP for the <form>
JΛ̊KE
Leave a comment on jakecigar's reply
It is not useful to post your ASP, PHP, or other templates that allow you to mix server-side code with HTML.
The code runs on your server, and replaces itself with some text or HTML (or perhaps even some Javascript) before being sent to the browser. That's what the browser has to work with.
Browsers do not run ASP, PHP, etc. code.
If you are using these sorts of templates, and you want to post all or some of your page here, use your browser's "view source" to see what your server sent to the browser.
Make sure you understand which code runs on your server and which code runs in the browser.
Moving/cloning some HTML nodes doesn't run your server-side code. The server code came and went before the browser ever got the page!
I'd guess that:
<asp:TextBox ID="EmailAddress" Name="email" TabIndex="21" CssClass="gen-textbox4 animatedPlaceholderInput" runat="server" MaxLength="50"></asp:TextBox>
generates something like:
<input id='dsfkjsdfksdfj888' name='email' tabindex='21' class='gen-textbox4' maxlength='50'>
And there's the rub: *something like*.
It might generate some inline on event attribute, it might generate some Javascript code inserted somewhere else. We don't know, because we are not your server!
It can be difficult to get ASP to play nice with Javascript libraries and frameworks. You need to talk to ASP experts to sort it out. ASP experts aren't here.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to neilhkessler's question