如何在 PHP 中提交后禁用提交按钮
How to disable a submit button after submission in PHP?
我浏览了有关此问题的其他问题,但找不到满意的答案。我有一个测验网站,用户从四个选项中选择一个选项,然后单击提交。我想在单击一次提交按钮后禁用它。
有什么方法可以用PHP做到这一点吗?如果没有,有没有办法用最小的JS来做到这一点。
可用的解决方案
由于您标记了问题jQuery,因此您可以使用以下一些简单的jQuery解决方案:
要在单击时禁用它,您可以简单地:
$('input[type="submit"]').click(function() {
this.disabled = true;
};
不过,您可以做得更好,并且仅在提交表单后禁用它:
$("form").submit(function() {
$(this).find('input[type="submit"]').prop("disabled", true);
});
解决方案演示
这是上述逻辑的简单演示,在jsFiddle中: http://jsfiddle.net/zb8CZ/
(请注意,在该实现中,我没有使用jQuery,而是使用纯JS;但是,为了跨浏览器的可移植性,以及对jQuery提供的许多其他方法的访问(加上语法糖!(我推荐jQuery方法。
值得一提...
请注意,尝试在 HTML 中内联实现 JS 事件处理(使用 onsubmit="..."
或 onclick="..."
属性(被认为是不好的做法,因为它会使您的功能与布局/显示层混淆。您还会丢失编辑器可能提供的任何语法突出显示和/或错误检查,并且由于代码没有逻辑顺序,因此通常会使开发和维护应用程序变得更加困难。
我留下一个代码:
<form name="myform" action="/" method="post" onsubmit="document.getElementById('submit_button').disabled = 1;">
<!-- form elements here -->
</form>
对于像这样的禁用写入,单击一次后将禁用它。
<input type="submit" id="but_sub" name="submit" '>
$("#but_sub").click(function() {
$(this).attr("disabled",true);
}
或
$('#but_sub').click(function() {
$(this).attr("disabled","disabled");
}
试试这个。您可能希望将每个答案的值传递给通过 AJAX 执行后端工作的 PHP 文件。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$('#question').submit(function(){
//Get the value of the answer that was checked
var answer = $('input:radio[name=question_one]:checked').val();
//Use jQuery's AJAX function to send the data to a PHP file that does backend work
$.ajax({
type:'POST',
url:'quiz_backend.php',
data:'answer='+ answer,
success: function() {
//Hide the submit button upon successful submission
$('#submit').attr("disabled", true);
event.preventDefault();
}
});
});
</script>
<form id="question">
<input type="radio" name="question_one" value="answerswer_one">A<br />
<input type="radio" name="question_one" value="answerswer_two">B<br />
<input type="radio" name="question_one" value="answerswer_three">C<br />
<input type="radio" name="question_one" value="answerswer_four">D<br />
<input type="submit" value="submit" id="submit"/>
</form>
有关jQuery的AJAX调用的更多信息,请点击此处。
方法
<form action="" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form"
onclick="this.disabled='disabled';this.form.submit();" />
</form>
现在常见的做法是使用 AJAX,但这并不能回答这个问题,如果没有后端的任何帮助,任何 Javascript 解决方案也不会回答。 假设您有一个表单,例如:
<form action="foo.php" method="post">
<input type="text" name="myVariable"/>
<button type="submit">Submit</button>
</form>
提交到 PHP 文件进行处理时,您将通过$_GET
或$_POST
访问表单数据,并对其进行任何需要的操作。 此时,您将能够推断表单是否已提交或成功 - 基于此,您可以简单地使用 disabled
属性标记input
或button
元素,下面是一个基本示例:
<?php # foo.php
$myVariable = isset($_POST['myVariable']) ? $_POST['myVariable'] : '';
echo "You submitted: {$myVariable}'n"; // do something useful...
// if variable is not an empty string, ie. it has been submitted,
// set $disabled which can then be output in-line with your HTML
$disabled = ($myVariable != '') ? 'disabled' : '';
?>
<form action="foo.php" method="post">
<input type="text" name="myVariable"/>
<button type="submit" <?php echo $disabled; ?>>Submit</button>
</form>
然后,这将根据您的条件输出您的新表单,其中按钮处于禁用状态。 我还应该注意,根据您的doctype
,您可能需要为属性提供一个值才能将其视为有效的标记,但一般来说:
<!-- valid HTML5 -->
<button disabled>button</button>
<!-- valid XHTML -->
<button disabled="disabled">button</button>
一些相关的堆栈溢出阅读:
什么是文档类型??:
是什么意思?(三元运算符(
PHP:如何通过 AJAX 提交表单(jQuery 版本(
只需尝试使用以下代码。我希望它能帮助你...
$('#contact-form').submit(function () {
if ($(this).valid()) {
$('.submit').attr("disabled", true);
}
});
带有用户消息的示例注册按钮:
<input type="submit" onclick="this.disabled=true;this.value='ADD USER MESSAGE...';this.form.submit();" class="ADD BUTTON CLASS HERE" value="Register!">
.sub-btn:hover {
color: #FFFFFF;
background-color: #406800;
border-color: #82B33C;
transition: all .25s linear;
-o-transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
-webkit-appearance: none;
border-radius: 4px;
}
.sub-btn {
border-width: 1px;
border-style: solid;
font-family: 'Bitter', serif;
font-weight: 700;
font-size: 20px;
margin-left: 0;
padding: 10px;
width: 100%;
color: #f8f8f8;
background-color: #82B33C;
border-color: #406800;
transition: all .25s linear;
-o-transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
-webkit-appearance: none;
border-radius: 4px;
}
.tx-shadow {
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
}
<input type="submit" onclick="this.disabled=true;this.value='Creating Account, please wait...';this.form.submit();" class="sub-btn tx-shadow" value="Register!">
- 带有验证和隐藏字段值的提交按钮
- 如何在 API 调用后和 if 语句中启用提交按钮
- 提交按钮,该按钮位于使用 Excel VBA 的 Javascript 中
- 如何使用提交按钮搜索表中的记录
- 在单击按钮前后禁用提交按钮
- 在表单完成并确认密码之前,请禁用提交按钮
- 如何使用Java脚本创建提交按钮's的拖放功能
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 提交按钮通过JQuery和JavaScript函数所做的更改不会持续
- 从输入时提交到jQuery,无需提交按钮,无需表单操作
- onclick提交按钮JSP
- 通过提交按钮传递值
- 如果ng单击附加到提交按钮,则表单未验证
- 如何在Razor MVC 5.2.3 Ajax中使用多个提交按钮
- 使用提交按钮隐藏未选中的单选按钮
- Ruby/JS如何在提交按钮后重新加载页面
- JavaScript表单提交没有't fire asp服务器端点击功能的提交按钮
- 使用javascript后,提交按钮不起作用
- 如何使用jQuery/Ajax响应特定的提交按钮
- 表单中的提交按钮在 PHP 打印中不起作用