I am trying to create an autofilling form for shippment details such as name, surname, street, postal code and so on. I want the form the autofil depending on the chosen "profile" - a data which was already filled in previously to avoid re-entering data if user uses the website many times.
When filling in the form clicking on submit and afterwards going back to the order page, the autofill is not possible.
tried:
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
https://www.w3.org/TR/html52/sec-forms.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Raw code, without any changes:
<form class="f-form f-form--basket checkout">
<div class="f-form__col">
<div class="f-field f-field--text">
<label class="f-field__label" >
First name
</label>
<input type="text" class="f-field__control" name="firstName" placeholder="First name*" required>
</div>
</div>
<div class="f-form__col">
<div class="f-field f-field--text">
<label class="f-field__label">
Last name
</label>
<input type="text" class="f-field__control" name="lastName" placeholder="Last name*" required>
</div>
</div>
<button class="c-btn">
Pay!
</button>
</form>
You said your goal was to "autofill" the empty form with "data which was already filled in previously". That's two separate ideas that seem to be getting crossed here:
The documentation pages you link to reference a browser feature called "Autofill", which is the idea that an individual user in their own workstation's browser can fill in information about themselves (demographic information like name and email, and shipping address information), and then the browser can help them fill in forms properly.
This sort of function would work well for you, if the fields you're trying to fill in are standard demographics fields. But in order for the users to take advantage of it, it's up to to the user to update their browser's preferences to set their own "Autofill profile" (you can't do that as the web developer from HTML/JS.
The second part of what you said referenced data "they already filled in"; presumably you mean information they filled in on your site, the first time through? In order to get that idea to work, you would need to save the information the user entered, somehow. You could either save the data client-side in a cookie or other HTML5 local storage option, and use Javascript to re-fill in those values when the user visits the page again, or if the user has an account with you and is logged in, you can save that data on the back-end and generate the HTML with the default values already filled-in, or build some other API endpoint to fetch their default values via Javascript/AJAX from the front-end.
Related
My Client wants a login form on his website (domain1.com) that can send users to their ShareFile site (domain2.com) and log them in automatically.
They have this on their old website but when I look at the code for the form it is pretty simple and doesn't transfer the data and submit the login info when I try it on the new site. Here is what they had as code:
<div class="portal_form">
<form method="post" action="https://domain2.com" target="_blank">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input id="email" type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<button class="elementor-button">SUBMIT</button><br/>
<p class="forgot-password"><u>Forgot Your password?</u> </p>
</form>
</div>
I told them that I thought the idea behind this wasn't very secure and that we should just link via buttons and/or navigation items to the login page on domain2.com.
They don't want to just link to the other website and have the user login there, they want the user to login on their domain1.com and just show up on domain2.com already logged in.
Can anyone help me do this?
Basically it is:
User fills out the Username and Password in a form on domain1.com and clicks Sumbit
That data is transferred to the Username and Password input boxes on domain2.com and the Submit button is automatically activated.
User is automatically logged in to domain2.com.
I am sure this probably can't be done purely via CSS and HTML and needs some JavaScript. I would be happy if you could just point me in the right direction and I can go from there.
What you want to achieve is called SSO (Single Sign On) and there are various way which you can implement this.
[Also your present solution is wrong and not secure | not proper way.]
You can refer to multiple ways to implement this with the combination of authentication protocols as well.
You have not mentioned the inside of architecture (if it is centralized DB OR two different DB)
Assuming it as single DB or even if it is 2 different DB then also you will have to match the user information.
So here you can implement the Hook/API calls in between sharing the data on two domain.
What you can do is:
Domain1: Check if user is valid or not.
If user is valid then create the session for that user on Domain1
At the same time call the API/Hook which you created on Domain2. This is to send the user information to Domain2 and check if its valid or not.
If API/Hook returns the validation true then create the same user session on Domain2 with gathered information.
In between you can implement some authentication protocol as well as per your need or project architecture.
Do refer this below doc for more information about Single-Sign-On (SSO):
Single-Sign-On-Wikipedia
Lately, we have added a custom React components library to our app (company standart). It has a limitation - doesn't allow to set name or autocomplete attribute. So, some of our inputs lost name attribute after an update.
After update our rendered input looks like this:
<div class="search-input">
<div class="sc-bYwzuL dnjiBM">
<input data-test-id="navigation_customer-search-input" placeholder="Search for a customer" rows="1" value="">
</div>
</div>
And Chrome started to autofill it with credit cards info:
Maybe someone is aware of what can cause such behavior?
I was sure that credit cards autofill is only available when correct name or autocomplete attributes are provided (like described here).
Additional details:
Before the library update input had no issue with autocomplete and was rendered like this:
<div class="search-input-container">
<input type="text" name="search" placeholder="Search for a customer" data-test-id="search__search-input__input" value="">
</div>
Also, when I'm deploying exactly the same version to a different environment with a different domain (which I wasn't using for a while) - I don't see an autofill issue.
According to this thread Chrome uses crowdsourcing (when many people entered the first name into the field - Chrome will classify it as a first name) to identify how to autocomplete the field.
However, if your input has the correct name and/or autocomplete attribute - it will work accordingly to that attributes.
After applying this fix and testing I can say, that it was probably the only way to fix the issue.
I'm working on a datalist element to populate same fields with information about a location (Address, state, city, zip code, etc.) I noticed that Chrome can autofill multiple fields with a selection from it's pre-saved addresses that have been entered before, using an entry form one field's datalist. What I'm wondering is if it's possible for me to create options that take advantage of some browser behavior to fill multiple fields myself, or if this will need to be done programmatically. I'll post a little example snippet to try to make it more clear about what I want to do:
<input type='text' name='address' list='address-suggestions' />
<datalist id='address-suggestions'>
<option>123 Example Address Rd., New York City, NY 10001</option>
</datalist>
<input type='text' name='city' />
<input type='text' name='state' />
<input type='text' name='zip-code' />
My goal is to fill in all four fields with the option available in the datalist I'm quite confident I can do it programmatically, but given that I'm seeing Chrome do it natively, I was wondering if there was some functionality I was unaware of / had not been able to find information about elsewhere.
Yes it's possible but not all browsers behave the same.
The MDN Docs should provide some help if your using the autocomplete HTML Attribute. It should allow you better control of what gets autofilled and what doesn't.
I was always confused about what the 'name' attribute did in html forms. From the textbook I read (html and css, design and build webpages by John Duckett), this is what it said about the 'name' attribute.
When users enter information
into a form, the server needs to
know which form control each
piece of data was entered into.
(For example, in a login form, the
server needs to know what has
been entered as the username
and what has been given as the
password.) Therefore, each form
control requires a name attribute.
The value of this attribute
identifies the form control and is
sent along with the information
they enter to the server.
From reading this, I always thought that, say in the database there is a field called "theUsersPasswordField" and a field called "theUsersUsernameField". I thought that, suppose there is a registration form, then the form would be like:
<form action="aURL" method="post">
<p>Please enter what you want your Username to be:</p>
<input type="submit" name="theUsersUsernameField" />
<p>Please enter what you want your Password to be:</p>
<input type="password" name="theUsersPasswordField" />
</form>
and then this way, when the information is sent to the database, it will know which information to put in the 'theUsersPasswordField" and which information to put in the "theUsersUesrnameField". Am I wrong?
What does name="next" mean? I see it often when I look at html forms, for example, here in this Django tutorial I am doing:
<form method="post" action=".">
<p><label for="id_username">Username:</label></p>
<p><label for="id_password">Password:</label></p>
<input type="hidden" name="next" value="/" />
<input type="submit" value="login" />
</form>
In the tutorial I am doing, it says that
The html form contains a submit button and a hidden
field called next. This hidden variable contains a URL that tells the view where to
redirect the user after they have successfully logged in
now, how is 'next' a url? When I run the code, the form does in fact successfully redirect to the main page, but how does it know to redirect to the main page? Why does name='next'?
And how does the server know which information to treat as the username and which information to treat as the password? I though that that is what the 'name' attribute is used for?
The name attribute in a control element like input assigns a name to the control. It has two basic effects: 1) a control needs a name in order to be “successful”, which means that a name=value pair from it will be included into the form data when the form is submitted; and 2) the attribute specifies what will be included as the first part of the name=value pair.
It is entirely up to the server-side form handler what (if anything) it will do with the name=value pairs in the form data. They might have a simple correspondence in some database, but that’s just one possibility. And form handling need not be database-based at all.
The name attribute values have no predefined meaning in HTML. They are just strings selected for use in this context, and they may be descriptive or mnemonic, or they may not.
However, the choice of name attribute values may have side effects. Browsers may give the user a menu of previously entered data so that if you fill e.g. several forms (possibly in different sites) that have a control named email, you might be able to enter your email address just once and then accept whatever the browser suggests as input. This may be seen as a convenience or as a threat to data security. There is proposed set of “standard” names for many purposes in HTML5 CR.
For completeness, it needs to be added that in browser practice and according to HTML5 CR description of name, two names have a special meaning: _charset_ and isindex.
The name next is in no way special, but in this context, it appears to specify the next page to move to. It is defined for a hidden field, so it takes effect independently of user input.
and then this way, when the information is sent to the database, it will know which information to put in the 'theUsersPasswordField" and which information to put in the "theUsersUesrnameField". Am I wrong?
You have to write a script (for example in php) that will put the right values from your form (they are in the $_POST array) into the databse.
in your example $_POST['theUsersUsernameField'] will hold the username
<form method="post" action=".">
<p><label for="id_username">Username:</label></p>
<p><label for="id_password">Password:</label></p>
<input type="hidden" name="next" value="/" />
<input type="submit" value="login" />
</form>
how is 'next' a url?
next is not the url.
the action="." is the url to wich the form redirects.
/ is the value that the script will evaluate to see what it has to do. (Normally you will have to change this into something else like 'check password')
In the $_POST[] array there will be a key $_POST['next'] and the value will be /
I am not familiar with Django but I hope this helps
I've an adhoc component to manage vehicles and if the user wants more information about a vehicle, I want to redirect him to a contact form passing the vehicle's ID as a parameter to the form, in order to get vehicle's name and other info prior to send the mail.
How can I achieve this?
Now I'm using Fox Contact Form, but I can change it if there is a better alternative.
I am not familiar with the capabilities of Fox Contact Form, but we do exactly this on several auto sites using ChronoForms. This is a 2 step process. First you must decide how you are going to package the information on the originating page.
If the more info is a link, then you will need to pass the information to the form as part of the query string. Your links would have to be formed something like this:
http://www.yoursite.com/index.php?option=com_chronoforms&view=form&year=2000&make=Ford&model=Mustang
You can add as many parameters as you would like to pass to the form.
If the more info can be turned in to a form, then you can add hidden fields to the form that include all of the data you want to pass to the contact form.
The second part of the task is to add a bit of code to the fields in the contact form so that the items auto populate in to the form. For example:
<input type="text" name="year" value="<?php JRequest::getVar('year',''); ?>">
<input type="text" name="make" value="<?php JRequest::getVar('make',''); ?>">
<input type="text" name="model" value="<?php JRequest::getVar('model',''); ?>">
This would give you input fields that the user can then edit, but you could easily make the fields read-only or hidden fields instead of text boxes.