Javascript and Ajax tutorial

Monday, October 9, 2017

Make money online from home

Hi, There is several way to make money from home without spending a single money.

The first way is google adsense
for that you need to create or have to created a website and apply for google adsence
Read more from here how to apply google adsense and you need to purchase a domain and hosting.

The second one is
blogger , using google blogger.com you can also make money but you need to purchase a domain and assign to google blogger.com and benefit is you does not have to purchase hosting and also not need to make a website.
you can read from here about blogger adsense in details

the third one is:
youtube adsense , in this case you have to create stander video and get view but needed at least 10000 view in your Chanel
Read how to create youtube adsense from here.

and there is toomany restiction in case of google adsense and may rejection of adsense application.
read in details the main reason of rejection of google adsense application

Thanks for reading

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>

Friday, May 22, 2015

Javascript validate phone number

To validate a phone number take a html form

the html code should be

<html>
<head>
<title>Your title</title>
</head>

<body>
<form acction="" method="post" onSubmit="return fromvalidation();" >
<imput type="text" id="phno" name="phone_no" placeholder="enter phone number" />
<br />
<input type="submit" name="phone_number_submit" id="ph_sbmt" />
</form>

<script>
function fromvalidation()
{
var phno=document.getElementById('phno').value;
var phno_validation = /^\d{10}$/;

// for 10 digit phone number validation
if(phno.match(phno_validation ))
{
return true;
}
else
{
alert("Not a valid Phone Number");
return false;
}
}
</script>
</body>
</html>