Grab Input Value and Use it in functions.php as an Attribute - php

Question

I have a range slider and I want to use the value from that slider in my wordpress functions.php file as an attribute for an already written shortcode function. Basically, it will be a choice of distance from a point. I just need to make the existing distance attribute variable and connected to the range slider which will re-execute the function on submit. I'm very lost on this so any help is appreciated. Thank you!

Answer 1

There are a couple of different ways to do this really, depending on whether or not you want a page reload when they submit.
Method 1 - Pass the range value as a url variable
Submit the value of the form onto the page and then reload it with this data:
<form id="distance-form" action="<?php the_permalink() ?>" method="get">
<input type="range" min="0" max="5000" value="0" id="distance">
</form>
and then elsewhere on the page you might have the shortcode function which would include the distance value if set.
e.g.
function example_shortcode(){
$distance = intval($_GET['distance']); //Get the url value of distance
if(!$distance || $distance < 0){ //Or set to zero if not a valid value
$distance = 0;
}
// Then do whatever we need with the function
}
Method 2 - Use AJAX
We can use a similar method but with AJAX instead, which would need a similar PHP function and a JS function to make the AJAX call.
I'd recommend reading up on AJAX if it's not something you're familiar with, https://premium.wpmudev.org/blog/using-ajax-with-wordpress/ is pretty good.
You'd probably end up with something like the following for the js:
$("#distance-form").submit(function(event){
event.preventDefault();
jQuery.ajax({
url : localisedVars.ajax_url,
type : 'post',
data : {
action : 'function_name',
distance : $("#distance").val()
},
success : function( response ) {
/*Return the shortcode response from our PHP ajax call, we can then put it somewhere on the page*/
}
})
and
add_action( 'wp_ajax_nopriv_function_name', 'function_name' );
add_action( 'wp_ajax_function_name', 'function_name' );
function function_name() {
$distance = intval($_POST['distance']); //Get the ajax posted value of distance
if(!$distance || $distance < 0){ //Or set to zero if not a valid value
$distance = 0;
}
// Then do whatever we need with the function
echo $response //gets passed to the js function above
die();
}