AJAX to pass variable from range slider into PHP query

Question

I am trying to pass a javascript variable from a range slider into a php query.

So when the user slides range slider to '44', the front-page of my wordpress theme shows all posts tagged '44'.

I want to do this without refresh, so decided to try AJAX, which I'm very new to and struggling to see where I'm going wrong.

So my range slider:

<input id="ex2" type="range" min="0" max="360" step="1" />

In my script.js:

var slider = document.getElementById("ex2");

slider.onchange = function() {
   
var id = $(this).val();

$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost/wordpress/wp-admin/admin-ajax.php", 
data: {
    action:'get_data', 
    id: id
},

success:function(data) {
alert("result: " + data);
}
});
};

I am then bouncing this value via my functions.php page.. which maybe I can avoid and go straight to my front-page? Code from my functions.php page:

 function get_data() {

    echo $_POST['id'];
    wp_die();  //die();
}

add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );

And then trying to input into my php query on front-page.php:

<?php

$slider   = $_POST['id'];

$query    = new WP_Query( array( 'tag' => $slider ) );

if ( $query->have_posts() ) :

while ( $query->have_posts() ) : $query->the_post();?>

    <?php the_content();?>

<?php endwhile; endif;?>

I'm very new to PHP and AJAX, not fully understanding the post or echo functions, if someone could help me with my code would be amazing.

Thanks !

We had an extended discussion about this already when you asked about this yesterday - [Dificulty recalling range slider variable from an Ajax post to use within php query on front-page of wordpress site](https://stackoverflow.com/questions/64117752/dificulty-recalling-range-slider-variable-from-an-ajax-post-to-use-within-php-qu) — 04FS, Sep 30 '20 at 10:28
I already tried to explain to you there, that your current approach does not make much sense, yet I see you trying the same thing here again. — 04FS, Sep 30 '20 at 10:29
hey, you didn't really explain any alternatives, or clearly explain to me why what I'm trying doesn't make sense. I see other questions trying to achieve a similar thing, and from my research using AJAX seems to be the best posibility, but I am new to it and understand I am probably making big mistakes, but I am looking for some guidance of how to write the code correctly, yesterday you were just quoting me back to myself to try emphasise I didn't know what I was doing. I don't know what I'm doing, that's why I'm on here asking questions. I'm in the chat room from yesterday ! — joehigh1, Sep 30 '20 at 10:35
Yes, I _did_. For starters, I explained to you, that the POST parameter you send via AJAX, will _not_ be available when you request your front page afterwards, because those are two different, independent requests. And with https://chat.stackoverflow.com/transcript/message/50569445#50569445 ff., I also gave you alternative approaches to pursue already. If you are proving now, that such explanations apparently seem to fall on deaf ears with you, that doesn’t exactly motivate me to deal with your problem again now. — 04FS, Sep 30 '20 at 10:41
but submitting the range slider value via a form would require a page refresh? which I want to avoid . How do I pass it into my php with a $_POST ? — joehigh1, Sep 30 '20 at 10:54
That was for the case, where you are not _on_ the front page to begin with. If you change that slider value in the footer of _another_ page, then you want to go to the front page afterwards, to see the current results there, right? So it does not make much sense to use AJAX then in the first place, submitting the form directly _to_ the front page is a much simpler option then. — 04FS, Sep 30 '20 at 10:56
lets forget the slider being in the footer for now, just to think of it as one page. How do I pass the javascript variable into the php query? Using a $_POST? — joehigh1, Sep 30 '20 at 11:02
Yes, the values of parameters send via POST method, can be accessed via $_POST in PHP. (But these are basics you are asking about now. That is stuff you should learn from a beginner tutorial, rather than having us explain them to you.) — 04FS, Sep 30 '20 at 11:05
This is the _fifth_ time you have asked about this here by now, since September 22nd. Please stop creating ever new questions about the same topic - and see the discussion of your problem through to the end, in one place. Adding _“Question moved to here […] With most recent edit !!”_ to your existing questions is not helpful to anyone, especially if those “most recent” edits are not in fact the most recent ones after a while, because you created _yet another_ version of the question in the mean time. — 04FS, Sep 30 '20 at 11:07
If it is such a basic problem then it would be amazing if you could take 2 mins to submit a clear answer of how to solve what I'm trying to do. https://stackoverflow.com/a/8191134/1921833 I need to be doing this? $.post('http://localhost/wordpress/wp-admin/admin-ajax.php', {id: id}); in my script.js javascript , and then $variable = $_POST['id']; on my front-page php? — joehigh1, Sep 30 '20 at 11:15
No, and I already explained why. These are two separate requests. A value you send with the first request, will not be available when you are processing the second one. — 04FS, Sep 30 '20 at 11:23
because it hasn't been logged? console.log? if you could just answer the question this would be a lot easier, i feel like you understand what I'm trying to do, and where I'm going wrong. Would be great if you could just show me — joehigh1, Sep 30 '20 at 11:27
No, this has nothing to do with any client-side logging. _“Would be great if you could just show me”_ - this simply _is_ a more complex topic, than you apparently are currently able to imagine. I can try and give you hints, but I am not going to write the complete thing _for you_. — 04FS, Sep 30 '20 at 11:43
Yes. But you need to add a `name` to the input field, if you want to be able to access the value via `$_POST`. — 04FS, Sep 30 '20 at 11:49
but them I need to add a .onchange = function() to my range slider in Javascript? Or it just submits the data automatically? I'm not seeing anything in my HTTP requests.. (have added name) — joehigh1, Sep 30 '20 at 11:58
Yes, for an automatic submit, you will need to add an event handler. In the most primitive form, that can be `onchange="this.form.submit()"` directly on the input field, that should already do it. (How to properly do that using jQuery event handling and from within the script file of your theme, is something you can figure out later.) — 04FS, Sep 30 '20 at 12:07

score 0 · Answer 1 · answered Sep 30 '20 at 12:54

It is with the page refresh, but got it working with the POST parameter, don't need any extra code in scripts.js, or functions.php, just on my front-page and for the range slider (in my footer):

My range slider code:

<form action="http://localhost/wordpress/" method="POST">
<input id="ex2" name="ex2" onchange="this.form.submit()" 
type="range" min="0" max="360" step="1" />
</form>

On my front-page:

<?php

$slider = $_POST['ex2'];

$query    = new WP_Query( array( 'tag' => $slider ) );

if ( $query->have_posts() ) :

while ( $query->have_posts() ) : $query->the_post();?>

    <?php the_content();?>

<?php endwhile; endif;?>

And is working !

Ashok · Answer 2 · 2020-09-30T14:33:39.400

Try Something like this...

<script src="jquery.js"></script>
<form action="#" method="POST">
<input id="ex2" name="ex2" onchange="this.form.submit()" 
type="range" min="0" max="360" step="1" />
</form>
<script>
var slider = document.getElementById("ex2");
slider.onchange = function() {
    var id = $(this).val();
    var Url = "http://localhost/test2.php?func=myFunc";
    $.ajax({
        type: "POST",
        dataType: "json",
        url: Url,
        data: {
            id: id
        },
        success:function(data) {
        // alert("result: " + data);
        console.log(data);
        }
    });
};
</script>

test2.php

<?php
function myFunc($id)
{
    echo $id;
}
if(isset($_GET['func']) && function_exists($_GET['func'])){
    if($_GET['func'] == 'myFunc') { 
        if(isset($_POST['id'])){
            $_GET['func']($_POST['id']);
        }
    }
}
?>

AJAX to pass variable from range slider into PHP query

2 Answers2