Disabling button after form submit

Question

How can I change this function so when I submit form the button disables and page refreshes ?

function thanks() {
  setTimeout(function () {
    document.location.pathname = "index.php";
  }, 3000);
}

Page refresh function is working btw. I just need to disable button.

This is my form

<form  method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
  <input type="hidden" name="price" value="{{$theme->price}}">
  <input type="hidden" name="id" value="{{$theme->id}}">
  <button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>

EDIT

Problem is that whenever I disable the button the file doesn't start downloading.. why ?

_"so when I submit form the button disables and page refreshes"_ What is purpose of disabling button before page refreshes ? Is expected result for button to be disabled after page refreshes ? — guest271314, Jan 31 '16 at 20:26
Here's a related question: http://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit — Tom Prats, Jan 31 '16 at 20:26
See http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/ — guest271314, Jan 31 '16 at 20:36

score 0 · Answer 1 · answered Jan 31 '16 at 20:25

0

Use the disabled property like this:

 document.getElementById("<button id>").disabled = true;

answered Jan 31 '16 at 20:25

user2279543

21
7

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-31T20:44:28.840

0

Try making it into an unobtrusive script:

<form  method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">
  <input type="hidden" name="price" value="{{$theme->price}}">
  <input type="hidden" name="id" value="{{$theme->id}}">
  <button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>

And in jQuery:

$("#myForm").submit(function (e) {
  // do not allow to submit form
  e.preventDefault();
  // disable the submit button
  $(".btn.btn-success").prop("disabled", true);
  // do the set time out
  setTimeout(function () {
    document.location.pathname = "index.php";
  }, 3000);
});

edited Jan 31 '16 at 20:44

answered Jan 31 '16 at 20:26

Praveen Kumar Purushothaman

164,888
24
203
252

Works, but the problem is that file doesn't start downloading, do I need to put this: htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}} somewhere in function ? – frenchbaguette Jan 31 '16 at 21:06
@feknaz Can you wrap your code between ` character? Edit the comment please? – Praveen Kumar Purushothaman Jan 31 '16 at 21:07
@feknaz If you need some file to start download, you need to set headers: `header("Content-disposition: attachment");`. – Praveen Kumar Purushothaman Jan 31 '16 at 21:09
In what place particulary should I place this line ? – frenchbaguette Jan 31 '16 at 21:12
@feknaz On the page where the download should begin. First of everything. `:)` – Praveen Kumar Purushothaman Jan 31 '16 at 21:13
@feknaz Instructions for [client side](http://www.jtricks.com/bits/content_disposition.html) and [server side](http://stackoverflow.com/questions/8875949/how-to-implement-content-disposition-attachment). – Praveen Kumar Purushothaman Jan 31 '16 at 21:14
@feknaz Thanks boss. Let me know if you are stuck. – Praveen Kumar Purushothaman Jan 31 '16 at 21:18
Yeah, I still don't know where to exactly put this line: `header("Content-type: application/force-download");` – frenchbaguette Jan 31 '16 at 21:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/102176/discussion-between-praveen-kumar-and-feknaz). – Praveen Kumar Purushothaman Jan 31 '16 at 21:26
@feknaz Come to chat plz. – Praveen Kumar Purushothaman Jan 31 '16 at 21:26

score 0 · Answer 3 · answered Jan 31 '16 at 20:26

0

On button click, set the disabled property of this button to true

HTML

<button type="submit" class="btn btn-success" onclick="thanks(this)">

jQuery

function thanks(elem) {
    $(elem).prop('disabled', 'disabled');
    setTimeout(function () {
        document.location.pathname = "index.php";
    }, 3000);
}

answered Jan 31 '16 at 20:26

kapantzak

11,610
4
39
61

This almost works. Button disables and page refreshes, but the file doesn't start downloading. The problem is whenever I add disable function to button the file doesn't start downloading – frenchbaguette Jan 31 '16 at 20:30

Disabling button after form submit

3 Answers3