Using Javascript to pass an input value as a variable

Question

I'm using JavaScript to try and pass the value of a hidden input field as a variable into the url path below, but when I inspect the code, I'm seeing 'undefined' where I want the variable to be.

I would really like to get this issue solved. Any idea why the value is 'undefined' instead of the value of the hidden input field?

var userID = "";
userID = $('#userID').val();

document.write("<input type='hidden' id='userID'>");
document.write("<a href='http://sample/folder/" + userID + "/Documents/Forms/All.aspx'><li>test</li></a>");

Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? — Sebastian Simon
– Sebastian Simon, Commented May 11, 2016 at 13:56
As a start, your missing ; on line 1 and secondly #userID probably doesn't exists on your page. — andybeli
– andybeli, Commented May 11, 2016 at 14:00

R3tep · Accepted Answer · 2016-05-11 14:13:02Z

1

Your javascript can't find the value because your html is not created.

Try to create it, before getting the value.

document.write("<input type='hidden' id='userID' value='user1234'>");

var userID = "";
userID = $('#userID').val();
console.log(userID);

document.write("<a href='http://sample/folder/" + userID + "/Documents/Forms/All.aspx'><li>test</li></a>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited May 11, 2016 at 14:13

answered May 11, 2016 at 14:05

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

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

Comments

ykadaru · Accepted Answer · 2016-05-11 14:03:28Z

1

You're getting undefined because the input field doesn't have any value. Make sure you set a default value to the field so that even if nothing is entered into the field, you can still extract a value.

<input type='hidden' id='userID' value="defaultText"/>

Reference (JSFiddle): https://jsfiddle.net/e7zkhhny/ Side-note: It's usually a good idea to put a placeholder on an input field.

answered May 11, 2016 at 14:03

ykadaru

1,1432 gold badges18 silver badges32 bronze badges

Comments

bastos.sergio · Accepted Answer · 2016-05-11 14:07:13Z

1

You're trying to retrieve a value from an element that does not yet exist on the page. It will exist only after this statement runs document.write("<input type='hidden' id='userID'>");

To work around this,

1) Make sure that the javascript runs only after the hml loads using a $( document ).ready(function() {

$( document ).ready(function() {
    var userID = ""
    userID = $('#userID').val();

    $('#link').attr("href", "http://sample/folder/" + userID + "/Documents/Forms/All.aspx");
}

2) Place the following html on your site:

<input type='hidden' id='userID' value="0">
<a id='link' href=''><li>test</li></a>

answered May 11, 2016 at 14:07

bastos.sergio

6,7644 gold badges29 silver badges36 bronze badges

Collectives™ on Stack Overflow

Using Javascript to pass an input value as a variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related