我開闢了一個提示按鈕:如何防止提示對話框提交表單後進入
$('#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");
}
});
但問題是,當我按回車鍵,即使對話還沒有任何輸入,它會自動提交表單。
我已經阻止表單提交後輸入:
$(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>
但它也不起作用。有任何想法嗎?
請顯示HTML,因爲您提供的代碼中沒有任何內容與提交的表單有任何關係。你只是簡單地展示一些代碼,當點擊一些東西時會打開一個提示,一旦頁面準備就緒,就會運行一個函數,該函數會設置一個'keypress'事件處理程序。 –
請嘗試在添加文檔按鈕上的按鈕keydown事件上添加一個event.preventDefault()。 – Yatin
謝謝@ScottMarcus。有很多HTML,這就是爲什麼我最初沒有包含它。我已經更新了這個問題。 –