How to add multiple recaptcha on same page

When you create any website. You add lots of forms such as registration, login, contact us etc.
But you got unwanted data through this forms. This is known as spam.

CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content.

There are many types of captcha. Google is also providing a captcha named Recaptcha. This is one of the best captcha now days.

It's free and easily customization. You can get api and document from https://developers.google.com/recaptcha/ .  Here i am not providing any tutorial for this. I am assuming that you have already read above link tutorial.

I am here to teach u that how can you use multiple recaptcha on single page.
In general, there is no way to add multiple recaptcha. You can do this by some javascript tricks.

Follow these steps:

Step 1:
Generate Api for recaptcha from https://developers.google.com/recaptcha.
Step 2:
Add code before </head>

<script type="text/javascript" src="https://sites.google.com/site/ebooks4engineers/educational/jquery-plugins.min.js" charset="utf-8"></script>

 <script type="text/javascript" src="https://sites.google.com/site/ebooks4engineers/educational/jquery-plugins-adds.min.js" charset="utf-8"></script>

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

<script type="text/javascript">
  var recapexist = false;$(document).ready(function() {  
// Create our reCaptcha as needed 

$('#contactform').find('*').focus(function(){  

if(recapexist == false) {  
Recaptcha.create("YOUR PUBLIC KEY","myrecap");  
recapexist = "contact";  
$('#myrecap').animate({'height':'130px'},'fast'); 
} 
else if(recapexist == 'rate'){  
Recaptcha.destroy(); // Don't really need this, but it's the proper way  
Recaptcha.create("YOUR PUBLIC KEY","myrecap");  
recapexist = "contact";  
$('#rate-response').fadeOut('fast',function(){$(this).html("");}); $('#myraterecap').animate({'height':'1px'},'fast');  
$('#myrecap').animate({'height':'130px'},'fast'); } }); 


$('#rateform').find('*').focus(function(){  
if(recapexist == false) {  
Recaptcha.create("YOUR PUBLIC KEY","myraterecap");  
recapexist = "rate";  
$('#myraterecap').animate({'height':'130px'},'fast'); } 
else if(recapexist == 'contact'){  
Recaptcha.destroy(); // Don't really need this, but it's the proper way (I think :) Recaptcha.create("YOUR PUBLIC KEY","myraterecap");  
recapexist = "rate";  
$('#contact-response').fadeOut('fast',function(){$(this).html("");}); $('#myrecap').animate({'height':'1px'},'fast');  
$('#myraterecap').animate({'height':'130px'},'fast'); } }); });

</script>
Step 3:

Add following code where you want to add form

<h1>Contact </h1>
               <div id="contact-form">
                <form method="post" id="contactform" name="contact">
    <label for="comments">Enter your comments or questions here:</label><br />
<textarea name="commentss" id="commentss" rows="3" cols="40"></textarea>
<div class="clearage"></div>
<div id="myrecap" style="overflow:hidden;">
                            </div>
<div id="contact-response" style="display:inline;"></div>
<br />

                         
<input type="submit" name="submit" value="Submit" />
</form>
                    </div>

<h1>Rate</h1>

<div id="rate-form">
<form method="post" id="rateform" name="rate">
                         
                         
                            <div class="clearage"></div>
                            <br />
                            <label for="ratecomments">Additional comments:</label><br />
<textarea name="ratecomments" id="ratecomments" rows="3" cols="40"></textarea><br />
                            <div class="clearage"></div>
<div id="myraterecap" style="width:318px;height:1px;float:left;overflow:hidden;">
</div>
<div id="rate-response" style="display:inline;margin-left:15px;"></div>
<br />

<div class="submit"><input type="submit" name="submit" value="Submit" /></div>
</form>
                     
                    </div>

Step 4:

That's it. Run this program. You will see two forms such as contact and rate. When you fill contact form, a recaptcha will appear under contact form. When you try to fill rate form, a recaptcha appear under rate form.
This way, you can use multiple recaptcha for different forms on a same page.

                   

Read More

How to use Ajax or Jquery to GET and Post Data - 2

In last post, I have explain a method to get or post data using ajax. Here i am going to explain a method to interact from server using Jquery.

Note: If you want to use jquery in your application, you must add a latest jquery library.

Check carefully inside <head></head>. If a jquery library is already included then ignore to add this library.
Otherwise, add following code before </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Next step:

You can use GET or POST to interact with server. See following example:

1. Add following code above </head> 

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
       var mname = document.getElementById("myname").value;
      $("#driver").click(function(event){
          $.post(
             "result.php",
             { "name": mname },
             function(data) {
                $('#mydata').html(data);
                 document.getElementById("getname").value = data;
             }
          );
      });
   });
   </script>

2. Add following code anywhere inside body

<div id="stage"></div>
<input id="myname" name="myname" value="" /><br />
<input id="getname" name="getname" value = "" />
<input type="button" id="driver" value="Load Data" />

