How to 'Disable submit button after clicking it'

Question

I have a page which has a form. When I click the submit button, I need to display a message prompt if continue submit or not. If the user clicks continue submit, I need to disable the submit button while the page is submitting.

The code below does not work.

<form action="action_page.php" method="post">

<button type="submit" id="subbutton" name="submit_page[]" onclick="return confirm('Are you sure of your choices?'); this.disabled=true;">Submit </button>

</form>

The code below is from my action_page.php

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

}

score 0 · Answer 1 · answered Apr 19 '19 at 15:38

0

It is due to preceding return statement which interrupts the onclick function prior reaching this.disabled=true; Simply remove the statement keyword return.

 < ... onclick="confirm('Are you sure of your choices?'); this.disabled = true;">Submit</button>

answered Apr 19 '19 at 15:38

Ashen Gunaratne

415
3
9

I tried this. It disabled the button but I never reached action_page.php – Need Help Apr 19 '19 at 17:12

Dario · Answer 2 · 2019-04-19T16:00:57.537

0

I would define a function to handle the submit and disable the button. In fact, if you disable the button when it's clicked, the form won't be submitted; so you need to disable the submit button only after submission happens (i.e. within onsubmit event)

function onSubmit() {
    document.getElementById("subbutton").disabled = true; 
}

your html will look like:

<form action="action_page.php" method="post" onsubmit="return onSubmit()">

    <button type="submit" id="subbutton" name="submit_page[]" onclick="return confirm('Are you sure of your choices?');">Submit </button>

</form>

edited Apr 19 '19 at 16:00

answered Apr 19 '19 at 15:46

Dario

5,440
8
31
39

I tried this one. My button was disabled, but I noticed that the submit process was so fast and the action_page.php was not reached. – Need Help Apr 19 '19 at 17:18

score 0 · Answer 3 · answered Apr 19 '19 at 18:12

Just set the pointer-events and opacity accordingly:

#subbutton {
    "pointer-events" : "none", 
    "opacity" : 0.5
}

To reenable the button:

#subbutton {
    "pointer-events" : "auto", 
    "opacity" : 1
}

Using JavaScript:

function set_submit(type) {
    if(type == 'disable') {
        document.getElementById('divsubbutton').style.pointerEvents = "none";
        document.getElementById('divsubbutton').style.opacity = 0.5;
    } else {
        document.getElementById('divsubbutton').style.pointerEvents = "auto";
        document.getElementById('divsubbutton').style.opacity = 1;
    }
}

Use as needed:

set_submit('disable')
set_submit('enable')

score 0 · Answer 4 · answered Apr 20 '19 at 00:19

0

Fairly simple - just add an if statement:

<button type="submit" id="subbutton" name="submit_page[]" onclick="if(confirm('Are you sure of your choices?')) this.disabled = 'disabled'">Submit </button>

answered Apr 20 '19 at 00:19

Jack Bashford

38,499
10
36
67

My form did not submit. It just disabled my button. – Need Help Apr 20 '19 at 03:48

How to 'Disable submit button after clicking it'

4 Answers4