put variable value in textbox without onclick button in javascript

Question

I have made code with comments below:

which is storing value from url=> ../webdev/dummy.html?foo=quora, now my query is I want to show quora in textbox at the page load only, I don't want to use onclick function.please guide me :)

dummy.html

<script type="text/javascript">
  function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  var foo = getParameterByName('foo');

  document.getElementsByName('subject').Value = foo; // this is I am thinking of to store value in textbox id="subject"
</script>

<input type="text" name="subject" id="subject" readonly="true" />
<!-- textbox to display "quora" -->

it is not displaying any value in textbox

`getElementsByName` will return you a NodeList. Use `[0].value` — Rajesh, Nov 24 '16 at 06:22
Possible duplicate of [Javascript getElementsByName.value not working](http://stackoverflow.com/questions/19834804/javascript-getelementsbyname-value-not-working) — Rajesh, Nov 24 '16 at 06:24
can anyone tell me how to set visibility of drop down tab according to the value passed in url — Manjiri Parab, Nov 24 '16 at 06:55

score 1 · Accepted Answer · answered Nov 24 '16 at 06:24

1

You have to replace the code

document.getElementsByName('subject').Value = foo;

with

document.getElementById('subject').value = foo;

In case you want to call it onload of the page you can use the following code,

body.onload=function(){//call your function};

or

window.onload=function(){//call the function}

answered Nov 24 '16 at 06:24

GraveyardQueen

771
1
7
17

Why can you not use `getElementsByName`? – Rajesh Nov 24 '16 at 06:25
2

yes you can use document.getElementsByName it will return a nodelist ,since he is already using an id ,getElementByid will be easier to use since it returns the exact element – GraveyardQueen Nov 24 '16 at 06:27
@GraveyardQueen hey I am girl(since he is already :p :p :p) ....btw exact solution...thanks a lot – Manjiri Parab Nov 24 '16 at 06:31
@GraveyardQueen just a pointer, its a bad practice to use `window.onload=function`. You should use `window.addEventListener('load', function)` – Rajesh Nov 24 '16 at 06:32

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

As commented before, .getElementsByName will return you a NodeList. You will either have to loop over it of use specific index.

Also if you only have 1 element, I'd suggest using document.querySelector as this will return first matched element.

Sample

var nodeList = document.getElementsByName('subject');
console.log(nodeList)
console.log(nodeList[0])

var el = document.querySelector('input[name="subject"]');
console.log(el)

<input type="text" name="subject" id="subject" readonly="true" />

score 1 · Answer 3 · edited Nov 24 '16 at 06:33

I created a working sample: JSFiddle

function getParameterByName(name, url) {
  if (!url) {
    url = window.location.href;
  }
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var foo = getParameterByName('foo', 'www.google.de?foo=hugo');

document.getElementsByName('subject')[0].value = foo; // this is I am thinking of to store value in textbox id="subject"

<input type="text" name="subject" id="subject" readonly="true" />
<!-- textbox to display "quora" -->

score 1 · Answer 4 · edited May 23 '17 at 12:01

1

Use getElementById instead of getElementsByName and always run/ include JavaScript code after DOM components are loaded.

Ideally HTML should always load styles/DOM before any script.

For more information, refer: Where is the best place to put tags in HTML markup?

<input type="text" name="subject" id="subject" readonly="true" />

<!-- ideally script should run after html code -->
<script type="text/javascript">
  function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    url = "www.example.com/webdev/dummy.html?foo=quora" //sample snippet url
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    console.log(results[2])
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  var foo = getParameterByName('foo');
  // changing the getElementsByName to getElementById
  document.getElementById('subject').value = foo; 
</script>

edited May 23 '17 at 12:01

Community

1
1

answered Nov 24 '16 at 06:40

Sudhindra_Chausalkar

163
1
5

Please explain what you have done. Just putting code is not good enough – Rajesh Nov 24 '16 at 06:42
Not much really, I used getElementById attribute instead of getElementsByName and moved script to bottom to run after dom is loaded – Sudhindra_Chausalkar Nov 24 '16 at 06:49
I can see that, but I had to read your code to deduce it. You should explain your approach. Like why did you move script tag at the end. Why `getElementById` instead of `getElementsByName`. A person facing these issues does not have enough knowledge to differentiate and will use your code blindly. Help your fellow users with knowledge you have acquired. – Rajesh Nov 24 '16 at 06:58
Rajesh - Updated the answer. Will be more clear next time :) – Sudhindra_Chausalkar Nov 24 '16 at 07:09

put variable value in textbox without onclick button in javascript

4 Answers4

Sample