简体   繁体   中英

jQuery - merging ajax requests as have them split up and replacing data

im new to js/ jquery so think ive done ok to get this far however ive noticed an issue with my code and think i need to somehow merge it together.

If i enter email, it updates in database, however as soon as i do firstname or lastname it updates those but then removes the email...

here is the JS so far:

// function to check email field, validate and save to ac for this customer session
function checkIt(field) {
    field = $(field);
    var email = field.val();
    var emailError = "<p>The email address in the <b>E-mail</b> field is invalid.</p>";
    var emailInputId = field.attr('id');
    if ($("." + emailInputId + "_error_message").length > 0) {
        $("." + emailInputId + "_error_message").remove();
    }
    //console.log($(emailInputId+"_error_message"));
    if (validEmail(email)) {
        //alert('valid email');
        $.ceAjax('request', fn_url('ac.email'), {
            method: 'post',
            data: {
                'email': email
            },
            caching: true
        });
        field.removeClass('cm-failed-field');
        field.prev().removeClass('cm-failed-label');
        field.next("span").remove();
    } else {
        field.addClass('cm-failed-field');
        field.prev().addClass('cm-failed-label');
        field.after("<span class='" + emailInputId + "_error_message help-inline' ><p>" + emailError + "</p></span>");
    }
}

// lets check if the email input was already populated, such as browser auto fill etc.. if so use that and save
var field = $('#onestepcheckout .ty-billing-email input')[0];
if ($(field).length > 0) {
    if (field.value) {
        checkIt(field);
    }
}

// check email thats inputted and save to ac session for this customer, or if email changed to update
$('#onestepcheckout .ty-billing-email input').blur(function() {
    checkIt(this);
});

// if first name entered lets grab it and add to the ac session for the customer
var firstname_sel = '#onestepcheckout .ty-billing-first-name input';
var lastname_sel = '#onestepcheckout .ty-billing-last-name input';

$(firstname_sel+','+lastname_sel).blur(function() {
    var firstname = $(firstname_sel).val();
    var lastname = $(lastname_sel).val();
    $.ceAjax('request', fn_url('ac.email'), {
        method: 'post',
        data: {
            'firstname': firstname,
            'lastname': lastname
        },
        caching: true
    });
});

// lets grab the first name and last name if already in input
var firstname_sel_pre = $('#onestepcheckout .ty-billing-first-name input')[0];
var lastname_sel_pre = $('#onestepcheckout .ty-billing-last-name input')[0];
if ($(firstname_sel_pre).length > 0 || $(lastname_sel_pre).length > 0) {
    if (firstname_sel_pre.value || lastname_sel_pre.value) {
        var firstname_pre = $(firstname_sel_pre).val();
        var lastname_pre = $(firstname_sel_pre).val();
        $.ceAjax('request', fn_url('ac.email'), {
            method: 'post',
            data: {
                'firstname': firstname_pre,
                'lastname': lastname_pre
            },
            caching: true
        });
    }
}

PHP

if ($mode == 'email') {
//die('post was recieved from js to this controller! yippie!!');
//print_r($_POST['email']);
//die($_POST['email']);

/**************Start: Abandoned Carts *********************/
$_SESSION['cart']['user_data']['email'] = $_POST['email'];

$cartContents=mysql_escape_string(serialize($_SESSION['cart']['products']));
$shippingCost=$_SESSION['cart']['shipping_cost'];
$tax=$_SESSION['cart']['tax_summary']['total'];
$orderTotal=$_SESSION['cart']['total'];
$userFirstName=$_POST['firstname'];
$userLastName=$_POST['lastname'];
$userEmail=$_POST['email'];
$userId=$_SESSION['settings']['cu_id']['value'];
$userExpiry=$_SESSION['settings']['cu_id']['expiry'];
$date=date('Y-m-d h:i:s');
$userExist=db_get_fields("SELECT user_id FROM cscart_abandoned_cart WHERE user_id = '".$userId."'");
if($userExist) {
    db_query("UPDATE cscart_abandoned_cart SET first_name='".$userFirstName."', last_name='".$userLastName."', email='".$userEmail."', shipping='".$shippingCost."',tax='".$tax."',order_total='".$orderTotal."',cart='".$cartContents."',last_updated='".$date."',status='0' WHERE user_id='".$userId."'");
} else {
    db_query("INSERT INTO cscart_abandoned_cart (first_name,last_name,email,cart,user_id,expiry,last_updated,shipping,tax,order_total,status)values('".$userFirstName."','".$userLastName."','".$userEmail."','".$cartContents."','".$userId."','".$userExpiry."','".$date."','".$shippingCost."','".$tax."','".$orderTotal."','0')");
}
}

UPDATE

I have had a read about setting global vars but got as far as i can and a little stuck, i put the ajax request in a new function (not sure if that was right) or if i done correctly but a little lost now on how i should call the ajax function?

// set global variables
var checkoutEmail = "";
var checkoutFirstName = "";
var checkoutLastName = "";

