Force browser to remember several form values - javascript

I have the following form:
<form method="post" autocomplete="on">
<input type="text" placeholder="Site" name="Site" autocomplete="on" />
<input type="text" placeholder="User" name="User" id="second" autocomplete="on" />
<input type="password" placeholder="Pass" name="Pass" id="fourth" autocomplete="on" />
<input type="text" placeholder="Station" name="Station" id="third" autocomplete="on" />
<button>login</button>
</form>
The browser remembers user and password, but not site and station.
Is there a way to force the browser to remember ALL values?

Related

Detecting display: inline-block with Javascript vanilla

I have a multilanguage registration page. All the of it is on one HTML document, and each language is in its own div, with display:none; or display:visible depending on the language selected.
All of the forms are identical, ie. <input type="email" class="email"> is the same on all forms (with different placeholders etc.).
I would like to know how I could use a conditional statement to see which div is visible, so I could take out the appropriate class information via index.
For example, the user filled out the English registration page, I know I need to use getElementsByClassName(".email")[1].value. (index 1).
Or is there a way to detect which element in the array has actual content/value (as the specific class array will be empty, except for 1 entry).
HTML
<div class="lng" id="sl">
<div class="registerTitle">
Slo - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="Janez"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Novak"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />
<span class="radioS">Spol: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Moski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Zenski</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Ostalo</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="moj#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>
<div class="lng" id="en">
<div class="registerTitle">
Eng - Register
</div>
<div class="registerForm">
<form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
<input type="text" name="fname" required maxlength="50" minlength="1" placeholder="John"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'John'" /><br />
<input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Doe"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Doe'" /><br />
<span class="radioS">Gender: </span><br /><br />
<div class="radioC"><label><input type="radio" name="spol" value="M">Male</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="Z">Female</label></div><br />
<div class="radioC"><label><input type="radio" name="spol" value="O">Other</label></div><br /><br />
<input type="email" name="email" autofocus="autofocus" required placeholder="my#email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'my#email.com'" />
<br />
<input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
</div>
</div>
Have a look at - how can I disable everything inside a form using javascript/jquery?
Disabling other form inputs might be an option, so when you go to submit, the form that isn't disabled submits.
Here's a way to detect if an array of inputs has a value and then log to the console. I know it's general, but I'm having a hard time understanding exactly what you need in your case:
const emailInputs = Array.from(document.querySelectorAll('.email'));
const form = document.querySelector('form');
form.addEventListener('change', () => {
const hasValue = emailInputs.filter((input) => input.value);
console.log('these inputs are active...\n');
hasValue.forEach(val => console.log(val));
});
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="en">English </label>
<input type="email" name="en" id="email" class="email">
</div>
<div class="form-example">
<label for="fr">French </label>
<input type="email" name="fr" id="email2" class="email">
</div>
<div class="form-example">
<label for="es">Spanish </label>
<input type="email" name="es" id="email3" class="email">
</div>
<div class="form-example">
<label for="it">Italian </label>
<input type="email" name="it" id="email4" class="email">
</div>
</form>
Here's a JSFiddle if you want to play with it outside of this setting.

Required Fields and Redirects in JavaScript

I am trying to make it so that when the user clicks the Submit button, they are redirected to another page. Addittionally, if they try submitting without entering their first name, last name, or email, it will return an error saying "This is a required field". For some reason, neither of this are working. Nothing happens when submit is clicked. I am sure it is something simple but I have never worked with these scripts before so I don't know what I am looking for.
Here is the code:
<form method="post" enctype="multipart/form-data">
<button><input type="submit" value="Submit" onclick="submit();"/></button><br>
<label for="fname">First Name:</label>
<input type="text" required/><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function submit() {
window.location= "http://stackoverflow.com"
}
</script>
Any help would be greatly appreciated!
Try this:
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
</script>
Quick way as it looks like your not using ajax.
Remove the onclick from the submit button (require tag is being ignored because of this) along with the JavaScript and return a 302 redirect with the url from the server if it's successful.

