使按钮在 HTML 中填写表单时可单击

making button clickable when form is filled in html

本文关键字：表单单击按钮 HTML 更新时间：2023-09-26

我在html中制作了一个表单，并希望用户能够在填写某些字段时按提交。所以我的按钮在开始时被禁用，但由于某种原因，当内容被填满时，我的按钮不会变得可点击。
这是我的 html 中的表单：

 <fieldset>
        <legend>U gegevens</legend>
        <form name="signup" action="index.html" method="post">
            <ul>
                <li> <label>Naam</label>
                    <input type="text" name="name" size="30" />
                </li>
                <li> <label>Voornaam</label>
                    <input type="text" name="voornaam" size="30" />
                </li>
                <li> <label>Adress</label>
                    <input type="text" name="adress" size="30" />
                </li>
                <li> <label>Gemeente</label>
                    <input type="text" name="gemeente" size="30" />
                </li>
                <li> <label>Postcode</label>
                    <input type="text" name="postcode" size="30" />
                </li>
                <li>
                <p>Ik wens een alternatief facturatieadres <input type="checkbox" id="be1"onclick="if(this.checked){displayFac()}"></p>
                </li>
                <li style="display:none;" id="fac1"> <label >Adress</label>
                    <input type="text" size="30" />
                </li>
                <li style="display:none;" id="fac2"> <label >Gemeente</label>
                    <input type="text" size="30" />
                </li>
                <li style="display:none;" id="fac3"> <label>Postcode</label>
                    <input type="text" size="30" />
                </li>
                <li>
                <p>Ik wens een alternatief leveringsadress <input type="checkbox" id="be2" onclick="if(this.checked){displayLe()}"></p>
                </li>
                <li style="display:none;" id="le1"> <label >Adress</label>
                    <input type="text" size="30" />
                </li>
                <li style="display:none;" id="le2"> <label>Gemeente</label>
                    <input type="text" size="30" />
                </li>
                <li style="display:none;" id="le3" > <label>Postcode</label>
                    <input type="text" size="30" />
                </li>
                <li><label for="submit"></label>
                    <button type="submit" id="submit" disabled>Verzenden</button>
                </li>
            </ul>
        </form>
    </fieldset>

这是我用来检查是否有填充内容的 JavaScript：

function validateForm()
{
  while (true){
    var a=document.forms["signup"]["name"].value;
    var b=document.forms["signup"]["voornaam"].value;
    var c=document.forms["signup"]["adress"].value;
    var d=document.forms["signup"]["gemeente"].value;
    var e=document.forms["signup"]["postcode"].value;
    if (a!=null && a!="" && b !=null && b!="" && c!=null && c!= "" && d!=null && d!=""   && e!=null && e!="")
    {
        document.getElementById("submit").disabled=false;
    }
 }
}

提前感谢！

从 validateForms（） 函数中删除 while 循环，并在每个输入 onblur 事件上调用它，如果选中复选框，也调用它。希望这有帮助。

试试这个：

function validateForm()
{
    var a=document.forms["signup"]["name"].value;
    var b=document.forms["signup"]["voornaam"].value;
    var c=document.forms["signup"]["adress"].value;
    var d=document.forms["signup"]["gemeente"].value;
    var e=document.forms["signup"]["postcode"].value;
    if ( a!="" &&  b!="" &&  c!= ""  && d!=""    && e!="")
    {
        document.getElementById("submit").disabled=false;
    }

}