We Keep Coding

How can I make my form only except values that the user entered that are between 1 - 100 (e.g like for the age box)

I want this to apply to the age input box and to only except the values that are between 1 - 100,in 'javascript'.
<h1>Form</h1>
<form name="form" onsubmit="myFunction()" method="post" action="">
<div>
<input type="text" required minlength="3" maxlength="20" placeholder="Enter your first name">
</div>
<div>
<input type="text" minlength="3" maxlength="20" required placeholder="Enter your last name">
</div>
<div>
<input id="age" required name="number" type="number" placeholder="Enter your age">
</div>
<div>
<input type="text" required placeholder="Enter your email">
</div>
<div>
<input type="submit" required value="Submit">
</div>
</form>

The attributes min and max is probably what you're looking for.
<input id="age" required name="number" type="number" placeholder="Enter your age" min="1" max="100">
You may need to clarify what you mean by "only except the values that are between 1 - 100,in 'javascript'." if not.

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

serialize a form in groups

Is it possible to serialize a form in separate groups?
<form id="form">
<input class="nameF" type="text" name="fName" value="first name">
<input class="nameF" type="text" name="lName" value="last name">
<input class="address" type="text" name="addOne" value="home address">
<input class="address" type="text" name="zip" value="zip code">
<input class="address" type="text" name="country" value="country">
</form>
$('#form').serialize();
//this gives me the complete form serialized
but can I break it down in groups with the fields containing class name?
Something like nameF : first+name&last+name and same for address, is this doable?

You can do like :
console.log($('.nameF').serialize());
console.log($('.address').serialize());
If you didn't get your answer , elaborate your question with full example.

<form id="form">
<input class="nameF" type="text" name="fName" value="first name"/>
<input class="nameF" type="text" name="lName" value="last name"/>
<input class="address" type="text" name="address[addOne]" value="home address"/>
<input class="address" type="text" name="address[zip]" value="zip code"/>
<input class="address" type="text" name="address[country]" value="country"/>
</form>
fiddle

You can use -
$('input .nameF').serialize();
$('input .address').serialize();
You can test it using-
alert(JSON.stringify($('input .nameF').serialize()));

Auto Clear & Refill Texta Area Value

I have a simple form using the Value to inform the user what they're to put in each text area. I have been able to make the text area's auto clear using this javascript:
<script type="text/javascript">
function setValue(field)
{
if(''!=field.defaultValue)
{
if(field.value==field.defaultValue)
{
field.value='';
}
else if(''==field.value)
{
field.value=field.defaultValue;
}
}
}
</script>
What would I need to add to have the Value re-appear if the user doesn't fill the text area and they no longer have it selected? Here's the form markup, if that helps any:
<form method="post" action="<?php echo $PHP_SELF; ?>">
<input type="text" name="first" value="First Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="last" value="Last Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"> <br>
<input type="text" name="address" value="Address" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="city" value="City" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="state" value="State" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="zip" value="Zip" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="phone" value="Phone" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="radio" name="day" value="Day"> Day
<input type="radio" name="evening" value="Evening"> Evening <br>
<input type="text" name="email" value="Email" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="submit" name="submit" value="Send Request" class="push_button blue">
(sorry for the poor wording, it's early!)
Thank you!
Any help with this would be much appreciated.

You are looking for the placeholder html5 attribute
<input type="text" palceholder="First Name" />
http://jsfiddle.net/MesvN/
http://davidwalsh.name/html5-placeholder

Textbox focus jumps to next textbox automatically on mobile safari(ios 5)

i have form with following input field. when i click on first text box , the focus gets transfer to next textbox.i am using this code in phonegap and running it on iphone(ios 5).please help me out..
<form id="createAccount" name="regForm">
<input type="text" name="first_name" id="fname" placeholder="First Name" style="height:40px;" >
<input type="text" name="last_name" id="lname" placeholder="Last Name" style="height:40px;">
<input type="email" name="email" id="email" placeholder="Email" style="height:40px;">
<input type="password" name="password" id="RegPassword" placeholder="Password" style="height:40px;">
</form>

First try to remove your wrong inside form, then add tabindex on each input.
Moreover, do you use any lib? (jquery...?)