在 PHP 中提交后如何禁用提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19194356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable a submit button after submission in PHP?
提问by Ankur Gupta
I browsed through the other questions on this issue but couldn't find a satisfactory answer. I have a quiz website where the user selects an option from four options and then clicks submit. I want to disable the submit button after it has been clicked once.
我浏览了有关此问题的其他问题，但找不到满意的答案。我有一个测验网站，用户从四个选项中选择一个选项，然后单击提交。我想在单击一次后禁用提交按钮。
Is there any way to do this with PHP? If not, is there a way to do this with minimal JS.
有没有办法用 PHP 做到这一点？如果没有，有没有办法用最少的 JS 做到这一点。
回答by nbrooks
Available Solutions
可用的解决方案
Since you tagged the question jQuery, here are some simple jQuery solutions you can use:
To disable it when it is clicked, you can simply:
由于您标记了问题 jQuery，因此您可以使用以下一些简单的 jQuery 解决方案：
要在单击时禁用它，您只需：
$('input[type="submit"]').click(function() {
this.disabled = true;
};
You can do even better though, and disable it only once the form is submitted:
不过，您可以做得更好，并且仅在提交表单后禁用它：
$("form").submit(function() {
$(this).find('input[type="submit"]').prop("disabled", true);
});
Solution Demo
解决方案演示
Here's a simple demo of the above logic, in a jsFiddle: http://jsfiddle.net/zb8CZ/
(Note that in that implementation I didn't use jQuery, but rather, plain JS; for portability across browsers however, as well as access to the many other methods jQuery provides (plus the syntactic sugar!) I recommend the jQuery methods.
这是上述逻辑的一个简单演示，在 jsFiddle 中：http: //jsfiddle.net/zb8CZ/
（请注意，在该实现中，我没有使用 jQuery，而是使用纯 JS；然而，为了跨浏览器的可移植性，以及作为访问 jQuery 提供的许多其他方法（加上语法糖！）我推荐 jQuery 方法。
Good to note...
很高兴注意到...
Note that attempting to implement JS event handling inline in your HTML (using the onsubmit="..."or onclick="..."attributes) is considered bad practice, since it muddles your functionality with your layout/display layer. You also lose any syntax highlighting and/or error-checking your editor might provide, as well as just generally making it harder to develop and maintain your application, since there is no logical order to your code.
请注意，尝试在 HTML 中内联实现 JS 事件处理（使用onsubmit="..."或onclick="..."属性）被认为是不好的做法，因为它会使您的功能与布局/显示层混淆。您还会失去编辑器可能提供的任何语法突出显示和/或错误检查，并且通常会使开发和维护应用程序变得更加困难，因为您的代码没有逻辑顺序。
回答by suhailvs
very easy javascript only method
非常简单的 javascript only 方法
<form action="" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form"
onclick="this.disabled='disabled';this.form.submit();" />
</form>
回答by Juan Castro Lurita
I leave a code:
我留下一个代码：
<form name="myform" action="/" method="post" onsubmit="document.getElementById('submit_button').disabled = 1;">
<!-- form elements here -->
</form>
回答by Ashish Jain
For disable write like this, after once click it will be disable.
对于像这样禁用写入，单击一次后它将被禁用。
<input type="submit" id="but_sub" name="submit" \>
$("#but_sub").click(function() {
$(this).attr("disabled",true);
}
or
或者
$('#but_sub').click(function() {
$(this).attr("disabled","disabled");
}
回答by Lance
Try this. You might want to pass the value of each answer to a PHP file that performs backend work via AJAX.
尝试这个。您可能希望将每个答案的值传递给通过 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="answer_one">A<br />
<input type="radio" name="question_one" value="answer_two">B<br />
<input type="radio" name="question_one" value="answer_three">C<br />
<input type="radio" name="question_one" value="answer_four">D<br />
<input type="submit" value="submit" id="submit"/>
</form>
More info about jQuery's AJAX call here.
有关 jQuery 的 AJAX 调用的更多信息，请访问此处。
回答by Emissary
Common practice these days would be to use AJAX but this doesn't answer the question, nor would any Javascript solution without any assistance from the back-end. Say you have a form, for example:
现在的常见做法是使用 AJAX，但这并不能回答问题，如果没有后端的任何帮助，任何 Javascript 解决方案也不会。假设您有一个表单，例如：
<form action="foo.php" method="post">
<input type="text" name="myVariable"/>
<button type="submit">Submit</button>
</form>
When submitting to your PHP file for processing you will be accessing your form data either via $_GETor $_POSTand doing whatever you need to do with it. At this point you will be able to deduce whether or not the form has been submitted or is successful - based on this you can simply flag either inputor buttonelements with the disabledattribute, here's a basic example:
当提交到您的 PHP 文件进行处理时，您将通过$_GET或访问您的表单数据$_POST并执行您需要对其进行的任何操作。此时，您将能够推断表单是否已提交或是否成功 - 基于此，您可以简单地标记具有属性的元素input或button元素disabled，这是一个基本示例：
<?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>
This would then output your new form with the button disabled based on your conditions. I should also note that depending on your doctypeyou may need to give the attribute a value for it to be considered valid markup, but generally speaking:
然后，这将根据您的条件输出禁用按钮的新表单。我还应该注意，根据您的不同，您doctype可能需要为属性赋予一个值才能将其视为有效标记，但一般来说：
<!-- valid HTML5 -->
<button disabled>button</button>
<!-- valid XHTML -->
<button disabled="disabled">button</button>
Some related StackOverflow reading:
一些相关的 StackOverflow 阅读：
What is a doctype?
What does ?:mean? (ternary operator)
PHP: How can I submit a form via AJAX (jQuery version)
回答by Priya Ponnusamy
Just try with below code. I hope it will help you...
试试下面的代码。我希望它能帮助你...
$('#contact-form').submit(function () {
if ($(this).valid()) {
$('.submit').attr("disabled", true);
}
});
回答by echo
Example registration button with User Message:
带有用户消息的注册按钮示例：
<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!">