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.
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:
$('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);
});
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.
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.
very easy javascript only method
<form action="" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form"
onclick="this.disabled='disabled';this.form.submit();" />
</form>
I leave a code:
<form name="myform" action="/" method="post" onsubmit="document.getElementById('submit_button').disabled = 1;">
<!-- form elements here -->
</form>
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");
}
Try this. You might want to pass the value of each answer to a PHP file that performs backend work via AJAX.
<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.
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:
<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 $_GET or $_POST and 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 input or button elements with the disabled attribute, here's a basic example:
<?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 doctype you may need to give the attribute a value for it to be considered valid markup, but generally speaking:
<!-- valid HTML5 -->
<button disabled>button</button>
<!-- valid XHTML -->
<button disabled="disabled">button</button>
Some related StackOverflow reading:
What is a doctype?
What does ?: mean? (ternary operator)
PHP: How can I submit a form via AJAX (jQuery version)
Just try with below code. I hope it will help you...
$('#contact-form').submit(function () {
if ($(this).valid()) {
$('.submit').attr("disabled", true);
}
});
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!">