Using eventlistener to disable and enable a button-CodePudding

I have a chess form with six fields. Two are drop down menus to select names (whiteplayername and blackplayername) and the other four can be used to add a custom name instead (firstnamewhite, lastnamewhite, firstnameblack, lastnameblack). Currently, I want my javascript to disable the custom fields if a name has been selected from the drop down menu (this is working). I also want the submit button to be disabled if neither the whiteplayername or firstnamewhite and blackplayername of firstnameblack is selected. Currently, the submit-button becomes enabled if a name is selected from both the blackplayername and whiteplayname menus but then does not become disabled again if an empty field is selected in either.

My code is:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let isformvalid = false;
        document.getElementById("submit-button").disabled = !isformvalid;
        document.getElementById("whiteplayername").addEventListener("change", function () {
            let blackplayername = document.getElementById("blackplayername");
            let firstnameblack = document.getElementById("firstnameblack");
            let firstnamewhite = document.getElementById("firstnamewhite");
            let lastnamewhite = document.getElementById("lastnamewhite");
            let lastnameblack = document.getElementById("lastnameblack");
            disablewhenmandatorynamemissingwhitename(this.value, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite);
            isformvalid = checkeitherfirstorfullnamepopulated (this.value, firstnamewhite, blackplayername, firstnameblack, isformvalid);
            document.getElementById("submit-button").disabled = !isformvalid;
        });
                });

    function disablewhenmandatorynamemissingwhitename(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
        if (whiteplayername !== "") {
            firstnamewhite.disabled = true;
            lastnamewhite.disabled = true;
        } else {
            firstnamewhite.disabled = false;
            lastnamewhite.disabled = false;
        }
    }

    function checkeitherfirstorfullnamepopulated(whiteplayername, firstnamewhite, blackplayername, firstnameblack, isformvalid) {
        if ((whiteplayername === "" || whiteplayername === null) && (firstnamewhite.trim() === "")) {
            return false;
        }
        else if ((blackplayername === "" || blackplayername === null) && (firstnameblack.trim() === "")) {
            return false;
        }
        return true;
    };
</script>

   <form th:object="${game}" th:action="@{/addgame}" th:method="post">
    <label for="whiteplayername">Select white player:</label>
    <select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
        <option th:value="null" th:selected="${game.name == null}"></option>
        <th:block th:each="name : ${names}">
            <option th:value="${name.name}"
                    th:text="${name.name}"></option>
        </th:block>
    </select>
    <label for="blackplayername">Select black player:</label>
    <select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
        <option th:value="null" th:selected="${game.name == null}"></option>
        <th:block th:each="name : ${names}">
            <option th:value="${name.name}"
                    th:text="${name.name}"></option>
        </th:block>
    </select><br><br>
    <label for="firstnamewhite">First name white:</label>
    <input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
    <label for="firstnameblack">First name black:</label>
    <input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
    <label for="lastnamewhite">Last name white:</label>
    <input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
    <label for="lastnameblack">Last name black:</label>
    <input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
    <label for="date">Date:</label><br>
    <input type="date" id="date" th:field="*{date}">
</form>

CodePudding user response：

Can you provide the html code too? I also recommend to name properly ur variables and fucntions beacuase are pretty illegibles by the way. Try to type the first letter of each word that compunds the varibale in uppercase at least.

Instead of:

let firstnameblack

Do:

let firstNameBlack

I also recommend to put 2 or 3 letters according to what specifies this varibale, for example if it's a button, do:

let btnFirstNameBlack

Anyways if you can provide the html code maybe I can help you with the button issue.

CodePudding user response：

Here's a solution that should meet all your requirements:

<script type="module">
  const form = document.getElementById("form");
  const submitButton = document.getElementById("submitbutton");
  const whitePlayerName = document.getElementById("whiteplayername");
  const blackPlayerName = document.getElementById("blackplayername");
  const firstNameBlack = document.getElementById("firstnameblack");
  const firstNameWhite = document.getElementById("firstnamewhite");
  const lastNameWhite = document.getElementById("lastnamewhite");
  const lastNameBlack = document.getElementById("lastnameblack");
  
  form.addEventListener('change', () => {
    const whiteNameSelected = whitePlayerName.value;
    
    // Disable white name inputs if white name is selected in the dropdown
    firstNameWhite.disabled = whiteNameSelected;
    lastNameWhite.disabled = whiteNameSelected;
    
    // Determine if the white name is either selected or typed in the inputs
    const validWhiteName = whiteNameSelected || (firstNameWhite.value && lastNameWhite.value);
    
    const blackNameSelected = blackPlayerName.value;
    
    // Disable black name inputs if black name is selected in the dropdown
    firstNameBlack.disabled = blackNameSelected;
    lastNameBlack.disabled = blackNameSelected;
    
    // Determine if the black name is either selected or typed in the inputs
    const validBlackName = blackNameSelected || (firstNameBlack.value && lastNameBlack.value);
    
    const submitAvailable = validWhiteName && validBlackName;
    submitButton.disabled = !submitAvailable;
  });
</script>

<form th:object="${game}" th:action="@{/addgame}" th:method="post" id="form">
  <label for="whiteplayername">Select white player:</label>
  <select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
    <option th:value="null" th:selected="${game.name == null}"></option>
    <option value="name1">Name 1</option>
    <option value="name2">Name 2</option>
  </select>
  <label for="blackplayername">Select black player:</label>
  <select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
    <option th:value="null" th:selected="${game.name == null}"></option>
    <option value="name1">Name 1</option>
    <option value="name2">Name 2</option>
  </select><br><br>
  <label for="firstnamewhite">First name white:</label>
  <input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
  <label for="firstnameblack">First name black:</label>
  <input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
  <label for="lastnamewhite">Last name white:</label>
  <input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
  <label for="lastnameblack">Last name black:</label>
  <input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
  <label for="date">Date:</label><br>
  <input type="date" id="date" th:field="*{date}">
  <button id="submitbutton" disabled>Submit</button>
</form>

It works by combining all the logic into a single handler for the entire form change. Then, if a name is selected in the dropdown, it disables the custom name fields, if not, it leaves them enabled. The code checks to make sure both white and black name are valid and depending on that sets the submit button enabled/disabled state.

You didn't post your whole HTML so I added the button by hand and also your selects are populated dynamically so I had to hardcode some options in them. Please, for Stack Overflow questions, always post examples reproducible by other people to aid them in helping you.