Home > Net >  Show button under certain conditions
Show button under certain conditions

Time:01-03

I have a simple script

I want to change the condition to

if (text.includes("admin")) {
 //Then a continue button will appear..

how to make it?

function check() {
  var text = document.getElementById("wrd").value;

  if (text == "") {
    alert("Error: The url field is Empty.");
  } else if (text.includes("admin")) {
    alert("DONE");
  } else {
    alert("ERROR : This url was not found.");
  }
}
<form>
  <input id="wrd"  type="text" autocomplete="off" placeholder="myword...">
  <button id="submit"  type="submit" onclick="check()" style="display:none;">SUBMIT</button>
</form>

CodePudding user response:

  1. NEVER call anything in a form submit
  2. Use the input event handler
  3. use the submit event handler - note that enter will submit the form if the button is just hidden instead of disabled. Also note that in your case that is fine
  4. make the field required

window.addEventListener("DOMContentLoaded", () => { // on page load
  document.getElementById("wrd").addEventListener("input", function() {
    const text = this.value.trim();
    document.getElementById("subbut").hidden = !text.includes("admin")
  })
  document.getElementById("myForm").addEventListener("submit", function(e) {
    const text = this.wrd.value;
    if (!text.includes("admin")) {
      e.preventDefault(); // stop submit
      alert("ERROR : This word was not found.");
    }
  })
})
<form id="myForm">
  <input id="wrd" name="wrd"  type="text" autocomplete="off" placeholder="myword..." required>
  <button id="subbut"  type="submit" hidden>SUBMIT</button>
</form>

CodePudding user response:

Here is the script code. I hope this will help you.

var text = document.getElementById("wrd");
var btn = document.getElementById("submit");

function check() {
  const textValue = text.value
 if (textValue.includes("admin")) {
    btn.style.display = "block"
  } 
}
<input id="wrd"  type="text" autocomplete="off" placeholder="myword..." oninput="check()">
<button id="submit"  type="submit" style="display:none">SUBMIT</button>

  • Related