フォーム内のフォームの送信を防止する

Question

多くの入力フィールドを持つ巨大なフォームウィザードを作成しています。フィールドはdisplay: none;のセクションの内側にあり、ボタンをクリックするとセクションを歩いていき、最後にフォームを送信します。あるセクションの中には、ajax経由で画像をアップロードする別のフォームがあります。 ajaxを使用するには、フォームがevent.preventDefault(); と提出されないようにする必要がありますが、これによりペアレンタルフォームが送信されます。親のフォームが提出されないようにするにはどうすればいいですか？

<form action="" id="wizard"> 
    <section id="sec1"></section> 
    <section id="sec2"> 
    <form id="ajaxform"> 
     <input type="file" id="ajaxfile"> 
     <input type="submit" value="upload"> 
    </form> 
    </section> 
    <section id="sec3"></section> 
    <button type="button">Back</button> 
    <button type="button">Next</button> 
</form> 

jQueryのは、次のようになります：

$(document).ready(function() { 
    $('#ajaxform').submit(function(e) { 
     e.preventDefault(); 
     $.ajax({stuff...}); 
    }); 
}); 

Answer 1

event.preventDefault()は、イベントのデフォルト動作を防止するが、他の要素にバブルアップからそれを停止しません。HTML構造は次のようになりますevent.stopPropagation()使用します

はキャプチャと バブリング段階で現在のイベントのさらなる伝播を防ぎます。

---

フォームが入れ子にするべきではありません。このような無効なマークアップの動作は指定されていません。マークアップを修正する必要があります。

何らかの理由でマークアップを変更できない場合は、外部フォームにsubmitイベントを使用して、送信を許可または禁止する値が存在するかどうかを確認します。たとえば、最後のセクションに隠し値があるのは、セクションに到達したときに変更される（表示されている場合のみ）ことです。