Question

我目前正在做一个学校项目，我再次提出另一个问题！我想创建一个函数来阻止我的提交按钮工作，除非我的＆＃34;主题＆＃34;和＆＃34;问题＆＃34;充满。

我想要尝试做的是，如果我的＆＃34;主题＆＃34;使我的提交按钮变为display: none;。和＆＃34;问题＆＃34;字段是空的。

我尝试使用if (data != 0)或.strLength扩展程序。但是，我不确定它应该如何运作。

任何帮助将不胜感激

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="TestingTrueQuestionStylesheet.css">

    <script>
      function submitAnswer(){

      var data = document.getElementById("Question").value;
      var topicName = document.getElementById("TopicName").value;


      localStorage.newdata = data;
      localStorage.topicName = topicName;



      }

    </script>
  </head>


  <body>
      <form>
        <fieldset>
              <input placeholder="Topic" id="TopicName" required type="text"></input>
              <br/>
              <textarea placeholder="Question" id="Question" required rows="30" cols="100"></textarea>
              <br/>

              <input type="submit" onclick="submitAnswer()" id="SubmitButton" required ></input>
        </fieldset>
      </form>
  </body>

</html>

Answer 1

您不应该隐藏但禁用该按钮。更好的解决方案是让用户提交表单，然后使用checkValidity函数检查表单的有效性

function submitAnswer(){
    var f = document.forms["myform"];//get hold of the form
    if(f.checkValidity()){
         // form is valid
    }
    else{
         //form is invalid
    }

此外，您还必须将表格命名为

 <form name="myform">

如果要禁用该按钮，则必须在每个表单元素上添加onkeyup事件处理程序，并在函数下面调用

var f=document.forms['myform'];
var sbmtBtn=document.getElementById('SubmitButton');
function checkFormsValidity(){
        if(f.checkValidity()){
             sbmtBtn.disabled=false;
        }
        else{
             sbmtBtn.disabled=true;
        }
}

你的HTML看起来像

<form name='myform'>
..
<input onkeyup='checkFormsValidity()'..
<textarea onkeyup='checkFormsValidity()'..

disabled button demo

在验证表单之前，如何隐藏提交按钮

1 个答案: