Uness
Uness

Reputation: 173

Submit form on button click and disable button

Please I need your help, I want to disable a button on click and submit my form this is the code

            {{ form_start(form, {'attr': {'id': 'myForm'}}) }}

                    //....... NOT important

                {{ form_rest(form) }}

                <button class="btn-large waves-effect waves-light fullwidth" type="submit" id="monBttn"  onclick="myFunction()" name="action"
                        value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}">
                    <i class="material-icons left">save</i>
                    Enregistrer
                </button>
            {{ form_end(form) }}

In my button i called a fuction this is the code

<script>
    function myFunction() {
        buttn = document.getElementById("monBttn");
        document.getElementById("myForm").submit();
        buttn.setAttribute('disabled','disabled');
    }
</script>

my script does not work the button is disabled but it does'nt submit the value Thanks in advance :)

Upvotes: 0

Views: 2074

Answers (3)

Neel Thakkar
Neel Thakkar

Reputation: 406

I have create one demo. It is working fine.

HTML

<form>
    <input type="submit" value="submit" id="submit">
</form>

SCRIPT

$(function(){
        document.getElementById("submit").onclick = function() {
            this.disabled = true;
        }
    });

Upvotes: 1

Uness
Uness

Reputation: 173

Thx guys for the help this is the working script:

<script>
    function myFunction() {
        document.getElementById("monBttn").disabled = true; 
        document.getElementById("monBttn").innerHTML = "Traitement en cours...";
        document.getElementById("myForm").submit();
    }
</script>

Upvotes: 0

Behind the screen
Behind the screen

Reputation: 71

Use

document.getElementById("monBttn").disabled = true;

and you can also display the "please wait" message.

document.getElementById("monBttn").disabled = "Please wait..."

Upvotes: 0

Related Questions