Passing a HTML variable to PHP File

Question

I have the following in my HTML file:

<div class="panel-body panel-refine">
<span id="price-left" class="price-left pull-left" data-currency="&euro;">500</span>
<span id="price-right" class="price-right pull-right" data-currency="&euro;">5000</span>
<div class="clearfix"></div>

The variable price-left and 'price-right' comes from a JavaScript slider.

$(document).ready(function(){

        var slider2 = document.getElementById('sliderRefine');

        noUiSlider.create(slider2, {
            start: [2000, 3000],
            connect: true,
            range: {
               'min': [30],
               'max': [5000]
            }
        });

        var limitFieldMin = document.getElementById('price-left');
        var limitFieldMax = document.getElementById('price-right');
  var xhr;
  slider2.noUiSlider.on('update', function( values, handle ){
      if (handle){
              limitFieldMax.innerHTML= $('#price-right').data('currency') + Math.round(values[handle]);
              document.getElementById("hoogsteprijs").innerHTML = Math.round(values[handle]);
      } else {
              limitFieldMin.innerHTML= $('#price-left').data('currency') + Math.round(values[handle]);
              document.getElementById("laagsteprijs").innerHTML = Math.round(values[handle]);
      }

      // Abort the previous asynchronous ajax call in case it hasn't finished loading
      if(xhr && xhr.readyState != 4){
          xhr.abort();
      }

      xhr = $.ajax({
          url: 'search.php',
          type: 'GET',
          data:{
              minPrice: document.getElementById("laagsteprijs").innerHTML,
              maxPrice: document.getElementById("hoogsteprijs").innerHTML
          },
          success:function(response){
              // do something with response from search.php

          }
      });
        });
    });

I like to pass "laagsteprijs" and "hoogsteprijs" to a search.php file that I call in a HTML file with the folowing:

<iframe width="100%" height="720" src="search.php?q=category%3AFietsen&page=1&sort=priceAsc&minPrice="laagsteprijs"&maxPrice="hoogsteprijs"" style="border:none;"></iframe>

Possible duplicate of [How to pass JavaScript variables to PHP?](https://stackoverflow.com/questions/1917576/how-to-pass-javascript-variables-to-php) — Obsidian Age, Oct 09 '17 at 00:53
You have to `$_POST` the JavaScript variable to PHP. Also, StackOverflow isn't a free code-writing service, and expects you to [**try to solve your own problem first**](http://meta.stackoverflow.com/questions/261592). Please update your question to show what you have already tried, showcasing a **specific** problem you are facing in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). For further information, please see [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour). — Obsidian Age, Oct 09 '17 at 00:54

score 0 · Answer 1 · answered Oct 09 '17 at 03:33

Use jQuery $.ajax function to pass data to your search.php script for every slider update:

var xhr;
slider2.noUiSlider.on('update', function( values, handle ){
    if (handle){
            limitFieldMax.innerHTML= $('#price-right').data('currency') + Math.round(values[handle]);
            document.getElementById("hoogsteprijs").innerHTML = Math.round(values[handle]);
    } else {
            limitFieldMin.innerHTML= $('#price-left').data('currency') + Math.round(values[handle]);
            document.getElementById("laagsteprijs").innerHTML = Math.round(values[handle]);
    }

    // Abort the previous asynchronous ajax call in case it hasn't finished loading
    if(xhr && xhr.readyState != 4){
        xhr.abort();
    }

    xhr = $.ajax({
        url: 'search.php',
        type: 'GET',
        data:{
            minPrice: document.getElementById("laagsteprijs").innerHTML,
            maxPrice: document.getElementById("hoogsteprijs").innerHTML
        },
        success:function(response){
            // do something with response from search.php
        }
    });


});

Thank you for your reply. I'm going to try this week. I will let you know the result. Gr. Jim — Jim Meijer, Oct 23 '17 at 11:58
Thank you for your reply. I have changed my question according you're answer. I do not now how to reply otherwise. This seems to be the most obvious solution. Gr. Jim — Jim Meijer, Oct 23 '17 at 13:25

Passing a HTML variable to PHP File

1 Answers1