Passing jQuery Variables to PHP

Question

I have an order form I'm working on, where I'm using jQuery to update the price in real time when the user selects different options. So, right now, the final project cost, package type, etc are set in jQuery variables, which I need to convert to PHP to insert into the database.

You can easily see the code: http://jsfiddle.net/cadengrant/uddPA/2/

And live preview of working code: http://www.htmlified.com/order-now/

function update_price() {
        var base_cost = base_price;
        var basic_price = base_price;
        var pro_price = base_price;

        jQuery('.packages .selected').each(function(index) {
            base_cost += jQuery(this).data("price");
            basic_price += base_cost;
            pro_price += base_cost + 70;
        });

        jQuery('#markup-pages').each(function(index) {
            var price = Number(jQuery(this).val());
            var packages = jQuery('.packages .selected').data("price");
            var pages = 0;

            jQuery('#packages .selected').each(function(index) {
                if(jQuery(this).hasClass('basic')) {
                    if(packages == 199) {
                        pages = price * 99 - 99;
                    } else if (packages == 189) {
                        pages = price * 94 - 94;
                    } else if (packages == 399) {
                        pages = price * 199 - 199;
                    }
                } else if (jQuery(this).hasClass('pro')) {
                    if(pro_price == 269) {
                        pages = price * 134 - 134;
                    } else if (pro_price == 259) {
                        pages = price * 129 - 129;
                    } else if (pro_price == 469) {
                        pages = price * 234 - 234;
                    }
                }
            });

            base_cost += pages;

            /* Single or plural page text */
            if(price == 1) {
                var markup_pages = "markup page";
            } else {
                var markup_pages = "markup pages";
            }
            jQuery('.markup-pages').text(markup_pages);
        });

        jQuery('#packages .selected').each(function(index) {
            if(jQuery(this).hasClass('pro')) {
                base_cost += 70;
            }
        });

        /* Update Doctype */
        jQuery('input[name=page_doctype]:checked', '#order-form').each(function(index) {
            var basic_doctype_text = "";
            var pro_doctype_text = "";
            if(jQuery(this).hasClass('doctypehtml')) {
                var doctype_text = "W3C Valid HTML5 & CSS3";
            } else if (jQuery(this).hasClass('doctypexhtml')) {
                var doctype_text = "W3C Valid XHTML1 & CSS2";
                basic_doctype_text += " Transitional";
                pro_doctype_text += " Strict";
            }

            jQuery('.doctype-text').html(doctype_text);
            jQuery('.basic-doctype').html(doctype_text + basic_doctype_text);
            jQuery('.pro-doctype').html(doctype_text + pro_doctype_text);
        });

        jQuery('.price').html(base_cost);
        jQuery('.basic-price').html(basic_price);
        jQuery('.pro-price').html(pro_price);
    }

I just need to figure out how to pass those variables (doctype text, basic doctype, pro doctype, base_cost, etc etc) in the JS section to my order.php form, so I can update amount paid, the package type they selected, etc. Any help would be greatly appreciated.

Answer 1

You already have a form in your page. I suggest you create hidden inputs in this form to be submitted with the form. Ex :

<input type="hidden" name="base_cost" value="999">

and you can adjust the value easily with jquery. After submitting the form to the php page you can capture these values using :

$base_cost = $_POST['base_cost'];

But don't forget to sanitize and validate every input from the user. Hope this helps and excuse my English.

Answer 2

You are looking for a way to tell the Server information from the User? That my friend, without sending the form and without using ajax, will be hard :)

If I am understanding the issue properly, you want some parameters to change in Client side when user triggers some action. In that case you could load the possible parameters on page load and, when user triggers those actions, get the new parameters from those already loaded. Then when you send the form you add to it the selected parameters.

Hope it helps!