We Keep Coding

Automatic filling of identical registration fields at the same time

I need to help. I have a next form
<form action="" method="POST">
<input type="email" name="email">
<input type="email" name="email-repeat">
<input type="password" name="password">
<input type="password" name="password-repeat">
<input type="submit" value="">
</form>
and I want when I reload to page, that browser to autocomplete all fields from saved data in the browser(email and password) twice password and twice email. I tried a few combinations with attribute of autocomplete, but nothing.

You should add autocomplete="off" to the inputs that you don't want to be filled automatically.
<input autocomplete="off" type="email" name="email">
<input autocomplete="off" type="email" name="email-repeat">
<input autocomplete="off" type="password" name="password">
<input autocomplete="off" type="password" name="password-repeat">
<input type="submit" value="">
You can find details in MDN

Get the content of a form when the button is pressed using javascript

I have a webpage that has multiple forms everywhere, in some pages, there are 4 or 5 forms at once. At this time I get the form input field's contents targeting its specific name (using jQuery):
html
<input id="lastname" name="lastname" type="text" class="form-control" placeholder="Last name*">
js
var lastname = $("[name='lastname']").val();
Nonetheless, this is not scalable, I need to add more variables every time I add more HTML Forms with their unique names (All of the forms are conformed with the same 4 fields). I want to implement a vanilla javascript function that can handle all forms when submit button is pressed this is how I have it now:
//At this momment I get the values using jQuery, targeting the specific input name:
$('.btn').click(function(){
$('.btn').attr("disabled", true);
var name = $("[name='name']").val();
var lastname = $("[name='lastname']").val();
var phone = $("[name='phone']").val();
// make a var for every input field known
//stuff to send it via ajax to an external api:
/*
{ ... }
*/
}
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name" name="name" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname" name="lastname" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
<button class="btn" onclick="process()">Submit</button>
</form>
<form>
<label for="name-2">Name*</label>
<input type="text" placeholder="name here" id="name-2" name="name-2" required>
<label for="lastname-2">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname-2" name="lastname-2" required>
<label for="phone-2">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone-2" name="phone-2" required>
<button class="btn" onclick="process()">Submit</button>
</form>
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name-3" name="name-3" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname-3" name="lastname-3" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone-3" name="phone-3" required>
<button class="btn" onclick="process()">Submit</button>
</form>
I want to have only 1 javascript function that receives the entire form (when the button is clicked) and internally traverses the form element to get the values of the field and this way, it can be reusable to all forms

The javascript function should receive the element first, then traverse to parent element:
HTML
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name" name="name" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname" name="lastname" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
<button class="btn" onclick="process(this)">Submit</button>
</form>
Using onclick="process(this)" in the button, this way it will call the javascript function associated with and sending the element where the click was made.
js
process(element){
var form = element.closest('form')
// now you can extract the input field of this specific form.
}
Now you can get the input fields as needed using:
Get all the elements of a particular form

REQUIRED triggering VALIDATION

Okey comunity,
I need help with my code, so this is my form code
<form action="input.php" method="POST">
<input type="text" class="input" name="firstname" placeholder="First Name" required>
<input type="text" class="input" name="lastname" placeholder="Last Name" required=""><br>
<input type="text" class="input lower" name="streetnumber" placeholder="Street / Number" required=""><br>
<input type="text" class="input lower" name="city" placeholder="City" required=""><br>
<input type="text" class="input lower" name="country" placeholder="Country" required=""><br>
<button type="submit">Add User</button>
</form>
All I want to do is to ask if my 'required' in input can trigger validation. Type of validation I need basicly is NOT NULL and I want to have paragraph above each input to show up with text (This filed is a must).
If you find my question confusing please write a comment and I will provide more info.
I know I must use some JS code, but I would realy be glad if you can help me with that code and tell me what I need.
Best regards comunity

var country = document.getElementById("country").value;
var p = document.getElementById("pcountry");
if (!country) {
pn.classList.add("show");
return false;
} else {
return true;
}
This is my answer

Google chrome autofill is not working on all machines

I developed a pages and I put autocomplete attributes in every text input according to google https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en , but the problem is very strange. The problem is taht it is working on my machine properly and after deploying on my test environment it working there as well but only on my machine, when I am testing it on other team members machine it is not working there.
Th form that I made is exactly same as this form https://greenido.github.io/Product-Site-101/form-cc-example.html.
If you test it in you chrome browser it'll work for you, I also have added personal information into chrome by going through advanced setting and filling autofill profile there.
As you can test my plunker example to test and see problem. https://embed.plnkr.co/SKkAJ2lHQHElNbyvGrmp/
I have searched a lot for solution but nothing was related to this, like people are talking about autocomplete off, go to google chrome setting and setting profile and etc.

Try to use <form> and put data-input attribute it'll work.
<form>
<input type="text" required ng-model="vm.Model.Contact.Name" name="Name" id="Name" maxlength="250" data-input="name" autocomplete="name" /> <input type="email" required ng-model="vm.Model.Contact.Email" name="Email" id="Email" maxlength="100" data-input="email" autocomplete="email" /> <input type="text" required ng-model="vm.Model.Contact.Mobile" name="Mobile" id="Mobile" maxlength="30" data-input="tel" autocomplete="tel" />
<input type="text" ng-model="vm.Model.Contact.Telephone" name="Telephone" id="Telephone" maxlength="30" data-input="tel" autocomplete="tel" />
</form>

in your input tag the name attribute start with uppercase latter
try to change it lowercase latter and it should work
your code:
Name: <input type="text" required="" ng-model="vm.Model.Contact.Name" name="Name" id="Name" maxlength="250" autocomplete="name"> <br> <br>
Email: <input type="email" required="" ng-model="vm.Model.Contact.Email" name="Email" id="Email" maxlength="100" autocomplete="email"> <br> <br>
Mobile: <input type="text" required="" ng-model="vm.Model.Contact.Mobile" name="Mobile" id="Mobile" maxlength="30" autocomplete="tel"> <br> <br>
Phone: <input type="text" ng-model="vm.Model.Contact.Telephone" name="Telephone" id="Telephone" maxlength="30" autocomplete="tel"> <br> <br>
fix code
Name: <input type="text" required="" ng-model="vm.Model.Contact.Name" name="name" id="Name" maxlength="250" autocomplete="name"> <br> <br>
Email: <input type="email" required="" ng-model="vm.Model.Contact.Email" name="email" id="Email" maxlength="100" autocomplete="email"> <br> <br>
Mobile: <input type="text" required="" ng-model="vm.Model.Contact.Mobile" name="mobile" id="Mobile" maxlength="30" autocomplete="tel"> <br> <br>
Phone: <input type="text" ng-model="vm.Model.Contact.Telephone" name="telephone" id="Telephone" maxlength="30" autocomplete="tel"> <br> <br>

Clear all values from all text fields when clicking on any of them

I have a form with :
<INPUT TYPE="text" NAME="name" id="name" value="Enter your name" size="16">
<INPUT TYPE="text" NAME="lname" id="lname" value="Enter your last name" size="16">
No matter which field you click on, the values of both should be cleared
How can I do that?
Thanks

try this:
<script>
var default_name_value="Enter your name";
var default_lastname_value="Enter your last name";
function empty_fields(){
$("input[type=text]").each(function(index,item){
if($(item).val()==default_name_value||$(item).val()==default_lastname_value){
$(item).val("");
}
});
}
</script>
<INPUT TYPE="text" NAME="name" id="name" onfocus="empty_fields();" value="Enter your name" size="16">
<INPUT TYPE="text" NAME="lname" id="lname" onfocus="empty_fields();" value="Enter your last name" size="16">
UPDATE
this will empty all text boxes in the page
refine the selector in line 3 to something like $("#myform input[type=text]") to empty only boxes in the desired form
UPDATE 2
now it will only be emptied for the first time