I'm working with an api that requires specific ID numbers to retrieve certain objects. Right now I have a form for the user to manually enter an ID and on submission it GETs an object. But what I want is to have links to all the IDs instead so the user can just click and choose which object to retrieve. I'm not necessarily trying to make a GET request from the user click. I can make the GET request on the backend but I just need a way to determine which ID the user is trying to select. I have been searching and searching for a way to do this but I haven't found anything specific to my dilemma. I've read on having a hidden form or using AJAX but is there not a simpler solution? Is there not a way to where the PHP server can detect which link and ID is clicked to store it in a variable?
For example:
$lib->request('$ID.'/videos','GET');
retrieves a set of videos.
<button type ="button" id="23456" >Video Number 1</button> Is there a way that I could pass the id of the button above to php?
I'm really confused and I'm wondering if I'm over complicating this.
you can post data with XHR!
Here is a simple example using jQuery to post data
// URL,parameter,callback function,RT datatype
// just one example
$.post("/"+id+"/videos",{},
function(data){
console.log(data);
},
"text");//return datatype：json,html,xml,text
}
edited
you can get id by event
need to know:
only typeof ID === number triggered
$(document.body).on("mouseup",function(e){
var _e = e.target;
if(typeof _e.id !== "undefined" && !isNaN(+_e.id)){
var id = _e.id;
//trigger XHR last edited code
}
})
edited2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="123456" class="id-select">Video Number 1</button>
<button type="button" id="654321" class="id-select">Video Number 2</button><br>
<script src="path/jquery.js"></script>
<script>
$(function(){
$(document.body).on("mouseup",function(e){
var _e = e.target;
if(typeof _e.id !== "undefined" && !isNaN(+_e.id)){
var id = _e.id; //this id is you click button
//trigger XHR last edited code
/*
* @parma1 url
* @parma2 post parama
* @parma3 callback function
* @parma4 set return datatype
*/
$.post("/"+id+"/videos",{},
function(data){
console.log(data);
}, "text");//return datatype：json,html,xml,text
}
}
});
</script>
</body>
</html>
You need to use javascript for setting the users "id" choice (button) and then pass that id to your "backend" request/link once your ready.
Here is a simple example using jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" data-id="123456" class="id-select">Video Number 1</button>
<button type="button" data-id="654321" class="id-select">Video Number 2</button><br>
<br>
<button type="button" class="watch-video">Watch Video</button>
<br>
<div id="selected"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function(){
var id = 0;
$('#selected').html('You not selected the id yet.');
$('.id-select').click(function(){
id = $(this).data('id');
$('#selected').html('Selected video id: '+id);
});
$('.watch-video').click(function() {
window.location.href = '/'+id+'/videos';
});
});
</script>
</body>
</html>