I have a very basic form where I ask user's name, mobile, email. I have enabled autocomplete provision in these fields using the following code:
<label for="frmNameA">Name</label>
<input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">
Here is the fiddle. Currently, the user has to focus on these elements and then it displays the suggestions. Is there any way by which we can prefill this data once the form is loaded? We want to prefill the 1st suggestion that comes in the autocomplete and not some hard coded value.
Also, I saw websites like facebook, twitter etc. using only autocomplete and not prefilling the data - is there any specific reason to not prefill the things?
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
<form action="/action_page.php" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
You can store user values into the localStorage at completion, then load this values on page load.
This way, no need to hardcode datas, neither store server side.
// Store
localStorage.setItem("userconfig",mail.value)
// Fill data
onload = (function(){
mail.value = localStorage.getItem("userconfig")
})
Related
I added an autofill in my text field but it's not working. Autocomplete attribute is undefined. I don't want to use form action. Also, I added easy-autocomplete.min.css, but still, autocomplete is not working.
<input type ="text" id="number" name ="number" placeholder="Please Enter Registered Number" autocomplete="on" class="form-control" value="" onkeypress="return validateNumeric(event)"><br>
You are right on track. You can use the autocomplete feature of HTML without nesting the input element inside a form.
You just need to change autocomplete="off" to autocomplete="tel" and the browser will start to show autocomplete.
"tel" notifies the browser that it is a telephone field and the browser will suggest from a list of saved telephone numbers.
For a list of supported values for autocomplete see this MDN Article on Autocomplete.
<input type ="text" id="number" name ="number" placeholder="Please Enter Registered Number" autocomplete="tel" class="form-control" value="" onkeypress="return validateNumeric(event)">
Working Fiddle here.
I want to create a form about the job application page, but i want to do some validation about if the user already fill up all the element in the form, only the submit button can click, and the submit button will link to another html page to show "your application is successful received". How can i do, thank you so much. I so a part of my code
<label for="Minimum Salary (MYR)"><img src="Web Page Image (Koh Xin Hao)/Money.png"/> Minimum Salary (MYR)</label>
<input type="text" id="Minimum Salary (MYR)" name="Minimum Salary (MYR)" value="RM " maxlength="8" required="required">
<label for="Nationality"><img src="Web Page Image (Koh Xin Hao)/Card Issuing Country.png"> Nationality</label>
<input type="text" id="Nationality" name="Nationality" placeholder="Malaysia" required="required">
<div><p>The application process will take up to 2 days. If your application is approved by the company, we will inform you via email or telephone call. Thanks for you application ^-^</p></div>
<input type="submit" required="required" class="btn" onclick="location.href='Payment Successful.html'"/>
<button type="submit" class="btn" onclick="location.href='Payment Successful.html'">Submit</button>
Seen the form is not fill up anything but the submit button also can click. I already put required="required" inside my code but the validation is not working.
If i m not wrong so you want to ask that how to validate all fields and submit form to a new page.
If yes so
<input type="?" name="?" required />
add required attribute to require that feild
And give a action attribute to your form where u want to submit that form
Example <form action="your page" type="post">
Hope it helps you
Let me know if i misjudge your problem
You need to use Javascript to check if the fields have been filled in and if so disable the button.
You also need to change the required="required" to just required as shown here https://www.w3schools.com/tags/att_input_required.asp
You also need to wrap it all in a form tag and use the action field to supply the next page when it is submitted as per https://www.w3schools.com/tags/tag_form.asp
You may need to do more with validation in Javascript this is basicly only disabling the other button if the fields aren't blank. You can see more about JS validation here https://www.w3schools.com/js/js_validation.asp
function validateForm(){
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
if(input1==""){
console.log("input1 is blank!");
}else if(input2==""){
console.log("input2 is blank!");
}else{
console.log("inputs are not blank");
document.getElementById("button").disabled = true;
}
}
<form action="form_submitted_page" method="POST">
<label for="input1">input1</label>
<input type="text" id="input1" name="input1" required onchange="validateForm()">
<label for="input2">input2</label>
<input type="text" id="input2" name="input2" required onchange="validateForm()">
<input type="submit" value="Submit">
</form>
<button id="button" onclick="document.location.href='google.com'">Google (to be disabled)</button>
In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">
This has been bothering me for a few weeks now.
I have a login form that used to require username + password:
<form role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="username">Username</label>
<input id="username" name="username" type="text" placeholder="ex: AD\jdoe" required="required" autofocus="autofocus" class="form-control"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
I changed it to use the user's email instead due to reasons:
<form id="form" role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ex: name#website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
Much to my surprise, Chrome was still auto-filling out the email field with the previously saved credentials. I tried a variety of permutations on the email field's attributes to no avail (also tried renaming the password field as well just in case, and that too still gets auto-filled). Firefox has the same behavior as well.
I also tried renaming the form itself, and adding a second form just to test wherein the browser filled in both sets of inputs.
Finally, exasperated, I came up with this workaround:
<form id="form" role="form" method="post" action="/login" class="form-signin">
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ex: name#website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
<!-- Workaround for inability to clear the autocomplete functionality of a previously named field-->
<input id="username" type="text" name="username" class="hidden"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" required="required" class="form-control"/>
</div>
</form>
The downside is that it won't save the user's email if they have previously saved credentials, and it continues to auto-fill the password (and the username too).
Of course, I can add some error to trigger to validate the field is an email and whatnot, but I'm more curious as to why this behavior is happening. It seems that short of removing the saved credentials in my own browser, I have no way to reset the auto-complete data for my users to prevent it from erroneously filling in the username into the email field.
What's kind of funny as well, since I set the new input to be of type email, it triggers the validation of the field and throws the browser's validation error saying the username is not a valid email (as expected).
I referenced this Stack Overflow question, which says:
It does not care what the field is called - just assumes the field before password is going to be your username.
This was what I was guessing to be the problem. Because your field is named password, it assumes that whatever comes before it is also related to login credentials (which is 100% time how it goes).
If you never want autocomplete on your login, that's the easier solution: simply disable autocomplete on the fields by using autocomplete="off" as an attribute on the fields. However, if you want to have the fields use autocomplete, just not the old data, that will prove to be a bit more difficult, and I don't know the full solution to this. The above article only makes mention of fully disabling autocomplete.
What might fix this (allowing autocomplete but not the old data) would be to use different input field names. Granted, I haven't tested this, but if you call your password field password2 and your username field username2 or something similar, and do not have a password input field, Chrome might detect it as being a different set of fields, and make its own, new association. Again though, I can't promise that this will work for you.
Not really a "fix" per se since it doesn't really handle it transparently as I was hoping, but, I opted to simply remove the workaround field and let my users deal with having their browser through a validation error when submitting the form.
Since the new field has type="email", when they try to submit the form it will validate the previously saved username as an invalid email and tell the user of such. The user will then change it to their email and hit submit again, at which point the browser will prompt them with the save login credentials message and all will be happy hence forth.
Not as clean as I'd have liked it, but it works and it'll be a one-time thing for users who had previously saved their username.
When someone do not fill all fields in my formular the site is showing error and it is refreshing so that someone must fill it again.
How to make the site remember correctly filled fields?
When the form is submitted, then on page refresh the $_POST data is still intact. So what you can do is something like this:
<input type="text" name="field_name" value="<?php echo (isset($_POST['field_name']) ? $_POST['field_name'] : ''); ?>">
What it does is that if the $_POST data for the field field_name is set, then echo its value.
Use of autocomplete can preserve your previous inputs.
Autocomplete ON will preserve the value and OFF will prevent the input box from remembering. In sample code, email have off as autocomplete.
<input autocomplete="on|off">
OR
<form action="/action" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>