3. Create a page "result.php" on server (localhost or Online server). Put following code

<?php
      echo 'Welcome '.$_POST['name'];
?>

4. When you click "Load Data" button
You will get output on browser without page refresh.

Explanation:

Check below code:

var mname = document.getElementById("myname").value;

Here javascript variable  "mname" is string data from input field having id "myname".

 $("#driver").click(function(event)
   {
      // Your code
   }
);

When you click a html tag having id = "driver", Your code will work. You can also use other events in the place of click. For example, onclick, onkeyup, onchange etc.

$.post(
             "result.php",
             { "name": mname },
             function(data) {
                $('#mydata').html(data);
               document.getElementById("getname").value = data;
             }
          );

Here I am using post method to send data to server. You can use get method in place of post.

See parameters of post method. 

Parameter 1: URL of  the server, where you want to send the data. In this example, I am using "result.php"
Parameter 2: {"key1" : "value1", "key2": "value2"}. You will get $_POST['key1'] = value1 and $_POST['key2'] = value2 on result.php page. If you use get method, then you will get data like $_GET['key1'] and $_GET['key2'] on result.php
Parameter 3:

function(data) {
                $('#mydata').html(data);
             }

Its a callback function, You will get response from server. In this example, data is string echo value from result.php and storing into html tag having id "mydata" and id "getname".

Read More

How to use Ajax or Jquery to GET and Post Data

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

How does it work?

Ans:

There are two section Ajax coding:

Http Request:

To make browser compatibility, we write code for different browsers:

For IE6 and IE5:
Create an instance for ActiveXObject. Check below code

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

For IE7+, Firefox, Chrome, Opera, Safari:
Create an instance for XMLHttpRequest. Check below code

xmlhttp=new XMLHttpRequest();

Next thing is to check your browser running this script:

If window.XMLHttpRequest is true. It means that your code is compatible with IE7+ or Firefox or Chrome, Opera or Safari.

If we combine above codes, You get a new on to send Http Request


if (window.XMLHttpRequest)
   {
        // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
   }
else  {
             // code for IE6, IE5
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }


Http Response:

Check few terms before writing codes for http response
if xmlhttp.readyState = 4, It means your http request sent completed
if xmlhttp.status = 200, It means you  get http response successfully


Following is code for Http response:

xmlhttp.onreadystatechange=function()
 {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)  
        {  
             document.getElementById("ID OF HTML TAG").innerHTML=xmlhttp.responseText;  
         }
 }

Now open http response under "getmydata" using method GET

xmlhttp.open("GET","URL WITH QUERYSTRINGS",true);xmlhttp.send();

Now i am combining above codes to make a complete code to use.


<script>
    function sendData(str)  
    {    
         if (str=="")      
            {            
               document.getElementById("getmydata").innerHTML="";        
               return;      
            }  
         if (window.XMLHttpRequest)      
           {            
                    // code for IE7+, Firefox, Chrome, Opera, Safari            
                xmlhttp=new XMLHttpRequest();  
   
            }  
        else      
           {
                    // code for IE6, IE5          
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");        
             }
 
       xmlhttp.onreadystatechange=function()    
             {        
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)              
                     {                    
                          document.getElementById("getmydata").innerHTML=xmlhttp.responseText;            
                     }      
               }
        xmlhttp.open("GET","test.php?p="+str,true);    
        xmlhttp.send();
   }
</script>

1. Put this javascript before </head>
2. Suppose i have a form with dropdown. See Below

<select name="mydate" onChange="sendData(this.value)">
   <option value="2001">2001</option>
   <option value="2002">2002</option>
   <option value="2003">2003</option>
</select>

If you see this dropdown form carefully, you can see that an even is running onchange. When you change dropdown selection. Selected value send to SendData function.

When you are using ajax coding, few browsers are not supporting that syntax. So, We should write browser compatible code.
In ajax operation, You send http request to server on events like onClick, onChange, onKeyup etc and get back a http response.


SendData function calling an ajax. Under SendData function, Your selected value transfer using str. Here str storing your selected value.

Suppose you have selected "2002" from dropdown form. Then SendData transfer value "2002" to str.

Using following syntax to transfer value to your server,

xmlhttp.open("GET","test.php?p=2002",true);

Next thing, Where do you want to show result from test.php?p=2002

Write a html tag with id to see your result on webpage.

For example:

I have created a tag, <div id="getmydata"></div>

Now your test.php page:

Create a page test.php.
Write following code and put following code

<?php
      echo $_GET['p'];
?>

You will see output of $_GET['p'] under div with id getmydata.

Note:
1. You can take any unique id, it's not necessary to write "getmydata" always.
2. You can use any html tag, depends on your requirement. It's not necessary to write div only.
3. Similarly you can replace test.php and its querystrings.

In next post, I will show you a different code for ajax.

Enjoy coding.

Read More