javascript - How to prevent prompt dialog from submitting the form upon enter -
i have button opens prompt:
$('#enter-manual-date').click(function(){ var date = prompt("enter 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"); } }); but problem when press enter if dialog still doesn't have input, automatically submits form.
i'm preventing form submission upon enter:
$(function(){ $("form").bind("keypress", function (e) { if (e.keycode == 13) { return false; } }); }); i tried prevent default:
e.preventdefault(); here's html. submits form when click on "add document" button:
<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 $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> but doesn't work either. ideas?
let's try following:
$('myform').submit(function(e) { e.preventdefault(); }); instead of
$(function(){ $("form").bind("keypress", function (e) { if (e.keycode == 13) { return false; } }); }); let me know how works on case ! here there more information question.
Comments
Post a Comment