Smilie Smilie - 4 years ago 162
HTML Question

How to disable multiple submit buttons in a form

I have an issue with one of my forms.

The form has 4 submit buttons, and different actions are carried out depending on which button is pressed.

Whenever I click one of the buttons, I want to disable all of the submit buttons, I managed to put together some code doing exactly that:

$('button, input[type=button]').click(function(e){
$('#btnGuilty').prop('disabled', true);
$('#btnWarning').prop('disabled', true);
$('#btnInnocent').prop('disabled', true);
$('#btnClose').prop('disabled', true);
$(this).parents('form').submit()
});


My original problem was that the form no longer submitted when running this code, and that's what the last line fixes.

Unfortunately it appears that when I do this, nothing really happens (the form is submitted, but data about the submit button being pressed is no longer sent).

My question is how I can work around this issue? - What I really want is for the form to work in the same behavior it used to, but also disabling the buttons to prevent people from submitting the form multiple times, so maybe "extending" the click function seems like what I want to do, but from what I have read, this is not possible.

My form code, just in case:

<form class="form" method="post" action="
{{ route('judgeTicket', ['user_id' => $account->account_id, 'hash' => $utils->generateTicketHash($account->account_id), 'ticket_id' => $ticket->id]) }}">
<div class="form-group">
<textarea class="form-control" rows="6" id="ticketDesc" name="description" placeholder="Description"></textarea>
</div>
<div class="form-group">
<select class="form-control" name="category">
@foreach($categories as $cat)
@if ($ticket->category == $cat)
<option value="{{ $cat }}" selected>{{ $utils->translateCategory($cat) }}</option>
@else
<option value="{{ $cat }}">{{ $utils->translateCategory($cat) }}</option>
@endif
@endforeach
</select>
</div>
@if ($model->hasCachedPermission($group, 'do_single_tickets'))
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="singleDecision" value="1">Single ticket decision
</label>
</div>
</div>
@endif
<div class="form-group">
<button
type="submit"
class="btn btn-success"
name="btnInnocent"
id="btnInnocent">
Innocent
</button>
@if ($suspended == false || $suspended['Type'] == 'Mute')

<button
type="submit"
class="btn btn-danger"
value="Guilty"
name="btnGuilty"
id="btnGuilty">
Guilty
</button>
@else
<button type="submit"
class="btn btn-danger"
value="Guilty"
name="btnGuilty"
id="btnGuilty"
disabled="disabled">
Guilty
</button>
@endif
<button
type="submit"
class="btn btn-warning"
value="Warning"
name="btnWarning"
id="btnWarning">
Warning
</button>
<button
type="submit"
class="btn btn-default"
value="Close ticket"
name="btnClose"
id="btnClose">
Close ticket
</button>
</div>
{!! csrf_field() !!}
</form>

Answer Source

Dont try to handle the submit buttons. User can use different ways to submit the form. (keyboard, touch, ...)

Try maybe this Code:

$(document).ready(function() {
  $('form').on('submit', function(e) {
    $(this).find('button, input[type=button]').prop('disabled', true);
  });
});

A working JsFiddle: https://jsfiddle.net/085nzfos/
(Notice, that the redirect not working, because cross-origin security.)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download