Getting value of input and passing along through querystring

Question

I'm attempting to get the value of text typed by a user in an input box but the problem is that instead of getting the value which the user has typed, I get the preset value of the input which is 'undefined'.

HTML

<input type="text" id="userInput" value="" name="title" 
       placeholder="Enter the name here" required="required"/>
<input type="button" id="text_value" value="Set Input"/>
   <!-- I have this button here because I think maybe 
    I should have a button to change default value but
    I don't know the javascript to do this -->

Javascript

// Gets input value id 

    var theuserInput = $("#userInput").val();

The reason I haven't shown query string code is because the input value is passed along in the url but the problem is that the default input value 'undefined' is passed instead of actual user input.

Any solutions?

ADDITIONAL CODE

Ok so here is the querystring, when you click the 'pass' button the input is passed along in querystring:

$('.pass').click(function() {
    window.location.href = 'http://lala.com/passing.php?input=' + theuserInput + '';
    return false;
});

What's the pass button? And when are you defining theuserInput? — ᔕᖺᘎᕊ
– ᔕᖺᘎᕊ, Commented Jan 18, 2015 at 10:38
I mean are you defining theuserInput within the click handler for the button text_value or somewhere else? If somewhere else, where exactly? If you are doing it on page load, the value is definitely going to be undefined. You need to make sure you are defining the variable when there actually is some text in the box. Or do you want a method of updating the variable whenever something is entered in the box? Please reply by using @ṧнʊß :) — ᔕᖺᘎᕊ
– ᔕᖺᘎᕊ, Commented Jan 18, 2015 at 11:09
Ok, taking a stab here, but remove the var theuserInput = $("#userInput").val(); wherever you've put it currently. Then, paste the code from the fiddle at the top of your document. It should work. — ᔕᖺᘎᕊ
– ᔕᖺᘎᕊ, Commented Jan 18, 2015 at 11:29

Stephan · Accepted Answer · 2015-01-18 11:41:35Z

3

Try this instead:

$('.pass').click(function() {
    var theuserInput = $("#userInput").val();
    window.location.href = 'http://lala.com/passing.php?input=' + theuserInput + '';
    return false;
});

The this is removed before the call to the val() method.

The reason why you get undefined is because theuserInput is not defined inside the anonymous function scope passed to #click method. The JS engine tries to find theuserInput inside the "englobing" scopes recursively until reaching the global scope or finding theuserInput value in one of the successive "englobing" scopes. Since, the variable theuserInput can't be found in any scope, it is affected the default value undefined.

edited Jan 18, 2015 at 11:41

answered Jan 18, 2015 at 10:29

Stephan

43.2k69 gold badges245 silver badges342 bronze badges

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

3 Comments

HaukurHaf Over a year ago

This code does work, provided there's not anything else wrong. I think you need to provide more code in your question.

ᔕᖺᘎᕊ Over a year ago

@KingAlfredChameleon See this fiddle. It does work.

David Knipe Over a year ago

Are you using $(document).ready(...)? ( api.jquery.com/ready .) If not, it will try to run your code before the page has loaded, and fail to find the .pass element.

krivtom · Accepted Answer · 2015-01-18 11:16:54Z

0

var theuserInput = document.getElementById("userInput").value;

edited Jan 18, 2015 at 11:16

krivtom

25k10 gold badges53 silver badges54 bronze badges

answered Jan 18, 2015 at 11:12

Rajan Chauhan

1,3831 gold badge15 silver badges33 bronze badges

2 Comments

KingAlfredChameleon Over a year ago

Doesn't work, the problem is that the input's default value is not being updated.

Danny Staple Over a year ago

That appears to be another way of stating var theuserInput = $("#userInput").val(); but without jquery - it adds nothing.

Collectives™ on Stack Overflow

Getting value of input and passing along through querystring

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