使用 Twitter Bootstrap,有一个表单可以让用户提交问题以公开或私下回答。
要启用“公开回答”提交按钮,len 文本字段应该 != 0。
要启用“私下回答”提交按钮(图形和功能),电子邮件字段应通过 AJAX运行 isEmail.php ( isemail.info/about )。
眼下:
:单击任一提交按钮运行 question.php 操作,它奇怪地加载 question.php 页面(真的只是希望这将表单的电子邮件和问题发送到编程的电子邮件地址).. 尚未编写 question.php,所以这里的帮助也会很棒..
:选择问题文本字段会从“公开回答”按钮中删除禁用的类(图形),这不考虑 str > 0(为此需要更多 javascript)..
:“私下回答”按钮不会以图形方式启用,并且在功能上它尚未首先禁用..
这是HTML:
<form class="form" id="contact_question" action="/question.php" method="post">
<div class="controls">
<input type="email" id="inputEmail" placeholder="Email" onkeyup="isEmailCheck(this.value)>
</div>
<br>
<div class="controls">
<input type="text" id="inputQuestion" placeholder="Question" onKeyUp="document.getElementById('Apublic').className = 'btn';">
</div>
<br>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn disabled" id="Apublic" value="Answer Publicly">
<input type="submit" class="btn disabled" id="Aprivate" value="Answer Privately">
</div>
</div>
</form>
这是提交禁用/启用 Javascript:
<!-- Disable/Enable Form Submit -->
<script>
$(function() {
$(":text").keypress(check_submit).each(function() {
check_submit();
});
});
function check_submit() {
if ($(this).val().length == 0) {
$(":submit").attr("disabled", true);
} else {
$(":submit").removeAttr("disabled");
}
}
</script>
这是 isEmail AJAX:
<!-- AJAX isEmail -->
<script>
function isEmailCheck(str)
{
if (str.length==0)
{
document.getElementById("inputEmail").innerHTML="";
document.getElementById("inputEmail").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("inputEmail").innerHTML=xmlhttp.responseText;
document.getElementById('Aprivate').className = 'btn';
document.getElementById("Aprivate").disabled = false;
}
}
xmlhttp.open("POST","/assets/isEmail.php?q="+str,true);
xmlhttp.send();
}
</script>