jQuery確認前に送信

Question

<form action ="/submit-page/" method='post' class="editable"> 
    <fieldset> 
    <select name="status" id='status'> 
     <option value="Submitted">Submitted</option> 
     <option value="Canceled">Canceled</option> 
       <option value="Application">Application</option> 
    </select> 
      <input type="submit" name="submit" value="SAVE"> 

</form> 

私は上記のフォームを持っています：ドロップダウン値「キャンセル」をクリックして「保存」ボタンを押すと、「はい」と「いいえ」の警告メッセージが表示されます。

ユーザーが[はい]をクリックした場合は、フォームアクションパラメータで希望どおりに送信ページに移動します。 ユーザーが[いいえ]をクリックすると、ページを更新せずに同じフォームページに留まります。 jQueryでこれを行うことはできますか？

Answer 1

うーん... theresは、ここで他の答えに問題があります。あなたのHTMLに対して動作しません。フォーム上の要素は、フォームのsubmitイベントは動作しませんトリガ、submitのnameを持っている場合はjQueryのバグ（私はそれはバグだと仮定）が、あります

。

name属性をinput type="submit"ボタンから削除するか、単に「送信」以外の名前を付ける必要があります。

HTML

<form action ="/submit-page/" method='post' class="editable"> 
    <fieldset> 
    <select name="status" id='status'> 
     <option value="Submitted">Submitted</option> 
     <option value="Canceled">Canceled</option> 
     <option value="Application">Application</option> 
    </select> 
    <input type="submit" value="SAVE" name="submit-button"/> 
    </fieldset> 
</form>​ 

jQueryの

$('#status').on('change', function() { 

    var $this = $(this), 
     val = $this.val(); 

    if (val === 'Canceled' && confirm("are you sure?")) { 
     $this.closest('form').submit(); 
    } 
});​ 

PHP

$submitted = !empty($_POST['submit-button']); 

if($submitted) 
{ 
    // Submit button was pressed. 
} 
else 
{ 
    // Form was submitted via alternate trigger. 
} 

試験PLE

ワーキング：http://jsfiddle.net/xixonia/KW5jp/

が機能していない：http://jsfiddle.net/xixonia/KW5jp/1/

編集

あなたはので、あなたの質問を更新していない、とこの答えは、もはやあなたは何のために有効なソリューションです。探している。代わりにChris Platt's answerをご覧ください。

編集再び

これは、Chris Platt's answerの修正版です。最初の$(...)に含まれるロジックを実行する前に、DOMが準備完了（要素がロードされる）するまで待機します。

$(function() { // this first jQuery object ensures that... 

    /// ... the code inside executes *after* the DOM is ready. 

    $('form.editable').submit(function(){ 
     if ($('#status').val()=='Canceled') { 
      if (!confirm('Warning message here. Continue?')) { 
       return false; 
      } 
     } 
    }); 

}); 

Answer 2

はい、それは行うことができます。

$('#status').change(function(){ 
    var val = $(this).val(); 
    if(val == 'Submitted') { 
    $('.editable').submit(); 
    return false; 
    } else if (val == 'Canceled') 
    { 
     var answer = confirm('are you sure'); 
     return false; 
    } else { 
    ... 
    } 
}); 

これ、クリス・プラッツソリューションとは対照的に、とすぐにあなたがドロップダウンボックスで選択した値を変更すると、それを行います。送信ボタンをクリックすると、彼はそれを行います。

Answer 3

$('form.editable').submit(function(){ 
    if ($('#status').val()=='Canceled') { 
     if (!confirm('Warning message here. Continue?')) { 
      return false; 
     } 
    } 
}); 

Answer 4

のjQueryでフォームの送信を傍受する最も直接的な方法は、このようなものです：

$("form.editable").submit(function(){ 
    if(confirm("Really submit the form?")) { 
     return true; 
    } else { 
     return false; //form will not be sumitted and page will not reload 
    } 
}); 

詳細についてhttp://jqapi.com/#p=submitを参照してください。