2017-07-26 182 views
0

我開闢了一個提示按鈕:如何防止提示對話框提交表單後進入

$('#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> 

但它也不起作用。有任何想法嗎?

+2

請顯示HTML,因爲您提供的代碼中沒有任何內容與提交的表單有任何關係。你只是簡單地展示一些代碼,當點擊一些東西時會打開一個提示,一旦頁面準備就緒,就會運行一個函數,該函數會設置一個'keypress'事件處理程序。 –

+0

請嘗試在添加文檔按鈕上的按鈕keydown事件上添加一個event.preventDefault()。 – Yatin

+0

謝謝@ScottMarcus。有很多HTML,這就是爲什麼我最初沒有包含它。我已經更新了這個問題。 –

回答

1

好的。所以問題一直是「輸入手動」按鈕實際上是觸發提交。所以當你點擊按鈕時,它立即觸發提交。但是,由於我顯示提示,所以提交會中斷,直到提示關閉。在提示符處按或輸入將觸發要提交的表單。

+0

很高興你解決它! – Luillyfe

1

讓我們嘗試以下操作:

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

而不是

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

讓我知道如何上你的情況下工作! Here有關於您的問題的更多信息。

+0

工作!但現在即使按下提交按鈕,它也不會提交。我會嘗試從你指出的鏈接中接受的答案。 –

+0

接受的答案也不起作用。我在這裏失去了主意。也許我應該只使用一個提示庫。 –

+0

您可以使用$('form')重新使用它。unbind('submit'); – Luillyfe