如何禁用 <input type=“submit” … > 单击按钮时

Question

i'm a newbie with php and html. my code is creating button that depend on number of something and this is example of my code.

i have 2 php files, page1.php and page2.php

here is page1.php

<form target="_blank" method="post" action="page2.php">
    <?
    echo '<input type="submit" value="btn" name="btn"><br>';
    ?>
</form>

and this is page2.php

<?
if(isset($_POST['btn']))
 {
    echo "clicked";
 }
 else
 {
    echo "no event";
 }
?>

what i want is when user click button. the button have to disable

and result should be "clicked" form echo in page2.php

the problem is i dont know how to disable that button and get result form page2

thanks for help

Answer 1

You can disable when form submit :-

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

Answer 2

You can do that using jQuery. You need to include the jQuery script. And write your own code for manipulating the events

<form target="_blank" method="post" action="page2.php">
    <?
    echo '<input type="submit" value="btn" name="btn" id="submitBtn"><br>';
    ?>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(document).ready(function() {

$("#submitBtn").click(function(){
    $("input[type=submit]").attr('disabled','disabled'); // disable the button

   // $("input[type=submit]").removeAttr('disabled') You can enable the button from this code
});

});

Answer 3

 $('form').submit(function(){ $(this).find(':input[type=submit]').attr('disabled','disabled'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form target="_blank" method="post" action="page2.php"> <input type="submit" value="btn" name="btn"> </form> 

Answer 4

It seems that the problem with all of the other answers so far is that when the submit button is disabled, it causes the name - value data pair associated with it to not be posted, since the button gets disabled before the data is posted. However, submit buttons are usually not used to pass data anyway, so one solution to this problem is to simply associate the data with a separate, hidden input element.

HTML:

<form id="form" target="_blank" method="post" action="page2.php">
      <input type="hidden" name="btn" value="btn"></input>
      <input id="submit-button" type="submit" value="btn">
      <br />
</form>

Notice that I added id s to the form and submit button for selection in JavaScript.

JavaScript:

// Get the form and the submit button.
var form = document.getElementById('form');
var submitButton = document.getElementById('submit-button');

// Disables the submit button.
function disableSubmitButton() {
  submitButton.setAttribute('disabled', '')
}

// Disable the submit button when the form is submitted, with fallback for IE 5-8.
if (form.addEventListener) {
  form.addEventListener('submit', disableSubmitButton, false);
} else {
  form.attachEvent('onsubmit', disableSubmitButton);
}

If you had two different submit buttons, you could also pass a different value to the action page depending on which button was pressed by setting the value of the hidden input element based on which one was pressed:

HTML:

<form id="form" target="_blank" method="post" action="page2.php">
  <input id="hidden-input" type="hidden" name="button-pressed" value=""></input>
  <input id="submit-button-1" type="submit" value="Submit Button 1">
  <input id="submit-button-2" type="submit" value="Submit Button 2">
  <br />
</form>

JavaScript:

// Get the form and the hidden input.
var form = document.getElementById('form');
var hiddenInput = document.getElementById('hidden-input');

// Set the value of the hidden input depending on which button was pressed.
function setHiddenInputValue(event) {
  // Get the id of the button that was pressed.
  pressedButtonId = event.target.id;

  // Set the value of the hidden input element to be the same as the id of the pressed button.
  hiddenInput.setAttribute('value', pressedButtonId);

// Disables the submit button that was pressed.
function disableSubmitButton(event) {
  event.target.setAttribute('disabled', '')
}

// Disable the submit button when the form is submitted, with fallback for IE 5-8.
if (form.addEventListener) {
  form.addEventListener('submit', function(event) {
    // Event object fallback for IE 5-8.
    if (!event) {
      event = window.event;
    }

    setHiddenInputValue(event);
    disableSubmitButton(event);
  }, false);
} else {
  form.attachEvent('onsubmit', function(event) {
    // Event object fallback for IE 5-8.
    if (!event) {
      event = window.event;
    }

    setHiddenInputValue(event);
    disableSubmitButton(event);
  });
}