当 javascript return 为真时启用按钮

Question

我正在尝试使用基本验证码创建一个表单。目前，因为我是新手 HTML 编码员，我只在用户单击验证按钮时启用提交按钮（当它看到 return true 时它不会自行启用。）而且我'我试图做到这一点，如果它 returns return true 我想启用该按钮，并在其他时间禁用它。这是代码的 link：https://codepen.io/pen/GRpVmve

如果有人能提供帮助，我将不胜感激。

Answer 1

删除按钮验证按钮并添加到输入 oninput 功能

function Check(){
  document.getElementById("button2").disabled = true;
  if(ValidCaptcha()){     
    document.getElementById("button2").disabled = false; 
  }
}


function Captcha(){
   var alpha = new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
   var i;
   for (i=0;i<6;i++){
     var a = alpha[Math.floor(Math.random() * alpha.length)];
     var b = alpha[Math.floor(Math.random() * alpha.length)];
     var c = alpha[Math.floor(Math.random() * alpha.length)];
     var d = alpha[Math.floor(Math.random() * alpha.length)];
     var e = alpha[Math.floor(Math.random() * alpha.length)];
     var f = alpha[Math.floor(Math.random() * alpha.length)];
     var g = alpha[Math.floor(Math.random() * alpha.length)];
    }
  var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
  document.getElementById("mainCaptcha").value = code;
 Check()
}
function ValidCaptcha(){
    var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
    var string2 = removeSpaces(document.getElementById('txtInput').value);
    if (string1 == string2){
      return true;
    }
    else{        
      return false;
    }
}
function removeSpaces(string){
  return string.split(' ').join('');
}

<form action="https://www.w3schools.com/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <h3>Gender</h3>
    <input type="radio" id="male" name="gender" value="male">

  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>

     <body onload="Captcha();">
        <table>
          <tr>
           <h3>
                 Captcha<br />
           </td>
          </tr>
          <tr>
           <td>
             <input type="text" id="mainCaptcha" disabled/>
              <input type="button" id="refresh" value="Refresh" onclick="Captcha();" />
           </td>
          </tr>
          <tr>
           <td>
              <input type="text"oninput="Check()" name="captcha" id="txtInput"/>   
          </td>
         </tr>
         <tr>
          <td>
            
              <input type="submit" id="button2" value="Send" disabled>
          </td>
        </tr>
      </table>
    </body>

</form>

Answer 2

我认为这对你有用...

window.onload=()=>{
  document.getElementById('button2').disabled = true;
  let text = document.getElementById('txtInput').value;
 Captcha();
}

function Captcha(){
var alpha = new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
for (i=0;i<6;i++){
   var a = alpha[Math.floor(Math.random() * alpha.length)];
   var b = alpha[Math.floor(Math.random() * alpha.length)];
   var c = alpha[Math.floor(Math.random() * alpha.length)];
   var d = alpha[Math.floor(Math.random() * alpha.length)];
   var e = alpha[Math.floor(Math.random() * alpha.length)];
   var f = alpha[Math.floor(Math.random() * alpha.length)];
   var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
 document.getElementById("mainCaptcha").value = code
 }

function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
  document.getElementById('button2').disabled = false;
}                      
else{      
 document.getElementById('button2').disabled = true;
}
}
function removeSpaces(string){
  return string.split(' ').join('');
}
function check(x){
  if(x.length<7 || x.length>7){
     document.getElementById('button2').disabled = true;
  }
}

<form action="https://www.w3schools.com/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <h3>Gender</h3>
    <input type="radio" id="male" name="gender" value="male">

  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>

     <body onload="Captcha();">
        <table>
          <tr>
           <h3>
                 Captcha<br />
           </td>
          </tr>
          <tr>
           <td>
             <input type="text" id="mainCaptcha" disabled/>
              <input type="button" id="refresh" value="Refresh" onclick="Captcha();" />
           </td>
          </tr>
          <tr>
           <td>
            <input type="text" id="txtInput" onkeyup="check(this.value)"/>
          </td>
         </tr>
         <tr>
          <td>
              <input id="button1" type="button" value="Verify" onclick="ValidCaptcha()">
              <input type="submit" id="button2" value="Send">
          </td>
        </tr>
      </table>
    </body>

</form>

当 javascript return 为真时启用按钮

Making button enabled when javascript return true

html

javascript

forms

captcha