禁用表单提交按钮，直到已填充文本区域？

Question

有人可以帮忙吗，因为我尝试了各种JavaScript来使我的表单提交按钮保持禁用状态，直到用户在textarea中输入文本，但无济于事。

我希望禁用提交按钮，直到用户输入一些文本为止。 有什么建议吗？

  <form action="includes/welcomebio.php" method="post" id="form12" class="form12">          
 <textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="checkWordCount();" data-required="true"><?php echo htmlspecialchars($profile['bio']); ?></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>

    <script type="text/javascript"> 
function disable() 
{ 
if(document.textarea.bio.value=="") 
{ 
document.textarea.submit.disabled=true; 
} 
else 
{ 
document.textarea.submit.disabled=false;    
} 
} 
</script>

Answer 1

您的代码有很多错误：

尽量不要使用内联JavaScript
您的textarea onKeyUp调用了一个不存在的函数
您正在尝试设置错误元素的禁用状态（您实际上有无效的javascript）
您也有一些无效的html

这就是你想要的：

的HTML

<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
    <textarea id="bio" name="bio" data-id="bio" data-required="true" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales.">
        <?php echo htmlspecialchars($profile['bio']); ?>
    </textarea>
    <input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit" />
</form>

JAVASCRIPT

window.onload = function () {
    document.getElementById("bio").onkeyup = checkWordCount;
    checkWordCount();
};

function checkWordCount() {
    if (document.getElementById("bio").value == "") {
        document.getElementById("submit").disabled = true;
    } else {
        document.getElementById("submit").disabled = false;
    }
}

这是一个有效的例子

Answer 2

您试图禁用textarea而不是Submit按钮。 您的代码不是有效的JavaScript。 最初使提交按钮保持禁用状态，仅在文本区域中包含某些内容时才启用它。 另外，由于您在文本区域中使用了占位符，因此您的文本区域永远不会为空，因此请检查

document.getElementById("bio").value = ""

除非用户更改，否则始终返回false。

Answer 3

尝试这个

     <body onload="disable()">
 <form action="includes/welcomebio.php" method="post" id="form12" class="form12">          
 <textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="disable();checkWordCount();" data-required="true"></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
</body>
    <script type="text/javascript"> 
function disable() 
{ 
    if(document.getElementById("bio").value=="") 
    { 
    document.getElementById("submit").disabled=true; 
    } 
    else 
    { 
    document.getElementById("submit").disabled=false;    
    } 
} 
</script>

禁用表单提交按钮，直到已填充文本区域？

问题描述

3 个解决方案

解决方案1
3 2013-04-30 10:19:32

解决方案2
0 2013-04-30 10:12:15

解决方案3
0 2013-04-30 10:55:20

禁用表单提交按钮，直到已填充文本区域？

问题描述

3 个解决方案

解决方案1 3 2013-04-30 10:19:32

解决方案2 0 2013-04-30 10:12:15

解决方案3 0 2013-04-30 10:55:20

解决方案1
3 2013-04-30 10:19:32

解决方案2
0 2013-04-30 10:12:15

解决方案3
0 2013-04-30 10:55:20