Field shown as autofilled by browser, is blank when accessed with js - javascript

I have a login form which gets auto-filled with username and password by the browser. On chrome I am seeing this issue where - the password field is shown as autofilled in the browser, but when I access its value through javascript, it is blank.
Has anyone hit this issue?

The values are most likely being filled out by Chrome after the page has been completely rendered. I can't tell how or when you are trying to fetch the values through your javascript but if you do it without letting the full page load you will not get any results. Try using the Window.onload-event at the bottom of the body to access the field.
Example:
<script>
//call after page loaded
window.onload=getPasswordFunc;
</script>
</body>

Related

How to force load custom User Control's javascript to load when control is displayed dynamically in ASP?

I have a user control, which contains a bunch of javascript code.
At the beginning of my javascript code, I've put a simple console.log('test') to see whether my javascript code has been loaded.
If I add my user control to a page, it displays its content correctly, and the test log message also appears in the browser's developer console.
However, if I put my user control in an ASP:Panel, that has Visible=false set by default, and I set its Visible property later, then the panel and the user control in it shows up correctly, but the related javascript code does not load in. Neither the methods in it are not callable when I try to call via ScriptManager.RegisterStartupScript, nor the "test" log message is displayed in the console.
Any suggestions on what could I try to force my Javascript to load when the User Control is loaded and displayed later?
Alright, I've found the issue.
My control was in an Update Panel that prevented my javascript to load in.
After I added a PostBackTrigger to my update panel to the other control that also made my asp:Panel visible, then it forced a full page load, and my user control's javascript code also loaded correctly.

Login Form focus

I am trying to create a login and register page.
This is the form. Suppose if I am click on ABOUT US page and return to login page (click back button), the content of this page showing like this..
My requirement is, If I am return to login page (from ABOUT US), the label should be in the top of the Mail Id (look in 1st image). Password is ok. Because we need to type again.
here is my code fiddle.. fiddle.jshell.net/1nmmcj80/
According to your jsfiddle, $ is not defined. It seems like you're trying to use jQuery, while it's not loaded. By loading jQuery your fiddle worked perfectly fine.
So the fix would be to load jQuery before your script.

Popup displaying on refresh

I have a form, with a code to show a popup when I press a create/edit link. Now when I do a page refresh, I get the following popup
I have managed to stop the popup from appearing when Retry is pressed, by handling it on the code behind of my aspx, but when Cancel is pressed, the page blinks (I guess it renders again?) and the popup is shown.
It doesn't go back to the server. It just goes to the javascript function that displays the popup, and shows it.
It should be noted at this point that this popup is just a <div> which can be shown or hidden.The default property of this <div> is hidden.
Please help me solve this issue and also explain why this is happening. I haven't been able to find anything on the internet explaining this issue.
When submitting a form, content may be sent with either POST or GET.
Sending with GET appends values to the address defining what webpage you are on. It could look like this:
www.domain.tld/page?value1=apple&value2=banana
Sending with POST sends the value in a hidden field that the server receives.
Clicking "Retry" will load the website with the information currently held within the POST field. Clicking cancel should display the address you are heading to without the POST content.
I hope this answers your question. If not, is there any way for you to show the piece of code that handles the POST data?
The browser saves the data in the form when you submit it, and when you refresh the page, the browser attempts to send this data again. The popup is a warning from the browser that this is about to happen, which is important since the form could be on a shopping site, so resending the data would result in accidentally buying the same things multiple times.
To fix this, you can redirect to another page once the form has been submitted, or you can add code to reset the form so the data won't be sent again.
We should follow a best practice to solve this problem. Better have a look at this. When you press the cancel button, it simply load the previous page and values will be persisted.
My understanding so far is that when you press the cancel button, the values for the page is taken from the browser's cache. I cleared the cache to test this theory. The cache isn't just storing the values of the page but also the last server response received. In my case, the last server response was to show the the popup by calling my javascript function, along with the required values, which is what it did.
Now my work around to it was to make the closing button as a server command as well, so that the final response would be to hide the popup.
Please do let me know if there is something wrong in this explanation.

I'm having problems resubmitting data from form in JavaScript

I have the following scenario:
The user fills an HTML form
The user presses the submit button
Something unexpectedly bad happens
The server retrieves an error page with a retry button. This page does not have the original form anymore. When the user clicks the retry button I want the last post data to be resubmitted
I don't even know if it's possible. I'm trying this on the retry button:
window.location.reload(true);
The result is:
On firefox it works perfectly. It reposts the data and shows the resulting HTML to the user.
On Google Chrome it does not repost the data, it kind of uses a GET on the same URL, I'll take a look at Fiddler to make sure
IE 9 reposts the data but shows a blank screen in return. If I reload it will show the proper page.
I'd like every of them to work as Firefox. I guess the problem is in the absense of the original form in this error page.
Is there anything I can do in JavaScript to make them all have the proper behavior?
You should include the post data in the retry form. Wrap the post data in a <form> and resubmit the form.
Form:
<form id="retryform" name="retryform" action="postfile.html" method="post">
<!-- post data -->
</form>
JS:
document.getElementById('retryform').submit();
// or
document.forms["retryform"].submit();
// or
document.retryform.submit();

JavaScript alert "the page says"

I have a form and I am using JavaScript to validate the form, so if we leave a field blank it will alert "Please Enter your Name".
If I go to the link directly, it works perfectly. But I am using an iFrame to embed it into other sites. When I embed it, and click Submit with an empty field it says:
The page at http://www.domain.com says: Please Enter your name
This is a security measure to prevent a framed site from displaying a message that appears to come from the parent site.
You cannot avoid it without avoiding the use of alert().
You could display the information to the user by modifying the DOM to display it as part of the page instead.

Categories