使用 javascript 填寫表單

Question

我想在打開一個頁面時填寫一個表格（這是一個您編輯個人資料信息的頁面）。

這是我的代碼：

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

加載頁面的時候，沒有填寫信息，我也找不到錯誤。

有沒有更好的方法來做到這一點？

呈現的 JavaScript 看起來像：

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

Answer 1

您錯過了為某些<input/>元素設置id 。

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

希望這可以幫助，

Answer 2

我認為問題是多種因素的組合，正如一些評論/答案中所強調的那樣。

為所有輸入添加 ID（ password和lastname沒有 ID）
確保使用@前綴訪問ViewBag
確保正確呈現 JavaScript 文字

我相信以下代碼應該處理ViewBag和 JavaScript 文字：

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

請注意，所有文字值都被引用。 您可能需要處理額外的轉義以防止任何ViewBag屬性由於屬性值中的'而導致錯誤。

使用 javascript 填寫表單

問題描述

2 個解決方案

解決方案1
3 2020-09-13 20:07:26

解決方案2
1 已采納 2020-09-13 20:35:50

使用 javascript 填寫表單

問題描述

2 個解決方案

解決方案1 3 2020-09-13 20:07:26

解決方案2 1 已采納 2020-09-13 20:35:50

解決方案1
3 2020-09-13 20:07:26

解決方案2
1 已采納 2020-09-13 20:35:50