Javascript and Ajax tutorial: June 2015

Wednesday, June 10, 2015

Disable tab key press event on html body

Step1: To disable tab key press on a html body you need to make a html page with some html fields.
the code will be like

<!DOCTYPE html>
<html>
<head>
<title>Disable Tab Key</title>
</head>
<body>
<script type="text/javascript">
document.onkeydown = function (e) {
if(e.which == 9){
return false;
}
}
</script>

<input type="text"><br/>
<input type="text"><br/>
<input type="text"><br/>
<input type="text"><br/>
<input type="text">
</body>
</html>

Step 2: Now make a javascript onkeydown event function with pass the event
the code shall be like

document.onkeydown = function (e) {
}

Step 3: Now have to detect the key value (the tab key vaue is 9)
the keyword for detact value is
e.which //here e is the event passed through the function

Step 4: now if satisfy the condition make return false
code will be something like
if(e.which == 9){
return false;
}

Now the full code will be:

<!DOCTYPE html>
<html>
<head>
<title>Disable Tab Key</title>
</head>
<body>
<script type="text/javascript">
document.onkeydown = function (e) {
if(e.which == 9){
return false;
}
}
</script>
<input type="text"><br/>
<input type="text"><br/>
<input type="text"><br/>
<input type="text"><br/>
<input type="text">
</body>
</html>

Thanks for reading.

Friday, June 5, 2015

On click add new field

Today I am going to show you how to make a add new field or div or content on click event of a button .

step 1: for that first take a html page with a html fild, the html fild
mast have a parrant div with a unic id (here the id is test) and a
button with a unic id outside of the div(here the buttons id is: add).
the code will like as

<!DOCTYPE html>
<html>
<head>
<title>Add More Field</title>
</head>
<body>

<div id="test">
<p>
<label for=""> Test*</label>
<input type="text" placeholder="Test" name="test[]">
</p>
</div>
<button type="button" id="add">Add Test</button>

</body>
</html>

step 2: now take the jquery file where the jquery functions are defined ,
you will get the file in the link
http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
and make a on click event function ,on load of the page
The code will be like as:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){

});
});
</script>

Step:3 Now take a counter of the .add length
the code will be as
var n = $('.add').length + 1;

Step 4: Now in for loop of the counter append the field inside the parrant
div of the field
the code will be like
for( var i = 0; i < n; i++) {
$("#test").append('<p><label for=""> Test*</label>'+
'<input type="text" placeholder="Test" name="test[]">'+
'</p>')
}

Now on click of the button there will append a new button

so now the total code will be

<!DOCTYPE html>
<html>
<head>
<title>Add More Field</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
var n = $('.add').length + 1;

if(n != '') {
for( var i = 0; i < n; i++) {
$("#test").append('<p><label for=""> Test*</label>'+
'<input type="text" placeholder="Test" name="test[]">'+
'</p>')
}
}
});
});
</script>

</head>
<body>

<div id="test">
<p>
<label for=""> Test*</label>
<input type="text" placeholder="Test" name="test[]">
</p>
</div>
<button type="button" id="add">Add Test</button>

</body>
</html>

Thursday, June 4, 2015

Auto fill same residential address and permanent address by clicking checkbox

for make a auto fill address using javascript you need to make a html form and a javascript function to fill some field.
now start to make the auto fill form.
step 1: make a html form with some field .
i. a textarea for residential address,
ii. a textbox for residential pin no,
iii. a checkbox for if the residential address and permanent address are same,
iv. a textarea for permanent address,
v. a textbox for permanent pin no.
Now the code will be like
<!DOCTYPE html>
<html>
<head>
<title>Auto fill Address</title>
</head>
<body>
<form action="#" method="post" enctype="">
<p>
<label for="residential_address">Current Address</label>
<textarea placeholder="Enter address" name="residential_address" id="residential_address"></textarea>
</p>
<p>
<label for="residential_pin">Current Pin code</label>
<input type="text" placeholder="Enter Pincode" name="residential_pin" id="residential_pin"/>
</p>
<p>
<label for="same_residential_permanent">If Residencial address is as address</label>
<input type="checkbox" name="same_residential_permanent" id="same_residential_permanent"value="abcde"/>
</p>
<p>
<label for="permanent_address">Parmanent Address</label>
<textarea placeholder="Enter address"
name="permanent_address" id="permanent_address"></textarea>
</p>
<p>
<label for="permanent_pincode">Parmanent Pincode</label>
<input type="text" placeholder="Enter pincode"
name="permanent_pincode" id="permanent_pincode" />
</p>
</form>

</body>
</html>
Step 2 . now call a javascript function on click event of the same address selecter checkbox
the function name is auto_fill_address();
and the on click event will be like onclick="return autofilladdress3ii();"
so the checkbox code will be as
<input type="checkbox" name="same_residential_permanent" id="same_residential_permanent"value="abcde" onclick="return auto_fill_address();" />
Step 3: now develop the javascript function to make the auto fill
put the code in head section.
the code will be like as
<script type="text/javascript">
function auto_fill_address(){
var same_addr = document.getElementById("same_residential_permanent").checked;
var resaddr = document.getElementById("residential_address").value;
var respin = document.getElementById("residential_pin").value;
//alert(x);
if(same_addr){
if((resaddr=='' || resaddr==null)||(respin=='' || respin==null)){
alert('please fill address and pincode');
document.getElementById("same_residential_permanent").checked = false;
}else{
document.getElementById("permanent_address").value = resaddr;
document.getElementById("permanent_pincode").value = respin;
}
}
else
{
document.getElementById("permanent_address").value = '';
document.getElementById("permanent_pincode").value = '';
}
}
</script>
Now the ful code will be like

<!DOCTYPE html>
<html>
<head>
<title>Auto fill Address</title>
<script type="text/javascript">
function auto_fill_address(){
var same_addr = document.getElementById("same_residential_permanent").checked;
var resaddr = document.getElementById("residential_address").value;
var respin = document.getElementById("residential_pin").value;
//alert(x);
if(same_addr){
if((resaddr=='' || resaddr==null)||(respin=='' || respin==null)){
alert('please fill address and pincode');
document.getElementById("same_residential_permanent").checked = false;
}else{
document.getElementById("permanent_address").value = resaddr;
document.getElementById("permanent_pincode").value = respin;
}
}
else
{
document.getElementById("permanent_address").value = '';
document.getElementById("permanent_pincode").value = '';
}
}
</script>
</head>
<body>
<form action="#" method="post" enctype="">
<p>
<label for="residential_address">Current Address</label>
<textarea placeholder="Enter address" name="residential_address" id="residential_address"></textarea>
</p>
<p>
<label for="residential_pin">Current Pin code</label>
<input type="text" placeholder="Enter Pincode" name="residential_pin" id="residential_pin"/>
</p>
<p>
<label for="same_residential_permanent">If Residencial address is as address</label>
<input type="checkbox" name="same_residential_permanent" id="same_residential_permanent"value="abcde" onclick="return auto_fill_address();" />
</p>
<p>
<label for="permanent_address">Parmanent Address</label>
<textarea placeholder="Enter address"
name="permanent_address" id="permanent_address"></textarea>
</p>
<p>
<label for="permanent_pincode">Parmanent Pincode</label>
<input type="text" placeholder="Enter pincode"
name="permanent_pincode" id="permanent_pincode" />
</p>
</form>

</body>
</html>