I suspect nothing is happening because your Perl script isn't getting called when you attempt this with jQuery. Your jQuery to deal with the submit actually isn't doing what you think it is. You need to explicity stop it from continuing as a normal form submission using preventDefault(). A full example can be found in the documentation for the post method http://api.jquery.com/jQuery.post/.

If you're using Firebug you can aid basic debugging by writing things out to the console via console.log('Something went wrong here/meaningful error message');, and making logging/errors persistant. I suspect you're just reloading the form. Further you may be interested in Using Perl, jQuery, and JSON for Web development from the tutorials section.

Update: this advice is spot on regards the printing of headers.

The perl code is definitely getting called. I've ensured that it at least creates a debugging file and spits out the values (but the values are blank).

The debugging file is being created and the output looks like:

The comment text is:

...so I know that's not the problem -- but thanks for the reply.

Your $.post() is not submitting any data, because you're not telling it what data you want to post. (jQuery is a nice library, but it isn't psychic - you need to tell it what data to post.) Try something like:

$.post(
    '/cgi-bin/hello_world.pl',
    $('#frm_name_1').serialize()
);
[download]

package Cow { use Moo; has name => (is => 'lazy', default => sub { 'Mooington' }) } say Cow->new->name

The variable txt_content remains blank. I'm completely stuck!!

I am not even going to attempt to troubleshoot your JQuery code. I can spell JQuery but that's about the extent of my knowledge on that subject.

However: let me throw you a few bones and at least provide you a methodology that I'd probably use if this were one of my consulting assignments. Are you using Firefox? If you are there is a wonderful tool for Firefox that can aid in the debugging of JavaScript based code and especially things like what you are attempting to do. The name of the tool is (offsite link) Firebug. This tool well let you watch the interaction between the JavaScript code and your web server. There is also a tool specifically for JQuery that is a Firefox pluging called (offsite)FireQuery. I have no experience with it but maybe you can try that.

Even more basic than that I'd suggest checking your sever logs and ensure that the POST is even happening.

My next step would be to put some debugging code into the backend script on the server. A sniglet you can put in:

sub barf_my_guts_out {
        my $cgi=shift;
        open TRACE,sprintf("> /tmp/%s.debug.%d.txt",$0,$$)
                  or die "Cannot open trace log: $!";
        printf TRACE "CGI Variables Passed: \n";
        printf TRACE "%20s\t%30s\n\n","Key","Value";
        foreach my $key($cgi->param){
           printf TRACE "%20s\t%30s\n",$key,$cgi->param($key);
        }

        printf TRACE "\n\nEnvironment Values:\n";
        printf TRACE "%20s\t%30s\n\n","Key","Value";
        foreach my $key (sort keys %ENV){
            printf TRACE "%20s\t%30s\n",$key,$ENV{$key};
        }
}
[download]

#!/usr/bin/perl -w 
use strict;
use CGI;
# more stuff
my $cgi = CGI->new();           # or however
my $verbose_debug=1;

barf_my_guts_out() if $verbose_debug;
[download]

Basic troubleshooting is based on an understanding of what the inputs are into a system and what the expected output should be. A system can always be broken down into smaller pieces that you can test the input to and output from in a methodical manner.

Here's a fairly simple example that should do the basics of what you want:

#!/usr/bin/perl -w

###############
## Libraries ##
###############
use strict;
use warnings;
use CGI;
use CGI::Carp qw{ fatalsToBrowser };
use JSON;


##################
## User-defined ##
##################
my $jquery = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.
+js";


##################
## Main program ##
##################
my $query = new CGI;
my $url   = $query->url;

my $txt_content = $query->param("txt_content") || "";
if ($txt_content) {
    handle_server_side_ajax($txt_content);
    exit;
}

print_html();


#################
## Subroutines ##
#################
sub handle_server_side_ajax {
    my ($text) = @_;

    print "Content-type:  application/json\n\n";

    # Do something with $text ...
    my $result = "You said '$text'";
    my $time   = localtime(time());

    my $h_json = { 'result' => $result, 'time' => $time };

    my $output = to_json($h_json);
    print $output;
}


