如何根据Django中选定的“id”自动填写表单

2024-09-30 20:30:48 发布

您现在位置：Python中文网/ 问答频道 /正文
9826 3

我有一张这样的表格： enter image description here

如何根据所选的“编号Pelayanan”填写禁用表单字段。“No.Pelayanan”是一个选择字段，因此当我选择（填写字段）时，它会自动填写表单。我正在寻找任何关于如何做到这一点的参考资料。谢谢大家!


Tags： no表单单字编号表格参考资料pelayanan
1条回答
网友
1楼 · 发布于 2024-09-30 20:30:48

这可以通过简单的javascript或更方便地使用jquery来实现。我将继续使用纯javascript

您可以将字段的相应数据存储在js变量中，或者根据您的需求调用api，并在更改select字段值时从那里更新字段

您可以使用javascripts inputObject.value来设置输入字段的值，如here所述

以下是一个工作示例，仅供参考

&13； 第13部分,； 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div class="container">
            <form>
                <div class="form-group">
                    <label for="emailfield">Email</label>
                    <input
                        type="email"
                        class="form-control"
                        id="emailfield"
                        placeholder="name@example.com"
                        disabled
                    />
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1"
                        >Example select</label
                    >
                    <select class="form-control" id="userselect">
                        <option value="1">user 1</option>
                        <option value="2">user 2</option>
                        <option value="3">user 3</option>
                        <option value="4">user 4</option>
                        <option value="5">user 5</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="fn">First Name</label>
                    <input
                        type="text"
                        class="form-control"
                        id="fn"
                        placeholder="firstname"
                        disabled
                    />
                </div>
                <div class="form-group">
                    <label for="ln">Last Name</label>
                    <input
                        type="text"
                        class="form-control"
                        id="ln"
                        placeholder="lastname"
                        disabled
                    />
                </div>
            </form>
        </div>
        <script
            src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous"
        ></script>
        <script>
            let usersData = [
                {
                    id: 1,
                    email: "u1@gmail.com",
                    fname: "fname-1",
                    lname: "lname-1",
                },
                {
                    id: 2,
                    email: "u2@gmail.com",
                    fname: "fname-2",
                    lname: "lname-2",
                },
                {
                    id: 3,
                    email: "u3@gmail.com",
                    fname: "fname-3",
                    lname: "lname-3",
                },
                {
                    id: 4,
                    email: "u4@gmail.com",
                    fname: "fname-4",
                    lname: "lname-4",
                },
                {
                    id: 5,
                    email: "u5@gmail.com",
                    fname: "fname-5",
                    lname: "lname-5",
                },
            ];
            document.getElementById('userselect').onchange = (e) => {
                let selectedUser = usersData.find(userdata => userdata.id == e.target.value);
                console.log(selectedUser);
                document.getElementById('emailfield').value = selectedUser.email;
                document.getElementById('fn').value = selectedUser.fname;
                document.getElementById('ln').value = selectedUser.lname;
            };
        </script>
    </body>
</html>
；
和#13；
和#13；

如果您不了解引导，请忽略我使用的css类，因为它们只是用于演示。其他输入字段，如下拉列表、文本字段和复选框，可以使用js以类似的方式填充

有关更多示例，请参考this

要知道如何使用jquery实现这一点，您可以check this out

相关问题 更多 >

    编程相关推荐