Attempting to include form input in the URL for a GET request

Question

Attempting to include form input in the URL for a GET request

I'm trying to figure out how to include an object at the end of my URL, but for some reason $year isn't getting 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;
      }

javascript ajax get

Answer 1

Answer №1

To retrieve the value of a selected element, use the value() function after getElementById.

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

Answer 2

To retrieve the value of a selected element, use the value() function after getElementById.

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

Answer 3

Answer №2

Consider this approach:

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

The issue may have been that you were not retrieving the value of the input field, but rather just selecting the element.

You were using:

document.getElementById("year")

which returns the element. Instead, use

document.getElementById("year").value

to get the value from the text box.

Answer 4

Consider this approach:

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

The issue may have been that you were not retrieving the value of the input field, but rather just selecting the element.

You were using:

document.getElementById("year")

which returns the element. Instead, use

document.getElementById("year").value

to get the value from the text box.

Attempting to include form input in the URL for a GET request

Answer №1

Answer №2

Similar questions

Middleware Error: JSON.stringify cannot serialize circular data structure

A double click is required to enable the connected mouse press/release action

jQuery Side Panel with built-in back button support

How can I securely display raw HTML code in a textarea for CKeditor usage?

Encountering a blank page and error message on Vue JS while attempting to generate a JSON file within the

ways to transmit text data to the server without triggering form submission through ajax

The save changes feature is not effectively syncing with the database

Generate a unique JavaScript object without any redundancy

Avoid activating automatic save feature in Material UI data grid

Issue with CodeIgniter 2.1 form_validation library when using ajax

Horizontal Scrolling Menu for Dynamic Page Navigation

Combine all clicks into a single document instead of creating separate documents for each click

Add a CSS class to the main document via an iframe

What is the best way to handle a single promise from a shared listener?

saving selected values to the database

JavaScript function to add or remove a class upon clicking

AngularJS testing typically involves the use of the inject module injection process

Having trouble retrieving data from Laravel's JSON response object

Connections between Ember and mongo databases

Validating forms in React with Material-UI using hooks