Filling out a form using javascript

Question

I want to fill out a form when opening a page (it's a page where you edit your profile information).

Here is my code:

<head>
    <script type="text/javascript">
        function addValues() {
            document.getElementById("datePicker").value = ViewBag.b.DateOfBirth.ToShortDateString();
            document.getElementById("name").value = ViewBag.b.Username;
            document.getElementById("username").value = ViewBag.b.Username;
            document.getElementById("password").value = ViewBag.b.Password;
            document.getElementById("lastname").value = ViewBag.b.Lastname;
        }
    </script>
</head>




<body onload="addValues()">
    <h2>EditProfile</h2>
    <form action="~/Authentication/EditProfile" method="post">
        <table>
            <tr>
                <td>Username:</td>
                <td><input type="text" name="username" id="username" /></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="text" name="password" /></td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="name" id="name" /></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td><input type="text" name="lastname" /></td>
            </tr>
            <tr>
                <td>Date of birth:</td>
                <td><input type="date" name="dateofbirth" id="datePicker" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="Save" />
                </td>
            </tr>
        </table>
    </form>
</body>

When loading a page, it doesn't fill out the information, and I can't find the mistake.

Is there a better way of doing this?

The rendered JavaScript looks like:

function addValues() {
    document.getElementById("datePicker").value = 11.9.2001. 00:00:00;
    document.getElementById("name").value = Mirko;
    document.getElementById("username").value = micro;
    document.getElementById("password").value = 123456789;
    document.getElementById("lastname").value = Mijanovic;
}

Can you post what the rendered JavaScript looks like after you visit the page? Also any errors in the JavaScript console would be helpful. — joncloud, Sep 13 '20 at 19:57
looks like the issue may be from the way you are accessing the ViewBag `https://stackoverflow.com/questions/10008023/how-do-i-access-viewbag-from-js/10008117` — jidexl21, Sep 13 '20 at 19:59
I have fixed a few problems you guys said( added @ on viewbag, added ids to inputs) but the errors still persists. Errors in the console: Uncaught SyntaxError: Unexpected number This line: document.getElementById("datePicker").value = 11.9.2001. 00:00:00; EditProfile?id=micro:52 Uncaught ReferenceError: addValues is not defined at onload (EditProfile?id=micro:52) This line: — Nikola Lugumerski, Sep 13 '20 at 20:24
@joncloud rendered javascript looks like this: Rendered javascript looks like this: — Nikola Lugumerski, Sep 13 '20 at 20:27

Miroslav Glamuzina · Answer 1 · 2020-09-13T20:16:58.450

You missed setting the id for some of the <input/> elements.

<head>
  <script type="text/javascript">
    // Example data
    const ViewBag = {
      b: {
        DateOfBirth: '2020-09-30',
        Username: 'username',
        Password: 'password',
        Lastname: 'lastname'
      }
    };

    function addValues() {
      document.getElementById("datePicker").value = ViewBag.b.DateOfBirth;
      document.getElementById("name").value = ViewBag.b.Username;
      document.getElementById("username").value = ViewBag.b.Username;
      document.getElementById("password").value = ViewBag.b.Password;
      document.getElementById("lastname").value = ViewBag.b.Lastname;
    }
  </script>
</head>


<body onload="addValues()">
  <h2>EditProfile</h2>
  <form action="~/Authentication/EditProfile" method="post">
    <table>
      <tr>
        <td>Username:</td>
        <td><input type="text" name="username" id="username" /></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="text" name="password" id="password" /></td>
      </tr>
      <tr>
        <td>Name:</td>
        <td><input type="text" name="name" id="name" /></td>
      </tr>
      <tr>
        <td>Last name:</td>
        <td><input type="text" name="lastname" id="lastname" /></td>
      </tr>
      <tr>
        <td>Date of birth:</td>
        <td><input type="date" name="dateofbirth" id="datePicker" /></td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="submit" value="Save" />
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

Hope this helps,

score 1 · Accepted Answer · answered Sep 13 '20 at 20:35

I think the problem is a combination of things, as highlighted in a couple of comments / answers.

Add IDs to all inputs (password and lastname don't have IDs)
Ensure that ViewBag is accessed with the @ prefix
Ensure that JavaScript literals are rendered appropriately

I believe the following code should handle ViewBag and JavaScript literals:

<script type="text/javascript">
    function addValues() {
        document.getElementById("datePicker").value = '@ViewBag.b.DateOfBirth.ToShortDateString()';
        document.getElementById("name").value = '@ViewBag.b.Username';
        document.getElementById("username").value = '@ViewBag.b.Username';
        document.getElementById("password").value = '@ViewBag.b.Password';
        document.getElementById("lastname").value = '@ViewBag.b.Lastname';
    }
</script>

Note that all of the literal values are quoted. You may need to handle additional escaping to prevent any of the ViewBag properties from causing an error due to a ' in the property value.

Filling out a form using javascript

2 Answers2