Returning php variable with ajax form

Question

What I need help with is to get the success to set the PHP variable, so that the #result div gets a value (not a JavaScript .html thing, I need it to set the PHP variable).

Is this possible without setting a new URL with the PHP variable?

In other words, can I send a JavaScript variable to PHP variable without doing this:
send javaScript variable to php variable

HTML

<div id="hidden_slidersize"></div>
<script type="text/javascript">
    $(function(){
        if ($('body').width() >= 960) {
            var sizeOfSlider = 500;
            } else {
            var sizeOfSlider = ($('body').width())/2;
            }
        $('#hidden_slidersize').html('<form id="dataform" method="post" name="hiddentrick_form" action="data.php"><fieldset><input id="hiddentrick" name="hiddentrick" type="hidden" value="' + sizeOfSlider + '" /><input class="datasubmit" type="submit" value="senddata" /></fieldset></form>');  

    });
</script>

<div id="result"><?php echo $sizeofslider ?></div>

Form Javascript

$(document).ready(function() {

$(document).on('submit', 'form#dataform', function () { 

$.ajax({  
  type: 'POST',  
  url: 'data.php',  
  data: $('#dataform').serialize(),
  dataType:'html',  
  success: function(data) {alert(data);},
  error: function(data) {
  //AJAX request not completed
  alert('error');
  }
});  
return false;  

  });
});

Form php

<?php
if( isset($_POST) ){

    $sizeofslider = $_POST['hiddentrick'];
    echo $sizeofslider;
}
?>

UPDATE

It seems like I didn't explain clearly enough. What I need to do is to make a javascript variable into a php variable and then calculate with it.

Here's the calculation that comes after:

<?php 

$czes = array(
                    'sort_order' => 'desc',
                    'sort_column' => 'post_date',
                    'hierarchical' => 1,
                    'exclude' => '',
                    'include' => '',
                    'meta_key' => '',
                    'meta_value' => '',
                    'authors' => '',
                    'child_of' => 4,
                    'exclude_tree' => '',
                    'number' => '',
                    'offset' => 0,
                    'post_type' => 'page',
                    'post_status' => 'publish'
                    ); 
                    $pages = get_pages($czes); 

                    foreach ($pages as $page) { ?>

        <?php $postmetapic1 = get_post_meta($page->ID, 'pic1', true); ?>
        <?php $postmetapic2 = get_post_meta($page->ID, 'pic2', true); ?>
        <?php $postmetapic3 = get_post_meta($page->ID, 'pic3', true); ?>

        <?php
        $holder_width_first=0;
        if (!empty($postmetapic1)) {$holder_width_first++;}
        if (!empty($postmetapic2)) {$holder_width_first++;}
        if (!empty($postmetapic3)) {$holder_width_first++;}
        $holder_width= $holder_width_first*$sizeofslider;
        ?>

        <div id="s_sli_hol_<?php echo $page->ID ?>" class='slider_holder small_slider_holder' style="width: <?php echo $holder_width ?>px">Here's the img-tags</div>
                    <?php } ?>

if you want to set the result to php then you have to submit it — SarathSprakash, Aug 13 '13 at 15:51
Yes, of course. My plan is to auto submit later on, but right now I still doesn't get the #result to show any content - which is not wierd, because the php is set when the page starts. I need to do some kind of refresh, I guess, but I don't want to change the seen url. — Rhyder, Aug 13 '13 at 15:56
Why do you need to send the data to php? You can only set the size of the slider with javascript. — L105, Aug 13 '13 at 16:13
Yes, but I got a lot of sliders, and I go through them with foreach in php. Each slider has a different set of pictures in them, so I need to calculate this constant for each to calculate with. — Rhyder, Aug 13 '13 at 16:18
No, I need to set the php variable before the php calculates the size of each slider. — Rhyder, Aug 13 '13 at 16:28

SarathSprakash · Answer 1 · 2013-08-13T17:32:36.300

0

Try this. I have found a solution for your problem

Add this to your html page

<form id="TheForm" method="post">
<input type="hidden" name="something" id="hi"/>
</form>

I have changed a bit of your jquery code

$(document).ready(function() {

$(document).on('submit', 'form#dataform', function () { 

$.ajax({  
  type: 'POST',  
  url: 'data.php',  
  data: $('#dataform').serialize(),
  dataType:'html',  
  success: function(data) {
   alert(data);
   document.getElementById("hi").value=data;
},
  error: function(data) {
  //AJAX request not completed
  alert('error');
  }
}).done(function() {
  $("#TheForm").submit();
});  
return false;  

  });
});

then in your div #result

<div id="result"><?php  $sizeofslider= $_POST["something"]; $echo $sizeofslider  ?></div>

Hope this helps, thank you

edited Aug 13 '13 at 17:32

answered Aug 13 '13 at 17:05

SarathSprakash

4,614
2
19
35

I checked it is working . there is no change in your url.since it is a post request. Try this and check whether it meets your requirement – SarathSprakash Aug 13 '13 at 17:08
Sorry @SarathSprakash, but I think (havn't tried) this won't work either. Please check my update. – Rhyder Aug 13 '13 at 17:17
you just wanted to set the ajax response to a php variable . That is what I have done . – SarathSprakash Aug 13 '13 at 17:29
check what you have specified in your first few lines. – SarathSprakash Aug 13 '13 at 17:31

cssyphus · Answer 2 · 2013-08-13T16:15:59.667

First, no need to use the archaic <form> and posting of forms, when you are also using AJAX. So I removed all that. Makes it much simpler.

Next, you need a way to store the value on the server, and to access it again later. One method is to use PHP Sessions (the $_SESSION variable).

Note that I changed the name of your PHP processor file to your_php_file.php. Change it as you wish, but make sure to change it in all locations (filesystem, ajax1 and ajax2).

Here is a working example that will do what you want.

HTML and javascript/jQuery:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                if ($('body').width() >= 960) {
                    var sizeOfSlider = 500;
                } else {
                    var sizeOfSlider = ($('body').width())/2;
                }

                $.ajax({  
                    type: 'POST',
                    url: 'your_php_file.php',  
                    data: 'hiddentrick=' +sizeOfSlider,
                    dataType:'html',  
                    success: function(data) {alert(data);},
                    error: function(data) {
                        //AJAX request not completed
                        alert('error');
                    }
                });

                $('#mybutt').click(function() {
                    $.ajax({  
                        type: 'POST',
                        url: 'your_php_file.php',  
                        data: 'showss=yes',
                        dataType:'html',  
                        success: function(data) {
                            alert(data);
                            $('#result').html(data);
                        },
                        error: function(data) {
                            //AJAX request not completed
                            alert('error');
                        }
                    });
                });

            }); //END $(document).ready()
        </script>
    </head>
<body>

    <div id="result"><?php echo $sizeofslider ?></div>
    <input type="button" id="mybutt" value="Show PHP var"/>

</body>
</html>

your_php_file.php

<?php
    session_start();

    if( isset($_POST) ){
        if (isset($_POST['showss'])) {
            echo 'Hidden value: ' . $_SESSION['sos'];
        }else{
            $sizeofslider = $_POST['hiddentrick'];
            $_SESSION['sos'] = $sizeofslider;
            echo $sizeofslider;
        }
    }else{
        echo 'No POST data';
    }

It's true, I need to send the variable back to the server before the php loads, and maybe $_SESSION will do that, though this is not the right way. $('#result').html(data); will write over and post the correct result, but I won't be able to do calculations with $sizeofslider in the rest of my php. — Rhyder, Aug 13 '13 at 17:01

Returning php variable with ajax form

2 Answers2