Prevent Double Submission

Question

i have a project on PHP, MySQL and using the CodeIgniter Framework, i have a page where the user submits an order, but the problem is that it takes a while for the system to process it and in the meantime if the user presses the submit button it will be submitted again.

What i am trying to do is to disable the button once it is pressed. Here is the button code

<div class="row">
    <div class="col-md-7">
        <!-- begin panel -->
             <input type="hidden" name="order_status" value="0" />
                <button  type="submit" class="btn btn-success saveit saveorderf_"><?php echo "Save";?></button>
        <!-- end panel -->
    </div>
</div>

What i have tried so far is using the

onClick="this.disabled=true;

but it only disables the button with out the form being submitted.

Any ideas what i might be missing here .

Thanks in advance.

Answer 1

You can replace your code with this:

onclick="this.disabled = true; form.submit();"

the form.submit(); will do the job for you

Answer 2

You can disable the button after form is submitted.

reference: Simplest way to disable button on submission of a form?

$(document).ready(function(){
    $('.once-only').submit(function(){
        $(this).children('button').prop('disabled', true);
    });
});

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<form method="POST" class="once-only">
    <input type="text" name="q"/>
    <button >Send</button>
</form>    

working jsfiddle: http://jsfiddle.net/gKFLG/1/