如何防止提示对话框在输入时提交表单

时间:2017-07-26 00:29:55

标签: javascript

我有一个打开提示符的按钮:

$('#enter-manual-date').click(function(){
        var date = prompt("Enter the date", "");
        if(date != null && moment(date, 'DD-MM-YYYY', true).isValid()){
            $('#exp').val(date);
        }else{
            $('#exp').val('');
            alert("Invalid Date! Format should be: DD-MM-YYYY");
        }
    });

但问题是,即使对话框仍然没有任何输入,当我按Enter键时,它会自动提交表单。

我已经在输入时阻止表单提交:

$(function(){
        $("form").bind("keypress", function (e) {

            if (e.keyCode == 13) {
                return false;
            }
        });
    });

我也试图阻止默认:

e.preventDefault();

这是HTML。当您单击"添加文档"它会提交表单。按钮:

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">Add Car Document</div>
            <div class="panel-body">
                @include('partials.alert')
                <form id="add-cardoc-form" class="form-horizontal" role="form" method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">

                    <input type="hidden" id="car_id" name="car_id" value="{{ $car_id }}">

                    <div class="form-group{{ $errors->has('car_num') ? ' has-error' : '' }}">
                        <label for="car_num" class="col-md-4 control-label">Reg No.</label>

                        <div class="col-md-6">
                            <div class="input-group">
                                <input id="car_num" type="text" class="form-control" name="car_num" value="{{ old('car_num', $car_num) }}" required>
                                <span class="input-group-btn">
                                    <button type="button" class="btn" id="search-car">Search</button>
                                </span>
                            </div>

                            @if($errors->has('car_num'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('car_num') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="driver" class="col-md-4 control-label">Search Results</label>
                        <div class="col-md-6"> 
                            <ul id="cars-results"></ul>
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('doc') ? ' has-error' : '' }}">
                        <label class="col-md-4 control-label">Document Type</label>
                        <div class="col-md-6">
                            @foreach($doc_types as $dt)
                            <div class="radio">
                              <label>
                                <input type="radio" name="doc_type" class="doc-type" value="{{ $dt }}" {{ isChecked($dt, $default_doc_type) }}>
                                {{ friendlyText($dt) }}
                              </label>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('plate_number') ? ' has-error' : '' }} hidden" id="plate-container">
                        <label for="plate_number" class="col-md-4 control-label">Plate No.</label>

                        <div class="col-md-6">
                            <input id="plate_number" type="text" class="form-control" name="plate_number" value="{{ old('plate_number') }}">

                            @if($errors->has('plate_number'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('plate_number') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="insurance-container form-group{{ $errors->has('insurance_company') ? ' has-error' : '' }} hidden" id="badge-container">
                        <label for="insurance_company" class="col-md-4 control-label">Insurance Company</label>

                        <div class="col-md-6">
                            <input id="insurance_company" type="text" class="form-control" name="insurance_company" value="{{ old('insurance_company') }}">

                            @if($errors->has('insurance_company'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('insurance_company') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>


                    <div class="insurance-container form-group{{ $errors->has('date_insurance_issued') ? ' has-error' : '' }} hidden">
                        <label for="date_insurance_issued" class="col-md-4 control-label">Date Insurance Issued</label>

                        <div class="col-md-4">
                            <input id="date_insurance_issued" type="text" class="form-control" name="date_insurance_issued" value="{{ old('date_insurance_issued') }}">

                            @if($errors->has('date_insurance_issued'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('date_insurance_issued') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="col-md-2">
                            <button class="enter-manual-date btn" data-format="DD-MM-YYYY HH:mm" data-type="datetime" data-id="date_insurance_issued">enter manually</button>
                        </div>
                    </div>


                    <div class="form-group{{ $errors->has('doc') ? ' has-error' : '' }}">
                        <label for="doc" class="col-md-4 control-label">Document</label>

                        <div class="col-md-6">
                            <input id="doc" type="file" class="form-control" name="doc" required>

                            @if($errors->has('doc'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('doc') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('exp_datetime') ? ' has-error' : '' }} hidden" id="exp-datetime">
                        <label for="exp_datetime" class="col-md-4 control-label">Expiration</label>

                        <div class="col-md-4">
                            <input id="exp_datetime" type="text" class="form-control" name="exp_datetime" value="{{ old('exp_datetime') }}" required>

                            @if($errors->has('exp_datetime'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('exp_datetime') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="col-md-2">
                            <button class="enter-manual-date btn" data-format="DD-MM-YYYY HH:mm" data-type="datetime" data-id="exp_datetime">enter manually</button>
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('exp') ? ' has-error' : '' }}" id="exp-container">
                        <label for="exp" class="col-md-4 control-label">Expiration</label>

                        <div class="col-md-4">
                            <input id="exp" type="text" class="form-control" name="exp" value="{{ old('exp') }}" required>

                            @if($errors->has('exp'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('exp') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="col-md-2">
                            <button class="enter-manual-date btn" data-format="DD-MM-YYYY" data-type="date" data-id="exp">enter manually</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-4">
                            <button type="submit" id="add-cardoc-submit" class="btn btn-primary">
                                Add Document
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <a href="/index.php/add-driverdoc" class="pull-right">Add Driver Doc</a>
    </div>
</div>

但它也不起作用。有什么想法吗?

2 个答案:

答案 0 :(得分:1)

让我们尝试以下方法:

$('myform').submit(function(e) {
    e.preventDefault();
});

而不是

$(function(){
    $("form").bind("keypress", function (e) {
        if (e.keyCode == 13) {
            return false;
        }
    });
});

让我知道你的情况如何起作用! Here有关于您的问题的更多信息。

答案 1 :(得分:1)

确定。所以问题一直是&#34;手动输入&#34;按钮实际上是触发提交。因此,当您单击该按钮时,它会立即触发提交。但是,由于我显示提示,提交会中断,直到提示关闭。或者在提示符上按Enter键会触发要提交的表单。