Member Avatar for Sorcher

Hello i am trying to make my Ajax fetch the right <input button value.
The <button is generated by PHP and will look like this.

<input type="button" value="Private" id="txtCustomerId" onclick="requestAlbumInfo()"/>
<input type="button" value="Public" id="txtCustomerId" onclick="requestAlbumInfo()"/>
<input type="button" value="Nature" id="txtCustomerId" onclick="requestAlbumInfo()"/>

My Ajax needs to fetch the value="" and send it to PHP. My ajax looks like this.

<script type="text/javascript"> 
        var url = "uimages_class.php?album="; // The server-side script 
       function handleHttpResponse() {    
        if (http.readyState == 4) { 
              if(http.status==200) { 
                  var results=http.responseText; 
              document.getElementById('divCustomerInfo').innerHTML = results; 
              } 
              } 
        } 
        
        function requestAlbumInfo() {      
            var sId = document.getElementById("txtCustomerId").value; 
            http.open("GET", url + escape(sId), true); 
            http.onreadystatechange = handleHttpResponse; 
            http.send(null); 
        } 
function getHTTPObject() { 
  var xmlhttp; 

  if(window.XMLHttpRequest){ 
    xmlhttp = new XMLHttpRequest(); 
  } 
  else if (window.ActiveXObject){ 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    if (!xmlhttp){ 
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    
} 
  return xmlhttp; 

  
} 
var http = getHTTPObject(); // We create the HTTP Object 
</script>

It does retrieve data to the <div id="divCustomerInfo"></div> but only the first button, in this case "Private"... Now i can see myself that its because the Ajax fetches one value by the element id "txtCustomerId", which all the generated buttons has.

But how can i make the Ajax fetch a value by the button clicked?
Some sort of array for the "txtCustomerId" id? i am really new with Ajax, would love some help.

  • 1 Contributor
  • 2 Replies
  • 138 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Sorcher

Dani AI

Generated

The underlying problem was duplicate IDs. getElementById always returns the first matching element, so having the same id on every button makes the script pick "Private" every time. As discovered, passing the clicked element (this.value) to the function sidesteps getElementById and fixes the symptom. That works, but there are cleaner and more robust patterns to use.

Prefer data attributes + event listeners (no inline onclick) and use encodeURIComponent when building query strings. Event delegation keeps markup small and works even when buttons are generated dynamically. Using the modern Fetch API simplifies the AJAX flow and makes error handling easier. Example pattern (HTML + JS) — buttons carry data-album, a container listens for clicks, and fetch requests the server with encodeURIComponent and a small cache-busting query:

<div id="albums">
  <button data-album="Private">Private</button>
  <button data-album="Public">Public</button>
  <button data-album="Nature">Nature</button>
</div>

<script>
document.getElementById('albums').addEventListener('click', function(e){
  var btn = e.target.closest('button');
  if (!btn) return;
  var album = btn.dataset.album;
  fetch('uimages_class.php?album=' + encodeURIComponent(album) + '&_=' + Date.now())
    .then(function(resp){ if (!resp.ok) throw new Error(resp.statusText); return resp.text(); })
    .then(function(text){ document.getElementById('divCustomerInfo').innerHTML = text; })
    .catch(function(err){ console.error('Request failed', err); });
});
</script>

If sticking with XHR, still avoid duplicate IDs, use encodeURIComponent (not the deprecated escape()), and inspect the browser console/Network tab for request details. Confirm the server expects a GET album parameter (or switch to POST), handle special characters server-side, and always validate/sanitize incoming values to prevent injection. If supporting very old browsers, include a fetch polyfill or fall back to XHR. For reference: encodeURIComponent and Using Fetch.

Member Avatar for Sorcher

The real question here is how can i do it something like this?:

the buttons:

<input type="button" value="FunnyAlbum" id="FunnyAlbum" onclick="requestAlbumInfo('FunnyAlbum')"/>

then fetch the string...and use it inside getElementById...

function requestAlbumInfo(string) {      
            var sId = document.getElementById(string).value; 
            http.open("GET", url + escape(sId), true); 
            http.onreadystatechange = handleHttpResponse; 
            http.send(null); 
        }
Edited by Sorcher because: n/a
Member Avatar for Sorcher

Well i solved this by modifying this:

function requestAlbumInfo(str) {      
            var sId = document.getElementById(string).value; 
            http.open("GET", url + str, true); 
            http.onreadystatechange = handleHttpResponse; 
            http.send(null); 
        }


onclick="requestAlbumInfo(this.value)"
Edited by Dani because: Formatting fixed
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.