Returns the php variable with the ajax form

advertisements

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 } ?>


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