trying to add form input to url for GET request-CodePudding

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;
      }

CodePudding user response：

<!-- user .value() after getElementById to get value of that selected element -->

<input type="text" id="year">
<input type="submit" id="btn">

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

CodePudding user response：

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.