Chrome rises autofill input event after clicking the page only - javascript

fill the form, save values in Chrome for Mac, then reload page.
alert will show only after page is clicked,
why is that? How can I get input events fired right after
page load, not after click? Thank you
link to reproduce the issue here,
this is source
Code of the example below:
<form action="https://test.de" method="POST" name="loginform">
<input oninput="alert('text')" type="text" id="name" placeholder="Username" name="username" />
<input oninput="alert('pass')" type="password" id="password" placeholder="Password" name="password" />
<input type="submit" />
</form>
<div class="log"></div>
<script>document.querySelector("input").focus();</script>

Related

Redirect to the page where user came from

I have a custom page template with a form. And this form displayed in many pages using shortcode. When the user click the submit button, the user will redirect to a "Thank you" page. This thank you page is a static (created using the WP page editor) with a href. Now, when the user click that a href (found in the thank you page, he/she will redirect to the page url where the user submit the form but in the specific portion of the page where the user came from. But I don't know how to do this. Can anyone help me with this?
<form method="POST">
<span class="icon-pp-green-ribbon"></span>
<fieldset>
<div class="form-group">
<label for="customer_fname"><span class="icons-asterisk"></span> Your name:</label>
<input type="text" name="name_first" placeholder="" required/>
</div>
<div class="form-group">
<label for="customer_tsname"><span class="icons-asterisk"></span> Your surname:</label>
<input type="text" name="name_last" placeholder="" required/>
</div>
<div class="form-group">
<label for="email">Your e-mail:</label>
<input type="email" name="email" placeholder="#"/>
</div>
<div class="form-group">
<label for="phone"><span class="icons-asterisk"></span> Phone number:</label>
<input type="text" name="phone" pattern ="^09\d{9}$" onkeypress="return isNumberKey(event)" size="11" placeholder="09" required/>
</div>
<div style="margin-top: 1.50em;">
<input type="checkbox" id="utm_checked" checked style=" float: left; transform: scale(1.2);"/>
<label for="utm_checked">I want to be occasionally notified</label>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send"/>
</div>
</div>
</form>
Try this button maybe as told here:
<input action="action" type="button" value="Back" onclick="window.history.go(-1); return false;" />
If your previous page URL does not have page section info like www.yoursite.com/somePage#someSection, you can push custom URL to the history stack before leaving that page, so that whenever your go back, you not only go back to the page but also the specific portion that you came from. You can push custom URL to the history stack maintained by the browser as described here
Try this code to utilize page visit history maintained by the browser:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>

Why does the bootstrap form validation happen after the submit button is pressed?

I have a form, built with bootstrap, and i have found that the form validation does not run before the submit button's onclick event, which is kind of useless.
Please see this fiddle for examples - press the register buttons on the 2 forms to see what i mean.
http://jsfiddle.net/5tr34k/ax13nLof/
I would like a way to prevent the onclick event happening until the form validation has passed successfully, then run the onclick javascript
<h3>Example</h3>
<form action="" method="post" name="registration_form1">
<input type="text" class="form-control" placeholder="Username" required name="username" id="username">
<input type="email" class="form-control" placeholder="Email" required="true" name="email" id="email">
<input type="password" class="form-control" placeholder="Password" required name="password" id="password">
<input type="password" class="form-control" placeholder="Confirm Password" required name="confirmpwd" id="confirmpwd">
<button id="myButton2" onclick="alert('i happen before validation');" type="submit" class="btn btn-default" >Register</button>
</form>
In the above code, the javascript alert runs before the form is validated. Can this be prevented or changed so that the javascript runs after the form validation?
You need to use the submit event of the form, not the click event of the button
$('#form').on('submit', function (e) {
//your awesome code here
alert('I HAPPEN BEFORE FORM VALIDATION');
})
Demo: Fiddle

Login form autofill, in an iframe, in the android browser does not work

I'm working on a web site that runs in a single document (no real page loads after the first, its all ajax) that you must log in to view. The front page's log in form autofills exactly as you would expect.
The problem is when I load the login form in an iframe. On most browsers it autofills with the same info as the front page and works perfectly. But in the android browser it does not autofill the form at all.
I guess my question is, is there a way to make it function properly in the android browser without just autofilling it server side in the html?
Heres the form's html:
<form method="POST" id="login_form" class="disable_on_submit">
<input type="hidden" name="action" value="login" />
<div class="row first">
<label for="username">Email Address:</label>
<input type="email" name="username" id="username" placeholder="Email Address..." />
</div>
<div class="row">
<label for="password">Password:</label>
<input type="password" name="password" id="password" placeholder="Password..." />
</div>
<input type="submit" name="submit" id="submit" class="awesome" value="Login" />
</form>
So, I couldn't find a direct fix to this issue, I however did come up with a bit of a hack.
First you add a copy of your login form to your actual document, not the iframe:
this.fake_form = $('<form method="POST" id="login_form" autocomplete="on"><input type="email" name="username" id="username" /><input type="password" name="password" id="password" /></form>');
$(document.body).append(this.fake_form);
this.fake_form.hide();
Then you poll your fake form for auto filled data. Being that its hidden, you know the user didn't enter anything.
function check_fake_form()
{
var real_form = this.iframe.contents().find('body #whiteboard');
var real_u = real_form.find('#username');
var real_p = real_form.find('#password');
//if the real form has any values, we're done
if (real_u.val().trim() != '' || real_p.val().trim()) {
return;
}
var fake_u = this.fake_form.find('#username').val().trim();
var fake_p = this.fake_form.find('#password').val().trim();
//if the fake form has values, put them in the real form and quit
if (fake_u != '' || fake_p != '') {
real_u.val(fake_u);
real_p.val(fake_p);
return;
}
//check again in a short time
setTimeout(check_fake_form, 50);
}
This appears to work flawlessly in the version of android that wasn't working, and it does not interfere with browsers that work on their own.

Remember Password with AngularJS and ng-submit

How do I get the browser to ask the user to remember the password when using ng-submit in an AngularJS single page application.
My Form:
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
<input type="text" required id="username" name="username" ng-model="username" autocomplete="on" placeholder="Username" value="">
<input type="password" required id="password" name="password" ng-model="password" autocomplete="on" placeholder="Password" value="">
<button type="submit" class="btn">Submit</button>
</form>
Any Ideas?
UPDATE
I just added the action to get the browser to recognise the form and trick it into remembering the password. (which obviously didn't work.) The form works fine without the action. The onsubmit="return false;" prevents the execution of the action. Only the ng-submit is doing anything.
Your code is ok, but you need to add the name attributes to your inputfields, such as:
<input type="text" name="username" ...>
and
<input type="password" name="password" ...>
The problem is the dynamically generated login form. After putting the form into the index.html it worked as expected. I guess this is a security issue.
The problem that then occurred was that the ngModels didn't get updated on autofill. After some searching I found the solution to that problem here. In AngularJS 1.2+ this is supposed to be fixed.
Your form HTML is a bit confusing.
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
When the form is submitted do you want it to go to /#/dashboard/login or do ng-submit="login()" ? At the moment, the ng-submit is being ignored in favour of the form action. If you want it to go to /#/dashboard/login as a new page, then just remove the ng-submit and onsubmit attributes and it will work as normal.
If you want it to do ng-submit="login()", then remove the action and onsubmit attributes. Angular automatically prevents form submission when a form with ng-submit does not have an action attribute too. Doing it this way will stop the browser remember password prompt as the form isn't actually submitted anywhere. I guess this is an area where browsers have yet to catch up to the era of the single page application, there's no direct fix for it that I'm aware of.
A workaround would be to have a separate hidden form in the HTML, set the username/password there to the same as the user enters in main form, and then submit that hidden form to an iframe at the same time as ng-submit is called - have a look at How can I get browser to prompt to save password? for ideas about how to do it.
I didn't have to do anything special. But I noticed that while MS Edge and Firefox worked well and offered to remember credentials Chrome didn't.
So simply by providing name attribute to the login form and to username and password it seemed to work fine in Chrome. Autocomplete is on as well. Example:
<form method="post" class="form-horizontal well" ng-submit="login()">
<div class="form-group">
<label class="col-sm-4 control-label">Email Address</label>
<div class="col-sm-8">
<input name="username" ng-model="email" type="email" class="form-control" placeholder="user#example.com" autofocus="autofocus" autocomplete="on" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input name="password" ng-model="password" type="password" autocomplete="on" class="form-control" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Log on</button>
</div>
</div>
</form>
PS: I'm using Chrome Version 45.0.2454.93 m
The culprit is "return false;" on onsubmit. Remove that, and you're good to go. ng-submit takes care of the rest, such as not actually submitting the form when you hit enter in a field or click the submit button.

Post data in two forms, The first form doesn't send any data until the second one is filled out

Basically I have two forms. I want to have a user upon registration fill out the first lot of information. Press next (submit), then fill out the second lot of information. Once they press register, submit both sets of POST information.
What I have is this - two sections with two different forms (there's a reason why these are split into two forms - part of the look of the site):
<section class="first">
<header>
<h1>Signup 1/2</h1>
</header>
<form id="firstForm">
<label>First Name</label>
<input type="text" class="input-text" value="" name="firstName" required />
<label>Surname</label>
<input type="text" class="input-text" value="" name="Surname" required />
<label>Username</label>
<input type="text" class="input-text" value="" name="Username" required />
<input type="submit" name="firstSubmit" value="next"/>
</form>
</section>
<section class="second">
<header>
<h1>Signup 2/2</h1>
</header>
<form name="secondForm" class="clearfix">
<label>Your Email</label>
<input type="email" class="input-text" value="" name="email" required />
<label>Password</label>
<input type="text" class="input-text" value="" name="password" required />
<input type="submit" name="secondSubmit" value="Register" />
</form>
</section>
So the second section is hidden until the user clicks the next button (submit). I have javascript stopping it from submitting, and hiding the first section, and making the second one appear:
<script type="text/javascript">
$("#firstForm").bind("submit", nextForm);
function nextForm() {
$('.first').css("display", "none");
$('.second').css("display", "block");
return false;
}
This works.
My issue is then getting the secondForm to submit, but POST both the first and second's information, as if with the one submit button, I was submitting both. Is this possible? And if so, how?
To use a GET method I'd go:
$("#secondForm").bind("submit", submitForm);
function submitForm() {
document.getElementById("firstForm").submit();
document.getElementById("secondForm").submit();
}
But I don't want to do that, as GET = a bad idea for sensitive info.
I would use one form, but wrap the two sets of inputs in divs. Just hide the first div and show the second on the first button click (which you wouldn't keep as a submit button), then submit the entire form on the second button click.

Categories