CODEWITHSUNDEEP
javascripthtml
chawki challadia
chawki challadia

Reputation: 454

Clear input event - HTML and JavaScript

So I have this piece of HTML and JavaScript

function validate() {
    const tabs = document.getElementsByClassName("tab");
    const input = tabs[currentTab].querySelectorAll("input[type=tel], input[type=text], input[type=time], input[type=number], input[type=email]");
    const radio = tabs[currentTab].querySelectorAll("input[type=radio]");
    const select = tabs[currentTab].getElementsByTagName("select");
    let valid = true;
    if (radio.length == 0) {
        for (let i = 0; i < input.length; i++) {
            if (input[i].value == "") {
                valid = false;
                break;
            }
        }
        for (let i = 0; i < select.length; i++) {
            if (select[i].value == "") {
                valid = false;
                break;
            }
        }
    } else if (radio[0].name == "phnum" && radio[0].checked) {
        if (input[0].value == "" || input[1].value == "") {
            valid = false;
        }
    } else if (radio[1].name == "phnum" && radio[1].checked) {
        if (input[0].value == "" || input[1].value == "" || input[2].value == "") {
            valid = false;
        }
    }

    if (valid) {
        document.getElementById("next").className = "prevNext";
    }
}
    <span id="radio">
    	<label for="phnum1" class="radio-container">
    	  <input type="radio" name="phnum" id="phnum1" value="1" onchange="displayPhone(this);">1 Number
          <span class="radio"></span>
    	</label>
    	<label for="phnum2" class="radio-container">
    	  <input type="radio" name="phnum" id="phnum2" value="2" onchange="displayPhone(this);">2 Numbers
    	  <span class="radio"></span>
    	</label>
    	<label for="phnum3" class="radio-container">
    	  <input type="radio" name="phnum" id="phnum3" value="3" onchange="displayPhone(this);">3 Numbers
    	  <span class="radio"></span>
    	</label>
    </span>
   </p><br>
   <p id="ph1"  class="disable">
      <label for="phone-number1">Add a Phone Number: </label><input type="tel" name="phone-number1" id="phone-number1" class="input" placeholder="Add A Phone Number" required oninput="validate();">
   </p>
   <p id="ph2" class="disable">
      <label for="phone-number2">Add a Phone Number: </label><input type="tel" name="phone-number2" id="phone-number2" class="input" placeholder="Add A Phone Number" required onchange="validate();">
  </p>
  <p id="ph3" class="disable">
      <label for="phone-number3">Add a Phone Number: </label><input type="tel" name="phone-number3" id="phone-number3" class="input" placeholder="Add A Phone Number" required onchange="validate();">
  </p>

that handles the input added by the user to make a button clickable if all necessary data is added. the problem is when i delete inside the input with back arrow key(the one above enter) the button remains active even if the condition for its activation no longer applies. thank you guys for your time and help i really do appreciate it. :D

Upvotes: 1

Views: 404

Answers (1)

user4119319
user4119319

Reputation:

One thing I see - you're setting the class name if valid == true via document.getElementById("next").className = "prevNext";.

But nowhere are you removing that class name if valid == false.

That's probably why you aren't seeing the button disappear when you empty out the fields (if I understand your problem correctly).

if (!valid) { document.getElementById("next").className = ""; } is a quick and dirty way to get what you need.

Upvotes: 1

Related Questions