禁用表单提交按钮，直到已填充文本区域？
[英]disable a form submit button until a textarea has been populated?
问题描述
can someone please help because i have tried various javascripts to get my form submit button to stay disabled until a user enters text into the textarea but nothings working. 
有人可以帮忙吗，因为我尝试了各种JavaScript来使我的表单提交按钮保持禁用状态，直到用户在textarea中输入文本，但无济于事。
i want the submit button to be disabled until a user enters some text. 我希望禁用提交按钮，直到用户输入一些文本为止。 any suggestions please? 有什么建议吗？
<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>
3 个解决方案
解决方案1
3 2013-04-30 10:19:32
There are many things wrong with your code: 您的代码有很多错误：
- Try not to use inline javascript 尽量不要使用内联JavaScript
- your textarea
onKeyUpcalls a function that does not exist您的textarea onKeyUp调用了一个不存在的函数 - you are trying to set the disabled state of the wrong element (you actually have invalid javascript) 您正在尝试设置错误元素的禁用状态（您实际上有无效的javascript）
- you have some invalid html too 您也有一些无效的html
This is what you want: 这就是你想要的：
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 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;
}
}
解决方案2
0 2013-04-30 10:12:15
You are trying to disable the textarea instead of the submit button. 您试图禁用textarea而不是Submit按钮。 Your code isn't valid JavaScript. 您的代码不是有效的JavaScript。 Keep the submit button disabled initially and enable it only when the textarea has something in it. 最初使提交按钮保持禁用状态，仅在文本区域中包含某些内容时才启用它。 Also, since you're using a placeholder for the textarea, your textarea would never be empty, so a check for 另外，由于您在文本区域中使用了占位符，因此您的文本区域永远不会为空，因此请检查
document.getElementById("bio").value = ""
would always return false unless the user changes it. 除非用户更改，否则始终返回false。
解决方案3
0 2013-04-30 10:55:20
try this 尝试这个
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.