Question

我是php和html的新手。我的代码正在创建依赖于某些东西的按钮，这是我的代码的示例。

我有2个php文件，分别是page1.php和page2.php

这是page1.php

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

这是page2.php

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

当用户单击按钮时我想要的是什么。该按钮必须禁用

，结果应在page2.php中以“点击”形式回显

问题是我不知道如何禁用该按钮并从page2获取结果

感谢帮助

Answer 1

您可以在表单提交时禁用：-

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

Answer 2

您可以使用jQuery来实现。您需要包括jQuery脚本。并编写自己的代码来处理事件

<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

到目前为止，所有其他答案的问题似乎是，当禁用提交按钮时，它导致与之关联的name-value数据对不被发布，因为在发布数据之前，该按钮将被禁用。但是，无论如何submit按钮通常都不用于传递数据，因此解决此问题的一种方法是将数据与单独的隐藏input元素简单关联。

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>

请注意，我在表单中添加了id，并提交了按钮以在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);
}

如果您有两个不同的提交按钮，则还可以根据所按下的按钮，通过根据所按下的按钮设置隐藏的input元素的值，将不同的值传递给操作页面：

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);
  });
}

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

4 个答案: