Включение кнопки, когда javascript возвращает true - PullRequest
Новая
       87

Включение кнопки, когда javascript возвращает true

1 голос
/ 30 мая 2020

Я пытаюсь сделать форму с базовой c captcha. В настоящее время, поскольку я начинающий кодировщик HTML, я активировал кнопку отправки только тогда, когда пользователь нажимает кнопку проверки (она не включается сама, когда видит return true). И я пытаюсь сделать это так. если он возвращает return true, я хочу, чтобы кнопка была включена, а в другое время отключена. Вот ссылка на код: https://codepen.io/pen/GRpVmve

Буду признателен, если кто-нибудь поможет.

Ответы [ 2 ]

0 голосов
/ 30 мая 2020

Думаю, у вас сработает ... 

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>
0 голосов
/ 30 мая 2020

удалить кнопку, проверить кнопку и добавить к функции ввода при входе 

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>
...