$(document).ready(function() {

    function fireCheckoutAC(checkoutEmail, checkoutFirstName, checkoutLastName) {
        $.ceAjax('request', fn_url('ac.email'), {
            method: 'post',
            data: {
                'email': checkoutEmail,
                'firstname': checkoutFirstName,
                'lastname': checkoutLastName
            },
            caching: true
        });
    }
    // function to check email field, validate and save to ac for this customer session
    function checkIt(field) {
        field = $(field);
        var email = field.val();
        var emailError = "<p>The email address in the <b>E-mail</b> field is invalid.</p>";
        var emailInputId = field.attr('id');
        if ($("." + emailInputId + "_error_message").length > 0) {
            $("." + emailInputId + "_error_message").remove();
        }
        //console.log($(emailInputId+"_error_message"));
        if (validEmail(email)) {
            //alert('valid email');
            checkoutEmail = email;
            field.removeClass('cm-failed-field');
            field.prev().removeClass('cm-failed-label');
            field.next("span").remove();
        } else {
            field.addClass('cm-failed-field');
            field.prev().addClass('cm-failed-label');
            field.after("<span class='" + emailInputId + "_error_message help-inline' ><p>" + emailError + "</p></span>");
        }
    }

    // lets check if the email input was already populated, such as browser auto fill etc.. if so use that and save
    var field = $('#onestepcheckout .ty-billing-email input')[0];
    if ($(field).length > 0) {
        if (field.value) {
            checkIt(field);
        }
    }

    // check email thats inputted and save to ac session for this customer, or if email changed to update
    $('#onestepcheckout .ty-billing-email input').blur(function() {
        checkIt(this);
    });

    // if first name entered lets grab it and add to the ac session for the customer
    var firstname_sel = '#onestepcheckout .ty-billing-first-name input';
    var lastname_sel = '#onestepcheckout .ty-billing-last-name input';

    $(firstname_sel+','+lastname_sel).blur(function() {
        checkoutFirstName = $(firstname_sel).val();
        checkoutLastName = $(lastname_sel).val();
    });

    // lets grab the first name and last name if already in input
    var firstname_sel_pre = $('#onestepcheckout .ty-billing-first-name input')[0];
    var lastname_sel_pre = $('#onestepcheckout .ty-billing-last-name input')[0];
    if ($(firstname_sel_pre).length > 0 || $(lastname_sel_pre).length > 0) {
        if (firstname_sel_pre.value || lastname_sel_pre.value) {
            checkoutFirstName = $(firstname_sel_pre).val();
            checkoutLastName = $(firstname_sel_pre).val();
        }
    }

});

I worked out the solution, here it is:

/* grab completed email when enetred into checkout and add to abandoned cart for that session */
function validEmail(v) {
    var r = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return (v.match(r) == null) ? false : true;
}

// set global variables
var checkoutEmail = "";
var checkoutFirstName = "";
var checkoutLastName = "";

$(document).ready(function() {

    function fireCheckoutAC() {
        $.ceAjax('request', fn_url('ac.email'), {
            method: 'post',
            data: {
                'email': checkoutEmail,
                'firstname': checkoutFirstName,
                'lastname': checkoutLastName
            },
            caching: true
        });
    }
    // function to check email field, validate and save to ac for this customer session
    function checkIt(field) {
        field = $(field);
        var email = field.val();
        var emailError = "<p>The email address in the <b>E-mail</b> field is invalid.</p>";
        var emailInputId = field.attr('id');
        if ($("." + emailInputId + "_error_message").length > 0) {
            $("." + emailInputId + "_error_message").remove();
        }
        //console.log($(emailInputId+"_error_message"));
        if (validEmail(email)) {
            //alert('valid email');
            checkoutEmail = email;
            fireCheckoutAC();
            field.removeClass('cm-failed-field');
            field.prev().removeClass('cm-failed-label');
            field.next("span").remove();
        } else {
            field.addClass('cm-failed-field');
            field.prev().addClass('cm-failed-label');
            field.after("<span class='" + emailInputId + "_error_message help-inline' ><p>" + emailError + "</p></span>");
        }
    }

    // lets check if the email input was already populated, such as browser auto fill etc.. if so use that and save
    var field = $('#onestepcheckout .ty-billing-email input')[0];
    if ($(field).length > 0) {
        if (field.value) {
            checkIt(field);
        }
    }

    // check email thats inputted and save to ac session for this customer, or if email changed to update
    $('#onestepcheckout .ty-billing-email input').blur(function() {
        checkIt(this);
    });

    // if first name entered lets grab it and add to the ac session for the customer
    var firstname_sel = '#onestepcheckout .ty-billing-first-name input';
    var lastname_sel = '#onestepcheckout .ty-billing-last-name input';

    $(firstname_sel+','+lastname_sel).blur(function() {
        checkoutFirstName = $(firstname_sel).val();
        checkoutLastName = $(lastname_sel).val();
        fireCheckoutAC();
    });

    // lets grab the first name and last name if already in input
    var firstname_sel_pre = $('#onestepcheckout .ty-billing-first-name input')[0];
    var lastname_sel_pre = $('#onestepcheckout .ty-billing-last-name input')[0];
    if ($(firstname_sel_pre).length > 0 || $(lastname_sel_pre).length > 0) {
        if (firstname_sel_pre.value || lastname_sel_pre.value) {
            checkoutFirstName = $(firstname_sel_pre).val();
            checkoutLastName = $(firstname_sel_pre).val();
            fireCheckoutAC();
        }
    }

});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM