title: Pass data to CGI script and back with jQuery.ajax
body: <p>I'm working with <strong>jQuery.ajax()</strong> to send some HTML form data to my Perl script on the server and then return some data back to the frontend.</p>
  
  <p>Preferably, the data should be in text/string format. I also need to save it as a variable for further use in jQuery functions.</p>
  
  <p>I already set up the <strong>HTML</strong> code, the <strong>JavaScript</strong> code and the <strong>CGI Perl</strong> script, but while JavaScript is working, the connection to the CGI Perl script is not and I always get the error message: <em>"script call was not successful"</em>.</p>
  
  <p>Maybe some one can tell me where the mistake is? I'm not completely sure how to return the variable from the Perl script back to the server.</p>
  
  <p>Since I'm still new to both jQuery and JavaScript and haven't worked with asynchronous calls before, any help would be greatly appreciated.</p>
  
  <p>This is my code:</p>
  
  <p><strong>The HTML code:</strong> (where the user fills the form with his first name and name:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="get_names.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="loginContent" class="container"&gt;
          &lt;div id="loginResult" style="display:none;"&gt;
          &lt;/div&gt;
          &lt;form id="loginForm" name="loginForm" method="post" action=""&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Enter information&lt;/legend&gt;
              &lt;p&gt;
              &lt;label for="firstname"&gt;First name&lt;/label&gt;
              &lt;br /&gt;
              &lt;input type="text" id="firstname" name="firstname" class="text" size="20" /&gt;
              &lt;/p&gt;
              &lt;p&gt;
              &lt;label for="name"&gt;Name&lt;/label&gt;
              &lt;br /&gt;
              &lt;input type="test" id="name" name="name" class="text" size="20" /&gt;
              &lt;/p&gt;
              &lt;p&gt;
              &lt;button type="submit" class="button positive"&gt;
               Login
              &lt;/button&gt;
              &lt;/p&gt;
          &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>The JavaScript Code:</strong></p>
  
  <pre><code>$(document).ready(function(){
    $("form#loginForm").submit(function() { // loginForm is submitted
  
  
  var firstname = $('#firstname').attr('value'); // get first name
  var name = $('#name').attr('value'); // get name
  
  if (firstname &amp;&amp; name) { // values are not empty
      $.ajax({
          type: "POST",
          url: "/cgi-bin/perl_script.cgi", // URL of the Perl script
  
          // send firstname and name as parameters to the Perl script
          data: "firstname=" + firstname + "&amp;name=" + name,
  
          // script call was *not* successful
          error: function() { 
              alert("script call was not successful");
          }, 
  
          // script call was successful 
          // perl_data should contain the string returned by the Perl script 
          success: function(perl_data){
              alert("Your name is: " + perl_data)
          }
      });   
  }
  
  else {
    $('div#loginResult').text("Enter your name");
    $('div#loginResult').addClass("error");
  }
  
  $('div#loginResult').fadeIn();
  return false;
    });
  });
  </code></pre>
  
  <p><strong>The Perl code:</strong></p>
  
  <pre><code>#!/usr/bin/perl -w
  use CGI;
  use strict;
  use warnings;
  
  # read the CGI params
  my $cgi = CGI-&gt;new;
  my $firstname = $cgi-&gt;param("firstname");
  my $name = $cgi-&gt;param("name");
  
  my $completename = $firstname . $name;
  
  print $completename;
  </code></pre>