Reputation: 27

Disable form button and field with Javascript

I need to disable some filed and button in a form. The form shows user data and the button "Modifica" allow the user to modify field (username, mail, password). If user is worker can modify also exp and photo field. If user is manager this field are hidden.

I wrote some javascript in order to hide and disable fields but the button "modifica" seems to be blocked and I don't know why.

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

Upvotes: 1

Answers (2)

Mangesh55

Reputation: 31

You can get that HTML_DOM with document object then you can apply event listener on it.

Then get another id to which you want to disable and apply disable property into it

For reference :

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled

Upvotes: 0

Saurabh

Reputation: 439

If you need to disable the button "Modifica", You can just set "disabled" to true for this button's id:

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

Upvotes: 2

Disable form button and field with Javascript

Answers (2)

Related Questions