Question

I’m fairly new to jQuery and JavaScript, and I’ve been trying to implement a jQuery contact form which calls to a PHP file to send the actual email.

Here is the jQuery portion which calls the PHP file after the jQuery validation passes:

$(this).click(function() { 

    var result = $.formValidator(options);

    if (result && jQuery.isFunction(options.onSuccess)) {
        options.onSuccess();

        // Start Processor
        if($(this).data('formstatus') !== 'submitting'){

            // Setup variables
                // Form Variables
                    var name = $(".form input#getstarted-name").val();
                    var number = $(".form input#getstarted-phone1").val() + ' ' + $(".form input#getstarted-phone2").val();
                    var company = $(".form input#getstarted-company").val();
                    var email = $(".form input#getstarted-email").val();
                    var message = $(".form textarea#getstarted-message").val();
                    var from_url = $(".form input#getstarted-from_url").val();

                // Consolidate Variables
                var dataString = 'name=' + name + '&number=' + number + '&company=' + company + '&email=' + email + 
                             '&message=' + message + '&from_url=' + from_url;
            var form = $(this),
                //formData = email.serialize(),
                formData = dataString, 
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#startproject-response');

            //add status data to form
            form.data('formstatus','submitting');

            //show response message - waiting
            responseMsg.hide()
                       .removeClass('response-error')
                       .removeClass('response-success')
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);

            $.ajax({
                url: "/layout/js/jquery/forms/form_db_process.php",
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .removeClass('response-error')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(200,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },3000)
                                });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;

        // End Processor

    }
});

And here’s the PHP file “form_db_process.php”:

$name = mysql_real_escape_string($_GET['name']);
$number = mysql_real_escape_string($_GET['number']);
$company = mysql_real_escape_string($_GET['company']);
$email = mysql_real_escape_string($_GET['email']);
$message = mysql_real_escape_string($_GET['message']);
$ip = $_SERVER['REMOTE_ADDR'];
$timestamp = date("y/m/d : H:i:s", time());
$from_url = mysql_real_escape_string($_GET['from_url']);

// send email etc...

I’ve got this whole thing to work, but I was wondering how to change the GET to POST instead? I know how to do this with regular HTML + PHP, but jQuery I’m at a loss…

I looked here:
http://api.jquery.com/jQuery.post/

But was unable to come up with anything workable/wasn’t sure how to use it.
Any help would be appreciated!!

// EDIT: I’ve added the HTML portion below (for the form):

<form id="startproject-form" class="form" method="post" action="">

<!-- ... form inputs here ... -->

</form>

Answer 1

in jQuery:

$.ajax({
  type: 'POST',

Your code does:

 $.ajax({
                url: "/layout/js/jquery/forms/form_db_process.php",
                type: formMethod,

And formMethod is set earlier:

var form = $(this),
                //formData = email.serialize(),
                formData = dataString, 
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 

Either override it, or actually change your form’s METHOD attribute to POST.