Setting values for a textfield by .value

Question

I know that this should be a really easy question, but I have no idea why a value cannot be assigned to a text field? I've also tried the getElementById by assigning the input an id, but that too doesn't work. I've been struggling with this for the past 3hours. Am I doing something completely wrong?

Javascript is

  document.form1.hello.value= "123";

HTML is

    <form name="form1" class="" action="index.html" method="post">
     <input type="text" name="hello" value="">
    </form>

Uncaught TypeError: Cannot read property 'hello' of undefined is the error.

full version is

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        document.form1.hello.value= "123";
    </script>
  </head>
  <body>
    <form name="form1" class="" action="index.html" method="post">
      <input type="text" name="hello" value="">
    </form>
  </body>
</html>

You can't get elements like that. Read 'bout selectors first: http://www.w3schools.com/js/js_htmldom_elements.asp — Damaged Organic, Sep 20 '16 at 13:34
@KidBinary Of course you can? `document.forms.form1.elements.hello` would be better, but the OPs code should work — Bergi, Sep 20 '16 at 13:36
Where is the JS code in the html? Please post your complete page — Bergi, Sep 20 '16 at 13:36
the easiest approach here would be to give an id to your input type="text" and then `document.getElementById('your-id').value = "123"` — Jay Ghosh, Sep 20 '16 at 13:36
http://jsbin.com/tecuxerilo/1/edit?html,js,output — I can't reproduce the problem. Whatever is causing it is not exposed by the question. Try providing a real [MCVE] — Quentin, Sep 20 '16 at 13:37
Thank you for your help. I feel like my basics are really weak. — peakersky, Sep 20 '16 at 13:37
Sounds like you're executing your script before the elements exist. For instance, if you've put the `script` in the `head` of the document rather than at the end of `body` where it belongs. — T.J. Crowder, Sep 20 '16 at 13:37
@T.J.Crowder Yes you were right!! that just fixed the problem completely. Thank you so much. How can I learn more about these rules? — peakersky, Sep 20 '16 at 13:41

score 3 · Answer 1 · answered Sep 20 '16 at 13:42

Try the following:

<!DOCTYPE html>
<html>
  <head> 
    
    <script type='text/javascript'>
    
      function onLoadFunction(){
      
        document.getElementById('text_input').value = '123';
      
      }
      
    </script>
      
  </head>
  <body onload="onLoadFunction()">
    
     <input type='text' id='text_input' value='' />
    
   </body>
</html>

Vicky Kumar · Accepted Answer · 2016-09-20T13:44:12.277

0

Hi peak your code is working fine

<form name="form1" class="" action="index.html" method="post">
 <input type="text" name="hello" value="">
</form>

document.form1.hello.value= "123"

please check this code pen for me it is working fine verify once http://codepen.io/vkvicky-vasudev/pen/ZpBbkR

the code which you have written in that put script tag inside body

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<form name="form1" class="" action="index.html" method="post">
  <input type="text" name="hello" value="">
</form>
 <script type="text/javascript">
    document.form1.hello.value= "123";
 </script>
 </body>
 </html>

here is code pen http://codepen.io/vkvicky-vasudev/pen/YGpymP

edited Sep 20 '16 at 13:44

answered Sep 20 '16 at 13:41

Vicky Kumar

1,236
11
25

Thank you, I didn't know the order was what was causing the issue. – peakersky Sep 20 '16 at 13:43
exactly that was the issue – Vicky Kumar Sep 20 '16 at 13:45

Setting values for a textfield by .value

2 Answers2