When php form submission, submit button disable

Question

And I have use to taken data from form on ps1 script and web services with php code so the page request takes time. The users click the button again and again this process time.

I try jQuery click event but it is stopped the form submission.

myHTML file:

<!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>

When this form submitted , I controlled php side like this:

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

and then I use this data with webservice, according that I have run ps1 script. Finally i show alert on the form error or success with all process.

I want to disable the button when form submitting. How can I this?

Possible duplicate of [How to prevent form from submitting multiple times from client side?](https://stackoverflow.com/questions/926816/how-to-prevent-form-from-submitting-multiple-times-from-client-side) — ᴄʀᴏᴢᴇᴛ, May 31 '18 at 09:49
this is not related to php, you have to do this with javascript. see the related question for an answer — ᴄʀᴏᴢᴇᴛ, May 31 '18 at 09:50

score 0 · Accepted Answer · answered May 31 '18 at 10:16

0

You can use onsubmit event in the form to do it. Please add the onSubmit event in the form as below

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

answered May 31 '18 at 10:16

Praveen

602
4
7

this usage disabled button for one moment. But form submission not work. – Alren May 31 '18 at 10:40
Okay then you can hide that button instead of disabling it – Praveen May 31 '18 at 10:43

score 0 · Answer 2 · answered Sep 30 '18 at 17:03

Try with this code

<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>

When php form submission, submit button disable

2 Answers2