如何在表单

时间:2017-02-05 12:00:54

标签: javascript jquery html forms twitter-bootstrap-3

我的某个表单存在问题。

表单有4个提交按钮,根据按下的按钮执行不同的操作。

每当我点击其中一个按钮时,我想要禁用所有提交按钮,我设法将一些代码放在一起完成:

$('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()
            });

我最初的问题是运行此代码时不再提交表单,这就是最后一行修复的内容。

不幸的是,当我这样做时,似乎没有任何事情发生(提交表单,但不再发送有关按下提交按钮的数据)。

我的问题是如何解决这个问题? - 我真正想要的是表单以与以往相同的行为工作,但也禁用按钮以防止人们多次提交表单,所以可能“扩展”点击功能似乎就像我想做的那样,但从我所读到的,这是不可能的。

我的表单代码,以防万一:

<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>

1 个答案:

答案 0 :(得分:0)

不要尝试处理提交按钮。用户可以使用不同的方式提交表单。 (键盘,触摸......)

尝试这个代码:

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

工作的JsFiddle:https://jsfiddle.net/085nzfos/
(注意,重定向不起作用,因为跨源安全性。)