sub print_html {
    print "Content-type:  text/html\n\n";

    print qq{
        <script src="$jquery" type="text/javascript"></script>
        <script type="text/javascript">
            var J = jQuery.noConflict();

            function ajax_text() {
                var input = J('#text_input').val();
                J.ajax({
                  url:      "$url",
                  cache:    false,
                  dataType: 'json',
                  data:     { txt_content: input },
                  success:  function(json) {
                    handle_ajax_output(json);
                  }
                });
            }

            function handle_ajax_output(json) {
              var result = json.result;
              var time   = json.time;
              var text   = "<br>Time: " + time + " &nbsp; Result: " + 
+result;
              J('#html_result').append(text);
            }
        </script>

        <body style="background:cyan">
            <h2>JQuery Example</h2>

            <br>Enter Text and click Submit
            <br>
              <input id="text_input">
              <input type="button" value="Submit" onclick="ajax_text()
+">

            <br><br>
               <h5>Ajax Results Below</h5>
               <pre id="html_result" style="background:#ffef9f">
               </pre>
        </body>
    };
}
[download]

Note that I used "var J = jQuery.noConflict();" so that I could type:

    var input = J('#text_input').val();
[download]

without having to escape the usual '$' variable of jQuery. Otherwise I'd have had to do:

    var input = \$('#text_input').val();
[download]

My guess is that you were getting a blank page because you didn't print the headers properly. For the server-side ajax, you need to at least print something like:

    print "Content-type:  text/html\n\n";
[download]

Or, what I usually use:

    print "Content-type:  application/json\n\n";
[download]

If you have access to your httpd logs (for example, in Linux they might be in "/var/log/httpd"), take a look at "access_log" (to see if the server-side code was called), and "error_log" (to see whether there were problems).

By the way, you don't have to use jQuery to do what you're trying to do, but it does make it a lot easier (especially things like Ajax, which are greatly simplified by jQuery).

Let me know if you have any questions about my code, and I'll be happy to elaborate further.

Thanks. I've tried putting in your code. I have two issues (thus far). I'm getting the error:

Can't locate JSON.pm in @INC (@INC contains: /usr/lib64/perl5/site_perl/5.8.8/x86_64-linux-thread-multi /usr/lib/perl5/site_perl/5.8.8 /usr/lib/perl5/site_perl /usr/lib64/perl5/vendor_perl/5.8.8/x86_64-linux-thread-multi /usr/lib/perl5/vendor_perl/5.8.8 /usr/lib/perl5/vendor_perl /usr/lib64/perl5/5.8.8/x86_64-linux-thread-multi /usr/lib/perl5/5.8.8 .) at hello_world.pl line 8. BEGIN failed--compilation aborted at hello_world.pl line 8.

on the server. (I'm hosting from 2mhost, so I have no idea what this all means) Do they even have JSON?

The other issue, is that my jquery post is directly in my HTML page, not within a function on a PERL page -- so I'm having a hard time extrapolating your code and putting it into straight HTML format because I'm not exactly what you're doing with the whole J. stuff.

Hi stuckdev,

As marto said, you need to have JSON installed. You could ask 2mhost to install it for you, or try to install it locally (if you have that capability). It's not a complete requirement, but JSON ("Javascript Object Notation") is a wonderful means of simplifying how data is serialized for passing between client and server.

As for your HTML page, if it's separate from your CGI, you can just put everything printed out by subroutine "print_html() into the html page, except for the "Content-type:  text/html" (which will be printed for you automatically by the server, since it's in HTML.

You would then change $url in the function ajax_text(), in this line:

    url:   "$url",
[download]

to be whatever the name of your actual CGI/Perl script was instead.

However, please note that you will still need the headers printed from your server-side Perl/CGI script; eg.:

    print "Content-type:  application/json\n\n";
[download]

If you forget that, you'll get something like this error (from my /var/log/httpd/error_log file):

[Wed Mar 13 11:41:37 2013] [error] [client 192.168.17.33] Premature en
+d of script headers: 1023196.cgi, referer: http://mymachine.com/10231
+96.cgi
[download]

Does that help you get further?

say  substr+lc crypt(qw $i3 SI$),4,5

This means your host don't have JSON instaled, depending on your hosting deal you may be able to install modules easily, or it could be something they have to do for you. This is not a Core module. Also 5.8.8 is a fairly old verison of Perl. See also here and here.

You have to send the data with the .post.

$.post("/cgi-bin/hello_world.pl",$("#frm_name_1").serialize());
[download]

where #frm_name_1 is the id of your form. Serialize encodes the set of form elements as a string for submission.

This would be even cleaner

$.post("/cgi-bin/hello_world.pl",$(this).serialize());
[download]

yes yes!! Tobyink had the same response -- and you made it even better by allowing the form name to be a variable (using "this" instead of the actual form name). Now, the last thing is to figure out how to call that rewriteDiv function after the form post!!

The return false; should do the trick.

Try removing the ";" after the serialize() function.