Post javascript variables to separate .PHP file (Using Ajax?)

Question

I have two files, one runs calculations in PHP once and stores them into variables in javascript. The second file holds mySQL query to be sent to database. How can I send the javascript variables from the first file, too the second file and store them as variables.

-I am loading the second .php file using a .load() function. So it is not refreshing and re- directing to the second .php file.

Is this possible to do with out ajax? If it is only possible with ajax, how do you set it up (new to ajax) ?

$("#st").click(function()
{
var s = $("#st").val();
var a = $("#AA").val();
var t = ((s*1)*(a*1)+(a*1)*(1/3)).toFixed(2);
var c = (t*95).toFixed(2);
var text = $('#st').children("option:selected").text();
document.getElementById('Tim').innerHTML ='<p>'+ t +' </p>';
document.getElementById('Obj').innerHTML ='<p>'+ text +'</p>';
document.getElementById('Tot').innerHTML ='<p>$'+ c +'</p>';
});

var Customer = <?php echo json_encode($q);?>;
var Dr= <?php echo json_encode($o);?>;
var Pd = <?php echo json_encode($p);?>;
var Qp = <?php echo json_encode($a);?>;
var Qs = <?php echo json_encode($r);?>;
var Cam = <?php 
        if($Camera==1){
            $CameraOutput = "XL";
            echo "XL";
            }

        if($Camera==2){
            $CameraOutput = "SL";
            echo "SL";
            }
    ?>;

Getting data from a client (i.e. javascript) to the server (i.e. PHP) requires some form of connection, so you'll need a POST/GET/etc, which may or may not use AJAX. If you're question is really how to submit and process via AJAX, there's dozens of tutorials on that you can find online. If you get stuck with the implementation, show us some code, and we can try and help. — ernie
– ernie, Commented Jul 17, 2013 at 17:30

deacs · Accepted Answer · 2013-07-17 17:36:21Z

3

AJAX is an acronym for asynchronous JavaScript and XML. If you want to run your second php file without redirecting to it, you can use AJAX because it will run your second php file 'in the background'. AJAX with JQuery is extremely easy to use aswell.

Taken from http://api.jquery.com/jQuery.ajax/

Example: Save some data to the server and notify the user once it's complete:

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

answered Jul 17, 2013 at 17:36

deacs

4,3192 gold badges29 silver badges37 bronze badges

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

6 Comments

koolaid_Mixin_Jones Over a year ago

I understand this. BUT, I have two questions. First is "John" and "Boston" your variables you are posting? Second, how would I grab these variables on the second.php file?

deacs Over a year ago

@T.J. Crowder sorry, just thought that jQuery is exactly what he's looking for as it is a considerably easier than without it.

T.J. Crowder Over a year ago

@deacs: Yes, but if the person isn't using it, it's not useful. Of course, in this case, they are!!

T.J. Crowder Over a year ago

@user2592451: That's an important tag to put on your question. :-)

deacs Over a year ago

@user2592451 yes, in this case you can replace 'John' and 'Boston' with your own variables with their own 'names' (name and location in this case). In your php file you can grab the data with $_POST['name'] & $_POST['location']

|

T.J. Crowder · Accepted Answer · 2013-07-17 18:07:07Z

2

Edit: You mentioned in a comment on another answer that you're using jQuery, so I've edited the below.

Is this possible to do with out ajax?

Yes, but you probably don't want to. You'd do it by creating a form element, setting its action, setting its method, adding fields to it, and submiting it:

var form;
form = $("<form>")
    .attr("action", "/path/to/php/file.php")
    .attr("method", "POST");
$("<input type=hidden>")
    .attr("name", "fieldName1") // I'm assuming hardcoded field names
    .val(fieldValue1)           // And values coming from variables
    .appendTo(form);
$("<input type=hidden>")
    .attr("name", "fieldName2")
    .val(fieldValue2)
    .appendTo(form);
form[0].submit(); // Note the [0], so we're using `submit` on the actual HTMLFormElement

Note that the response will replace the current window.

If it is only possible with ajax, how do you set it up (new to ajax) ?

There are thousands of examples out there. :-) Here's another:

$.ajax({
    url:  "/path/to/php/file.php",
    type: "POST",
    data: {"fieldName1": fieldValue1, "fieldName2": fieldValue2},
    success: function() {
        // Called if the request succeeds
    },
    error: function() {
        // Called if the request succeeds
    }
});

edited Jul 17, 2013 at 18:07

answered Jul 17, 2013 at 17:31

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

4 Comments

MrCode Over a year ago

+1, I think you meant field.value = fieldValue1; and field.value = fieldValue2; instead of overwriting the name :)

koolaid_Mixin_Jones Over a year ago

What is the difference between your fieldName1 and fieldValue1? Also how do you locate these values in the second.php file?

T.J. Crowder Over a year ago

@MrCode: Oops! (Feel free to just fix that kind of thing. :-) )

T.J. Crowder Over a year ago

@user2592451: The field names are the names of the parameters you're sending to the PHP file. The values are the values of those parameters. So for instance, if you did field.name = "foo" and field.value = "foovalue, in your PHP $_POST["foo"] would be "foovalue". (And similarly if you use encodeURIComponent("foo") + "=" + encodeURIComponent("foovalue") instead, in the ajax example -- the bit before the = is the name, the bit after is the value).

Collectives™ on Stack Overflow

Post javascript variables to separate .PHP file (Using Ajax?)

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related