Add current page URL in input in AMP page

I just want to ask that how do I add current URL in an input of form, so I can save it where I want to save.
I have tried simple Javascript, succeed but amp page become invalid.
My code is as follows
<form method="GET" class="p2" action="SUBMIT URL" target="_top">
<input type="hidden" value="" name="redirect" />
<div class="block-width2">
<div class="col-md-6"><p><input name="name" placeholder="Full Name *" type="text" required /></p></div>
<div class="col-md-6">
<p data-aos="fade-left" class="aos-init aos-animate"><input name="Email" placeholder="E-mail ID *" type="email" required /></p>
</div>
</div>
<div class="block-width2">
<div class="col-md-5"><p><input name="Mobile" placeholder="Contact No.*" type="text" required /></p></div>
<div class="col-md-7"><p><input name="city" placeholder="City*" required type="text"></p></div>
</div>
<div class="block-width2">
<div class="col-md-12"><p><input name="comments" placeholder="Comments*" required type="text" /></p></div>
</div>
<input type="hidden" name="vendor" value="VMware" />
<input type="hidden" name="course" value="VMware Training" />
<input type="hidden" name="url" id="url" value="" /> //Here I want page URL.
<div class="block-width2">
<div class="col-md-12"><p><button class="button-set" type="submit">Submit Now </button></p></div>
</div>
</form>
<script>document.getElementById("url").value = location.href;</script> // working with invalid AMP

How to disable a button at an empty text/number field

I wish to disable a button in HTML on the condition that required fields are empty. The code given below is of the form in which the button is there:
<form>
Name*: <input type="text" size="20" name="name" /> <br /><br /> Surname: <input type="text" size="20" name="sur_name" /> <br />
<br /><br /> Mobile number: <input type="tel" size="15" name="mob" /> <br /><br /> E-mail id*: <input type="Email" size="30" name="user_id" /> <br /><br /> Password*: <input type="Password" size="30" name="pw1" /> <br /><br /> Confirm Password*: <input
type="password" size="30" name="pw2" /> <br /><br /><br /><br /> I accept the terms and conditions <input type="checkbox" name="t&c" /><br /><br />
<input type="submit" class="btn btn-lg btn-primary" value="Sign up now" onclick=window.location.href="https://www.google.co.in/signup" />
</form>
The form is actually a dummy sign up screen, yet the screen redirected is a 404 error screen, but I want the button to be disabled if certain fields are empty, and that it reloads the page if the two values for password are different.
I don't know JS completely, so please edit the code so that the parameters are clear.
Replace <input type="text" size="20" name="name" /> with <input type="text" size="20" name="name" required/>
Replace <input type="Email" size="30" name="user_id" /> with <input type="Email" size="30" name="user_id" required/>
Replace <input type="Password" size="30" name="pw1" /> with <input type="Password" size="30" name="pw1" required/>
Replace <input type="password" size="30" name="pw2" /> with <input type="password" size="30" name="pw2" required/>

post http in form not working

POST http method in my form does not work when I use JavaScript:
<form id="user" method="post"action="url" onsubmit="return false;">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit" onclick = "checkForm()">
</form>
However, it does seem to work when I do not use JavaScript:
<form id="user" method="post"action="url">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>
How can I use JavaScript validations in my form and send the form to a given URL?
<form id="user" method="post"action="url" onsubmit="return checkForm();">
<!-- blah blah-->
<input class="button" type="submit" value="submit">
</form>
Thanks for your help; this is working fine now.
It is not submitting to server because onsubmit="return false;" tells the browser the validation failed and do not send to server. If onsubmit is not specified or returns true the data will be submitted to the specified url. The following code should work if the function checkForm() returns true when passing validation and returns false while failing validation.
<form id="user" method="post" action="url" onsubmit="checkForm()">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>Last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>

Categories