Link to home
Start Free TrialLog in
Avatar of Tintin
Tintin

asked on

Simple Perl/AJAX Form

I'm after the barebones to pass a single value to a Perl CGI via query and output the result.

The HTML I need to modify is:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<div class="input-form">
     <input type="text" name="field1" class="form-control" placeholder="Enter to search...">
                    <span class="input-btn">
                        <button class="btn" id="check" type="button"><i class="b-search"></i></button>
                    </span>
</div>

<div class="result">
The output of the Perl CGI Script
</div>

Open in new window


What HTML/JS modifications do I need to make to invoke my Perl CGI script?
SOLUTION
Avatar of Md Shah
Md Shah
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tintin
Tintin

ASKER

Hi Md.

I tried your javascript, and could get the Perl script to fire, but couldn't get any results displayed.

Should the script using the MIME type text/html, or something else?

Dave, I got your solution to work, but I'm unsure how to trigger the action on a button press, rather than a traditional HTML form.

Also, I'm trying to get the spinning graphic displayed while the script is running.
Avatar of Tintin

ASKER

Finally managed to cobble together a combination of the two approaches.

My javascript looks now looks like:

$(function () {

        $('.btn').on('click', function (e) {


	    e.preventDefault();
            var site = $("[name='field1']").val();
	    url = 'search.pl';
            var posting = $.post( url, { f1: site } );
	    posting.done(function( data ) {
               $( "#result" ).empty().append( data );

            });
        });
});

Open in new window

Thats a Good News.. So I guess, You issue has been resolved..

Good Luck for further coding :)