个人中心
gpt4 book ai didi

javascript - 使用 Javascript 禁用表单按钮和字段

转载 作者：行者123 更新时间：2023-12-02 21:34:58 26 4
gpt4 key购买 nike

我需要禁用表单中的某些字段和按钮。该表单显示用户数据，“Modifica”按钮允许用户修改字段(用户名、邮件、密码)。如果用户是 worker ，还可以修改 exp 和照片字段。如果用户是经理，则此字段将被隐藏。

我编写了一些 JavaScript 来隐藏和禁用字段，但“modifica”按钮似乎被阻止，我不知道为什么。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" media="all" href="../CSS/style.css" th:href="@{.../CSS/style.css}"/>
    <script type="text/javascript" src="../js/updateProfile.js" th:src="@{/js/updateProfile.js}" defer> </script>
    <script type="text/javascript"  th:src="@{/js/loadimage.js}" defer ></script> <!--defer fa eseguire js dopo il parsing di html-->
</head>
<body>
<div class="container">
    <div th:replace="header :: header"></div>

    <h1>Profilo Utente</h1>
        <div class="form">
            <form action="updateprofile" method="post" enctype="multipart/form-data">
                <p>
                    <label for="username">Username: </label><br>
                    <input type="text" id="username" name="username" th:attr="value=${session.user.username}" required/><br>
                </p>
                <p>
                    <label for="email">Mail: </label><br>
                    <input type="email" id="email" name="email" th:attr="value=${session.user.email}" required/><br>
                </p>
                <p>
                    <label for="password">Password: </label><br>
                    <input type="password" id="password" name="password"
                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                           title="Deve contenere almeno 8 caratteri di cui un numero, una lettera maiuscola e una lettera minuscola." /><br>
                </p>
                <div id="password-confirm-block">
                    <p>
                        <label id="text-password-confirm" for="password-confirm">Reinserisci password: </label><br>
                        <input type="password" id="password-confirm"  />
                    </p>
                    <p id="password-message" class="error-message"></p>
                </div>
                <p>
                    Tipo di utente:<br>
                    <input type="radio" name="usertype" id="manager" value="manager" th:checked="${session.user.isManager!=null && session.user.isManager}" required/>
                    <label for="manager">Manager</label><br>
                    <input type="radio" name="usertype" id="worker" value="worker" th:checked="${session.user.isManager!= null && !session.user.isManager}" checked required/>
                    <label for="worker">Worker</label><br>
                </p>
                <div id="worker-data">
                    <p>
                        <label for="exp">Exp level:</label><br>
                        <select name="exp" id="exp">
                            <option value="" disabled selected>Exp level</option>
                            <option value="LOW" th:selected="${session.user.exp == 'LOW'}">LOW</option>
                            <option value="MEDIUM" th:selected="${session.user.exp == 'MEDIUM'}">MEDIUM</option>
                            <option value="HIGH" th:selected="${session.user.exp == 'HIGH'}">HIGH</option>
                        </select><br>
                    </p>
                    <p>
                        <label for="photo">Profile photo</label><br>
                    <div id="container"style="position: relative; width:300px;">
                        <canvas id="canvas_background" width="300px" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
                    </div>
                    <input type="file" name="photo" id="photo" accept="image/*"/><br>
                </div>
                <!-- TODO: Rivedere i messaggi di errore inseriti -->
                <span class="error-message" th:if="${session.signupfailed}">Salvataggio non riuscito</span>
                <p>
                    <input id="buttonModifica" type="button" value="Modifica" />
                    <input id="buttonAnnulla" type="reset" value="Annulla" />
                    <input id="buttonAggiorna" type="submit" value="Aggiorna" />
                </p>
            </form>
        </div>
</div>
</body>
</html>

Javascript:

var username = document.getElementById("username");
var email = document.getElementById("email");
var password = document.getElementById("password");
var passwordConfirmBlock = document.getElementById("password-confirm-block");
var radioWorker = document.getElementById("worker");
var radioManager = document.getElementById("manager");
var exp = document.getElementById("exp");
var photo = document.getElementById("photo");
var buttonModifica = document.getElementById("buttonModifica");
var buttonAnnulla = document.getElementById("buttonAnnulla");
var buttonAggiorna = document.getElementById("buttonAggiorna");

function init() {
    view();
    buttonModifica.addEventListener("click", modify, true);
    buttonAnnulla.addEventListener("click", view, true);
}

init();

function modify() {
    unlockImputs();
    buttonAnnulla.hidden=false;
    buttonAggiorna.hidden=false;
    buttonModifica.hidden=true;
}
function view() {
    lockImputs();
    buttonAnnulla.hidden=true;
    buttonAggiorna.hidden=true;
    buttonModifica.hidden=false;
}

function lockImputs (){
    username.readOnly=true;
    email.readOnly=true;
    password.readOnly=true;
    passwordConfirmBlock.hidden=true;
    radioManager.disabled=true;
    radioWorker.disabled=true;
    exp.disabled=true;
    photo.disabled=true;
}
function unlockImputs (){
    username.readOnly=false;
    email.readOnly=false;
    password.readOnly=false;
    radioManager.disabled=false;
    radioWorker.disabled=false;
    exp.disabled=false;
    photo.disabled=false;
}

最佳答案

如果您需要禁用“Modifica”按钮，只需将此按钮的 id 设置“disabled”为 true 即可:

document.getElementById("buttonModifica").disabled = true;

关于javascript - 使用 Javascript 禁用表单按钮和字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60524041/

26 4 0
文章推荐： javascript - 解构赋值时类型上不存在属性，Typescript 中出现 'Pick'
文章推荐： javascript - 单击超链接更改列表元素的颜色
文章推荐： javascript - 将 HTML 响应转换为数组或 NodeJS 中的对象
文章推荐： javascript - 重定向到404页面而不修改Vue.js中的URL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com