HTML Select Dropdown ID not passing to Javascript Function getelementbyid value is null

Question

Novice here, trying to demonstrate the value of client side rest operations to teammates as they rely on scripts and python. Not sure if it's the fact I'm using numbers for the value attribute or if I'm referencing the getelementbyid wrong. It's honestly probably none of those things :)

I've tried to explicitly reference an id assigned to the IP address in the getelementbyid for MakeUrl but it still fails. I also thought for a second it was null becasue it was using the default value but I commented it out and I still got the error.

Error:

Uncaught TypeError: Cannot read property 'value' of null (MakUrl Function)

function makeUrl() {
  var ip = document.getElementById("apigatewayip").value;
  return "https://" + ip + "/api/v0/sessions"
};

function createSession(_url) {
  return $.ajax({
    "url": _url,
    "method": "POST",
    "timeout": 0,
    "headers": {
      "Content-Type": "application/json"
    },
    "data": JSON.stringify({
      "gatewayVersion": "1.00.1.15"
    }),
  });
}

createSession(makeUrl());

createSession(makeUrl()).success(function() {

});

<h1>Making AJAX Rest Calls</h1>
<div class="custom-select" style="width:200px;">
  <select name="selectip" id="apigatewayip" onchange="makeUrl">
    <option value="" disabled selected>API Gateway IP</option>
    <option value="169.254.1.10">169.254.1.10</option>
  </select>
  <button onclick="createSession">Submit</button>
</div>

The code you've shown works: jsfiddle.net/bsrngqm6. Ensure it's this function causing the error, and that you're not re-using id values within the DOM. Also note that onchange="makeUrl" is redundant. — Rory McCrossan
– Rory McCrossan, Commented Apr 1, 2020 at 12:31
@RoryMcCrossan It doesn't, the functions referred in inline handlers are never called ... — Teemu
– Teemu, Commented Apr 1, 2020 at 12:33
Note that you're calling createSession twice in the code here. I'd remove the first call and change the second to use then instead of success, since success has been deprecated. — Heretic Monkey
– Heretic Monkey, Commented Apr 1, 2020 at 12:33
@Teemu correct, but they never would be, which is why I mentioned the onchange being redundant. The only way OPs code will run is if he calls makeUrl() directly, which is what the example does - and it works. — Rory McCrossan
– Rory McCrossan, Commented Apr 1, 2020 at 12:35
$("#apigatewayip").on("change",makeUrl) or $("#apigatewayip").on("change",function)( { makeUrl() }) - you are missing the () when you call but which you need to leave out when assigning — mplungjan
– mplungjan, Commented Apr 1, 2020 at 12:40

Anurag Srivastava · Accepted Answer · 2020-04-01 12:34:15Z

1

You need to set the handlers to call your function, not just assign:

<button onclick="createSession()">Submit</button>

Also, you can just create the url in the createSession function:

function createSession() {
  var ip = document.getElementById("apigatewayip").value;
  var _url = "https://" + ip + "/api/v0/sessions"
  console.log(_url) // Use this for ajax call
  /*$.ajax({
    "url": _url,
    "method": "POST",
    "timeout": 0,
    "headers": {
      "Content-Type": "application/json"
    },
    "data": JSON.stringify({
      "gatewayVersion": "1.00.1.15"
    }),
  });*/
}

<h1>Making AJAX Rest Calls</h1>
<div class="custom-select" style="width:200px;">
  <select name="selectip" id="apigatewayip">
    <option value="" disabled selected>API Gateway IP</option>
    <option value="169.254.1.10">169.254.1.10</option>
  </select>
  <button onclick="createSession()">Submit</button>
</div>

answered Apr 1, 2020 at 12:34

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rory McCrossan Over a year ago

If the getElementById() call doesn't work in the OP I don't see how this would address that problem

Anurag Srivastava Over a year ago

Seeing only OP's code its difficult to know how the functions are being called, as you said the on handlers are redundant

PA_Commons Over a year ago

I marked this as the answer because it does work. thank you.

Dickens A S · Accepted Answer · 2020-04-01 12:40:56Z

1

Wait for the document to render using document ready $(function() { }) and use jQuery, don't mix with legacy JavaScript selection

Use done callback instead of success

//Global function 1
function makeUrl() {
    var ip = $("#apigatewayip").val();
    return "https://" + ip + "/api/v0/sessions"
};
//Global function 2
function createSession(_url) {
  return $.ajax({
    "url": _url,
    "method": "POST",
    "timeout": 0,
    "headers": {
      "Content-Type": "application/json"
    },
    "data": JSON.stringify({
      "gatewayVersion": "1.00.1.15"
    }),
  });
}


//Wait until document fully render
$(function() {
   //After document render call the methods
   createSession(makeUrl());

   createSession(makeUrl()).done(function() {

   });
});

answered Apr 1, 2020 at 12:40

Dickens A S

4,0743 gold badges27 silver badges53 bronze badges

2 Comments

PA_Commons Over a year ago

Ok, so your code solved my original error, but it is now passing null to the url instead of the selected ip address: "OPTIONS null/api/v0/sessions net::ERR_NAME_RESOLUTION_FAILED"

Dickens A S Over a year ago

if that is the case your <select> has a different ID or you <select> tag does not exits or your <select> itself dynamically rendered

Collectives™ on Stack Overflow

HTML Select Dropdown ID not passing to Javascript Function getelementbyid value is null

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related