Filling out a form using javascript

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;
}

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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,

Method 2

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating