trying to add form input to url for GET request

Question

How do i go about adding an object onto the end of my url address , at the moment $year is not added to the GET request.

    <input type = "text" id="year">
            <input type = "submit" id="btn">
    
    <script >
    
    document.getElementById("btn").addEventListener("click", function() {
           
            var $year = document.getElementById("year");
            request = new XMLHttpRequest();
            request.open("GET", "https://mudfoot.doc.stu.mmu.ac.uk/node/api/halloffame?year="+$year, true);
            request.send(null);
    
            
        }
        return val;
      }

Answer 1

Try using:

document.getElementById("btn").addEventListener("click", function()
{
  var $year = document.getElementById("year").value;
  request = new XMLHttpRequest();
  request.open("GET", "https://mudfoot.doc.stu.mmu.ac.uk/node/api/halloffame?year=" + $year, true);
  request.send(null);
}

I think what your problem was is that you weren't getting the value of the input, you were just selecting the element.

You were doing: document.getElementById("year") which gives you the element. But you need to do document.getElementById("year").value which gives you the value of the text box.