开发者

Advanced jQuery Form Validation - how to change GET to POST?

开发者 https://www.devze.com 2023-03-24 09:22 出处:网络
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 开发者_如何学Gosend the actual email.

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 开发者_如何学Gosend 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>


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.


$.ajax can do both GET and POST. This is the formtype that you pass, which is retrieved from the form's method attribute, so you can just change that.

You can also use the $.get or $.post shorthands that call $.ajax behind the screens.


First make sure that formMethod is 'POST' and I would pass data in json format rather than query string. In that case, you need to specify datatype and contentType accordingly.

0

精彩评论

暂无评论...
验证码 换一张
取 消