Chrome Autofill wrong fields when saved password - javascript

I have 2 form in my website.
If I saved the email and password and other form have input password,
It will autofill email on last one input box (type=text)
I try to add autocomplete=off autocomplete=contact_no name=contact_no
but It doesn't work.
<form>
login form
<br>
<label> email<input type="text" /> </label>
<label> password <input type="password"/> </label>
<button type="submit"> submit</button>
</form>
<form>
member update form
<br>
<label> readonly email <input type="text"readonly value="abc#google.com"/> </label>
<label> contact_no <input type="text" name="contact_no" autocomplete="off"/> </label>
<label> password <input type="password" name="password"/> </label>
<button type="submit"> submit</button>
</form>
CodePen
https://upload.cc/i1/2019/05/26/jbBSxa.gif
https://upload.cc/i1/2019/05/26/lQmksB.png

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
In most modern browsers, setting autocomplete to "off" will not prevent a password manager >from asking the user if they would like to save username and password information, or from >automatically filling in those values in a site's login form.
To help chrome understand the form input better, you can try using autocomplete="tel" instead for the contact no

Related

Clear HTML login form with username textfield filled with cookie

Good morning,
I'm doing a basic website for the university.
I should provide a login form where the user can insert username and password... If those are correct a cookie is saved with username value; thanks to this cookie, when the user closes the session and opens again the browser to login, the username field is already there (I did this with a php script inside the form).
The only problem is that the button that should clear both the textfields in the form doesn't work.
<form name="f" action="controlAndErrorLogin.php" method="POST">
<p>Username: <input type="text" name="username" value=<?php if(isset($_COOKIE["username"])){echo "\"".$_COOKIE["username"]."\"";}else{echo "\"\"";}?>>
</p>
<p>Password: <input type="password" name="password" value=""></p>
<p>
<input type="submit" value="OK">
<input type="reset" value="PULISCI" onclick="document.getElementById('username').value = '';">
</p>
</form>
What is the problem?
Thanks
First of all, your input field is missing the id that you are trying to select it by.
Second, a reset button resets form fields to the default value they had specified in the initial HTML. You specified the user name in there, not an empty value - so that’s what the field will get reset to.
Third, .value = '' only resets the current value of the element, but not the default value. You need to set the actual defaultValue property, to achieve that.
<form name="f" action="controlAndErrorLogin.php" method="POST">
<p>Username: <input type="text" id="username" name="username" value="foo"></p>
<p>Password: <input type="password" name="password" value=""></p>
<p>
<input type="submit" value="OK">
<input type="reset" value="PULISCI"
onclick="document.getElementById('username').defaultValue = '';">
</p>
</form>
try to add attribute id="username" in the input tag with name="username"

How to add a password to the storage in Firefox with a script?

I have a task to add a password, username and password to the Saved Passwords in Firefox, so that the new account can log in and work on the local site, without additional password entries.
What kind of script is needed, import is inappropriate here, I can copy local.json and key.bd with the same success
You can solve this problem by creating a form tag:
<form>
</form>
You can then create password and email fields:
<form>
<input type="email">
<input type="password">
</form>
And if you add a button with the type "submit":
<form>
<input type="email">
<input type="password">
<button type="submit">
</form>
When the user submits the form (by clicking the type="submit" button) they will be asked if they want to save their email and password in the browser. If they say yes, it will be saved.

How to calculate price when optional checkbox is clicked(using paypal payment form) [duplicate]

