Get User Input From Form Field

[sunziun]

Hi, I got a form which I use to take payments via PayPal. All is setup but one form field. To write the "item_name" for PayPal i use this piece of code:

document.getElementById('item').value = "Week: " + week + ", Load: " + loading + ", Add. Hours: " + chours + ", Dest: " + postcode

Selection fields are: week, loading and chours postcode is an input field, type text I want to get the postcode entered by the user into the item field and use it as the item_name for PayPal. I tried

pcode = document.getElementById('postcode') postcode =pcode.value postcode = document.FormName.ElementName.value

and more other suggestions form the internet, but none is working.postcode is always empty or undefined form field is: <input type="text" id="postcode" name="postcode" required /> Please someone help me out!

Edited March 8, 2013 by sunziun

[jeffman]

I notice some typos here. If this is true copy/paste, that may be your problem. If not, maybe not, but I figured we should know about that first.

pcode = document.getElementById('postode')postocde =pcode.value

Edited March 8, 2013 by Deirdre's Dad

[sunziun]

Hi, thanks Deirdre's Dad. This typos occurred just now while I was writing this post (already amended).So I think there is something else wrong.

[jeffman]

Well, both of those should work. Do you have a live link to the page? Failing that, you may need to post more code.

[sunziun]

Hi, here is the live link: http://easygoremovals.co.uk/book_now/

[justsomeguy]

var pcode = document.getElementsByName('postCode').value Use getElementById, not getElementsByName.

[sunziun]

Hi, if I set the input field like this:

<input type="text" id="postCode" placeholder="example: 25-NW23ED" value="Test postCode" required />

then I get the required results. But this is only if I preset the value. I don't to preset the value. I need the user to enter the postcode in this field and javascript should catch the entered values. This

var pcode = document.getElementById('postCode').value

catches only preset values. Many thanks for any suggestions!

[Don E]

Try removing value="Test postCode". Then whatever the user enters in that input field, the value then should be retrievable by having: var pcode = document.getElementById('postCode').value

[justsomeguy]

If it doesn't pick up what the user enters then it sounds like you're running your code to get the value before the user has entered it. You need to get all of the values after the user fills everything in, when they click a submit button or something.

[sunziun]

This is the live code now and its still not working, which means I'm not getting the value entered by the user:

<label>Destination House Number & Postcode</label><input type="text" id="postCode" name="postCode" value="" required />// Destination postcodevar pcode = document.getElementById('postCode').value// PayPal Item Namedocument.getElementById('item').value = "Dest: " + pcode + ", Week: " + week + ", Load: " + loading + ", Add. Hours: " + chours

Edited March 11, 2013 by sunziun

[justsomeguy]

Well, I see 2 lines of HTML and 2 lines of Javascript. I can't tell anything else from that. Again, if it is not getting the current value of the field, then you are not running that code after they entered the value. Obviously you need to get the value after they enter it, it's not going to do anything if you get the value before they type something.

[sunziun]

So, what do you suggest?

[justsomeguy]

Wherever the code is that sets the value for the item element, it needs to get all of the current values from the form before it sets the new value.

[thescientist]

So, what do you suggest?

If it doesn't pick up what the user enters then it sounds like you're running your code to get the value before the user has entered it. You need to get all of the values after the user fills everything in, when they click a submit button or something.

In other words, you need to listen for some sort of event, say the forms submit event, in order to handle the users input. It should be easy to find with some minor google searching.

[jeffman]

FWIW The code DOES listen for the onchange event of 3 select elements. One possible problem is that the event handler accesses the value of the text input whether there is anything there or not. I suspect this is why OP initializes the value to "" in the input tag. OTOH, when I run OP's code I do not experience problems. If there is text in the input, it gets assigned to the variable. I assumed the problem was solved yesterday. I've only tried it in FF, but I haven't noticed anything unusual that would trip up a different browser.

[sunziun]

[ SOLVED ] Hi everyone, thanks for your hints and supports. I got it working by just adding an onChange tag to the input field.

<label>Destination House Number & Postcode</label><input type="text" id="postCode" name="postCode" onChange="EasyGo()" value="" required />

Javascript now listens to the events and I can capture all user inputs.

Edited March 12, 2013 by sunziun