How do I auto-populate a text field from URL Parameter using Javascript

Question

This page (http://forums.iis.net/t/1153336.aspx) explains how to do exactly what I am wanting to do, except due to the limitations of our system I only get to enter javascript to pull this information into the textbox. Can someone explain how I can use a parameter in a URL to auto fill a textbox?

Show what the parameters are likely to be, show the `input` (there's no such thing as a 'textbox' element) that it'll be populating. And, since you have a tutorial explaining how to do what you want in one language, could you explain the problems you're having translating it to JavaScript, where are you stuck? — David Thomas, Sep 04 '12 at 18:35
Sorry I was not clear. I am very new to programming in general, and don't know JavaScript at all, so I din't really know where to start in converting it. The reason I was forced to use JavaScript in this situation is that I have to enter the code into a proprietary system, and the UI is limited to one input at a time and using JavaScript only. — user1647051, Sep 04 '12 at 19:44

score 10 · Answer 1 · edited May 23 '17 at 10:30

10

You can use location.search to access the url query and inject it into your text value

If your url is /page.htm?x=y, you can use the following code to set the value of a text field. This post tells you how to grab values from the query string

// See the link above for getUrlParams
var params = getUrlParams();
document.getElementById('myTextFieldId').value = params.x;

Notice that the example you've linked to suffers from a http://en.wikipedia.org/wiki/Cross-site_scripting vulnerability. To avoid that, you must escape the HTML before you output it on the screen

edited May 23 '17 at 10:30

Community

1
1

answered Sep 04 '12 at 18:39

Ruan Mendes

90,375
31
153
217

Upvoting this answer because it's exceptionally well detailed. – Jordan Thornquest Aug 07 '13 at 15:02

score 0 · Answer 2 · answered Sep 04 '12 at 18:37

0

You should be able to do something similar using windows.location in js

http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

answered Sep 04 '12 at 18:37

PJUK

1,758
1
16
21

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

You can easily use the answer of this question to get parameters from the URL using JavaScript. Then set the value of your textboxes like this:

this.form.elements["element_name"].value = 'Some Value';

edited May 23 '17 at 12:34

Community

1
1

answered Sep 04 '12 at 18:38

woz

10,888
3
34
64

score 0 · Answer 4 · 2018-05-26T02:09:25.657

If you want a quick solution, you might be interested in using this code snippet (inspiration taken from here, but modified by myself):

function getURLParameter(e) {
  return decodeURI((new RegExp(e + "=(.+?)(&|$)").exec(location.search) || [, ""])[1]);
}

if (getURLParameter("inputKey") === "") {
  console.log("No URL param value found.");
} else {
  document.getElementById("inputBox").value = getURLParameter("inputkey");
}

Let's say that your url is example.com?inputKey=hello world. If so, using the above code will fill in the input with the ID of "inputBox" with the phrase "Hello world". If the URL was just example.com, it wouldn't prefill the box, and instead just act as though there was nothing (show the placeholder etc).

How do I auto-populate a text field from URL Parameter using Javascript

4 Answers4