This question already has an answer here:
How to change the textbox value from checkbox
(1 answer)
Closed 6 years ago.
I have built an order form in which the user would enter in a company name, last name, email and an address and an optional checkbox for shipping priced at $19.99. I downloaded the paypal payment form module for my dreamweaver cs5 program which converts the form into a paypal form.
The nice thing about this program is that it automatically creates a mysql database with all the input fields when a person clicks the "pay now" button It also generates the files automatically in a folder called "PPPaymentForm" which i then upload in the root of my site and gives me a backend as well so i can monitor all the payment transactions.
So back to my original issue, i need some way so that if a person decides to click the checkbox which is set at $19.99, that it will automatically add to the price which is set in an hidden input named "hdwppamount" where the value is set to $175.00. So therefor if the shipping option is clicked, the person would click the "Pay Now" button and would be redirected to the paypal payment page, with the new calculated price at $194.99.
I am not proficient with javascript or php, and tried many functions myself but nothing worked. Could someone help me with this please?
Thank You
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="firstname" required>
<input placeholder="Last Name" type="text" name="lastname" required>
<input placeholder="Email" type="email" name="email" required>
<input placeholder="Address" type="text" name="address" required>
<input type="checkbox" id="shipping" name='shipping' />$optional Shipping($19.99)
<button name="submit" type="submit">Pay Now</button>
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic 175 Plan">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="">
<input type="hidden" name="hdwemail" id="hdwemail" value="email+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
</form>
First, we detect when the shipping checkbox is changed, then we check to see if it is in a checked state. If it is in a checked state, we add the shipping cost to the hidden text box. We also need to reset the value if the user changes their mind about shipping so you need a basic IF ELSE condition on it.
Try this:
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
JSFiddle: https://jsfiddle.net/rdawkins/8qrm3mf1/14/

Simulate a submit button click via JavaScript

Is it possible to Submit a form with JAVASCRIPT? if yes please help me...
I have a form with input fileds in it. So I want javascript to count if all fields are field in and then press on the submit button.
The submit button "Save" will be hidden from visitors eyes.
<form id="my form" action="">
<input type="text" name="fname" id="fname" value=""/>
<input type="text" name="sname" id="sname" value=""/>
<input type="text" name="email" id="email" value=""/>
<button type="submit" name="submitAccount" id="submitAccount">save</button>
</form>
here is a opened FIDDLE
Thanks to all for any help!
you can submit form via JavaScript even without submit button, form element has method .submit() which submits whole form.
var myForm = document.getElementById('myform');
myForm.submit();
Before submiting form you can get values from every field in form and make you own validation.
P.S. don't use values for id attribute with whitespace, you should rename it to 'myform' or 'myForm'.
There is a required attribute
<form id="myForm" action="">
<input type="text" name="fname" id="fname" value="" required/>
<input type="text" name="sname" id="sname" value="" required/>
<input type="text" name="email" id="email" value="" required/>
<button type="button" name="submitAccount" id="submitAccount" onclick="checkForm();">save</button>
</form>
Form gets submitted only if the required fields are filled

Hiding and showing Divs with form validation

Upon submit I am trying to have "quiz" hide and have "thanks" be shown. All was working correct until I added a JavaScript form validation code, and now it just reloads the first div "welcome" I thought adding "#thanks" to the action upon submit would solve the issue, but it did not. Then trying to add an "if true" statement to my form validation ended up breaking the form validation. I am using jquery.validate to validate my form as suggested. With the current code it skips the validation and just shows "thanks" If anyone has any suggestions it would be greatly appreciated.
<div id="quiz">
<form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
<label for="cname">Name</label>
<input id="cname" name="name" size="20" class="required" minlength="2" />
</p>
<p>
<label for="ccompany">Company Title</label>
<input id="ccompany" name="company" size="20" class="required company" minlength="2" />
</p>
<p>
<label for="cnumber">Phone Number</label>
<input id="cnumber" name="number" size="20" class="required number" />
</p>
<p>
<label for="cemail">Email</label>
<input id="cemail" name="email" size="20" class="required email" />
<p></p>
<input class="submit" type="submit" value="Submit" align="center"/>
</form>
</div>
<div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>
<script>
$("#begin").click(function(){
$("#quiz").show();
$("#welcome").hide();
});
function showHide(){
$("#thanks").show();
$("#quiz").hide();
};
</script>
All I can say is that you are doing it wrong.... While the form validation that you are doing can work there are a lot of good form validation jquery plugins that would both simplify your life and add a much richer user experience. jquery.validate is probably the most widely used library and would be well worth using.

Categories