php表单提交时，提交按钮禁用

Question

而且我曾使用 php 代码从 ps1 脚本和 Web 服务的表单中获取数据，因此页面请求需要时间。用户在此过程中一次又一次地单击按钮。

我尝试 jQuery 单击事件，但它停止了表单提交。

我的 HTML 文件：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">

<title>xxx</title> 
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>   

<script type="text/javascript" src="js/guncelle.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<div class="bg"></div>
<body class="text-center bg body3">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
   <header class="masthead">
    <div class="inner">
      <!--<h3 class="masthead-brand"><img src="image/xxx.png" style="width: 100px;height: 100px"></h3>-->
      <nav class="navbar navbar-expand-sm navbar-dark justify-content-center">
        <ul class="navbar-nav">
          <li class="nav-item ">
            <a class="nav-link" href="index.php">xxx</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="sifirla.php">Sıfırla</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="guncelle.php">Güncelle</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div><img src="image/xxx.png"  alt="xxx" style="width: 150px;height: 150px;"></div>

   <div>
      <?php echo $result; ?>       
  </div>

  <main role="main" class="inner cover">
      <form id="form1" name ="form1" method="POST" action="guncelle.php" >

        <div class="form-group">
          <label for="uname">Kullanıcı Adınız:</label>
          <input type="text" class="form-control" id="uname" name="uname" >
        </div>
        <span id="unametxt" name="unametxt" class="required"></span>

        <div class="form-group">
          <label for="password">Mevcut Şifreniz:</label>
          <input type="password" class="form-control" id="password" name="password">
        </div>
        <span id="passwordtxt" name="passwordtxt" class="required"></span>

        <div class="form-group">
          <label for="newPassword">Yeni Şifreniz:</label>
          <input type="password" class="form-control" id="newPassword" name="newPassword" maxlength="15">
        </div>
        <span id="newPasswordtxt" name="newPasswordtxt" class="required"></span>

        <div class="form-group">
          <label for="new2Password">Yeni Şifreniz Tekrar:</label>
          <input type="password" class="form-control" id="new2Password" name="new2Password" maxlength="15">
        </div>
        <span id="new2Passwordtxt" name="new2Passwordtxt" class="required"></span>

        <!--<div class="form-group">
          <div class="g-recaptcha" data-sitekey="6LdLWVsUAAAAANupQHCmg_28mFmc__o6ZwybziOK"></div>
        </div>
      -->

       <p><input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle"  ></p>


    </form>
  </main>

  <footer class="mastfoot mt-auto">
    <div class="inner">
      <p>@2018 <a href="xxxx" target="_blank">xxxx</a></p>
    </div>
  </footer>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script> 
</body>
</html>

提交此表单时，我控制 php 端是这样的：

if (isset($_POST['Submit1'])) {

然后我将这些数据与网络服务一起使用，根据我有运行 ps1 脚本。最后，我在表单错误或所有过程成功时显示警报。

我想在提交表单时禁用按钮。我怎么能这样

Answer 1

您可以在表单中使用 onsubmit 事件来完成。请在下面的表单中添加 onSubmit 事件

<form id="form1" name ="form1" method="POST" action="" onsubmit="$('#Submit1').attr('disabled', 'disabled'); return true;">

Answer 2

尝试使用此代码

<input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle">

<script>
$(document).ready(function(){
  $('#form1').on('submit',function(e){
    e.preventDefault();
    $('#submit1').prop('disabled','disabled');
  });
});
</script>

php表单提交时，提交按钮禁用

When php form submission, submit button disable

javascript

php

ajax

jquery

form-submit