Pass jquery var to php via ajax?

Question

I have a form that is using php to email myself with enquiries. I have some jquery that is filling in details into a div,

How can I pass the Jquery var to PHP via ajax? (I've read that that is the best way?)

Here's how's it's emailing me with php:

<? if(isset($_POST['submit'])) { 

$to = "[email protected]";
$header = 'From: [email protected]';
$subject = "Quotation";
$enquiry_first_name = $_POST['enquiryfirstname'];
$enquiry_last_name = $_POST['enquirylastname'];
$enquiry_title = $_POST['enquirytitle'];
$enquiry_organisation = $_POST['enquiryorganisation'];
$enquiry_address = $_POST['enquiryaddress'];
$enquiry_country = $_POST['enquirycountry'];
$enquiry_email_address = $_POST['enquiryemailaddress'];
$enquiry_telephone = $_POST['enquirytelephone'];
$enquiry_additional_comments = $_POST['enquiryadditionalcomments'];

$body = "You have an quote request from the website:

Name: $enquiry_title $enquiry_first_name $enquiry_last_name 
Type of organisation: $enquiry_organisation 
Address: $enquiry_address, $enquiry_country
E-Mail: $enquiry_email_address 
Tel: $enquiry_telephone
Comments: $enquiry_additional_comments

Kind regards";

mail($to, $subject, $body, $header);

echo "Thank you for your enquiry.";

} ?>

Here's the jquery that is outputting data into a div:

function makeSummary() {
    var summary = [];
    $steps.not(":last").each(function (i, step) {
        $step = $(step);
        summary.push('<p><b>' + $step.data('name') + '</b></p>');
        var $ch = $step.find('input[type="checkbox"]:checked');
        if (!$ch.length) {
            summary.push('<p>No items selected</p>');
        } else {
            $ch.each(function (i, ch) {
                summary.push('<p>' + $(ch).val() + '</p>');
            });
        }
    });
    return summary.join('');
}

What's a 'jQuery var'? Which variable are you trying to pass? — Barmar
– Barmar, Commented Feb 11, 2013 at 15:46
@Trufa Ok maybe I didn't word that correctly! I want to use the jquery function, grab what that outputs and make that into a php variable. — Rob
– Rob, Commented Feb 11, 2013 at 15:48

gulty · Accepted Answer · 2013-02-11 16:03:19Z

3

1) Make a hidden input field. 2) Pass the jQuery var content to the hidden input field

$('.selector').change(function(){
    //replace the value here.
});

3) Get it in php with $_POST['hiddenname']

E: Here is an example: http://jsfiddle.net/yLuNu/4/

It's using a dropdown to store a value in a hidden field. You can use any output and store it inside of the hidden field.

E2: Since I didn't really get what you want to pass to the hiddenfield: If you have a function and only want the output to save inside the hiddenfield:

What exactly do you want to pass to your script? I saw a checkbox so I thought you wanna use the change func. In case you only want to return the output of a function

$('input#hiddenfield').val($VAR)

while var is the output of your function. Just add this at the end of your existing func..

edited Feb 11, 2013 at 16:03

answered Feb 11, 2013 at 15:50

gulty

1,0761 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rob Over a year ago

All makes sense apart from getting the jquery data into the hidden field, wow would I do that?

gulty Over a year ago

edit made. if you have a function and want the result, simply save the result inside a variable $VAR. use the $('#hiddenfield').val($VAR) to pass the variable.

Rob Over a year ago

Ok, I guess the real question is: in the question, the jquery block of code, how can I make a jquery var out of that, which I can then follow your steps.

gulty Over a year ago

you want this summary.join(''); in your hiddenfield I guess.. so $result = summary.join(''); and after that: $('input#hiddenfield').val($result); pretty easy..

Scriptlabs · Accepted Answer · 2013-02-11 16:29:24Z

Just use AJAX and render a hidden input to your form, before submitting it.

Javascript:

$.ajax({
    url:'/my/url',
    type: 'POST',
    dataType: 'json',
    data: {
        "some-var": "some-value"
    },
    context: $('form#my-form'), // now use $(this) inside event functions
    complete: function(jqXHR, textStatus) {
        console.log(jqXHR.responseText);
        //this function gets called every time (not only on success or error)
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR.responseText);
        //do something if call fails!
    },
    success: function(data, textStatus, jqXHR) {
        if(data && data.value) {
            if($(this).find("#my-field").length) {
                 $(this).find("#my-field").val(data.value);
            }
            else {
                $hidden = $("<input>")
                          .attr("type", "hidden")
                          .attr("name", "my-field")
                          .val(data.value);
                $(this).append($hidden);
            }
            //submit form 
            $(this).submit();
        }
    }
});

And you AJAX processing PHP File qould look like this.

PHP:

<?php
    $data = array(
        "value" => "default"
    );
    if($_POST["some-var"]=="some-value") {
        $data = array(
            "value" => "something"
        );
    }
    echo json_encode($data);
?>

Just to give you an idea how to solve this!

You will need to do some validation and filtering by yourself!

Collectives™ on Stack Overflow

Pass jquery var to php via ajax?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related