フォームの送信ボタンがスライドトグルされたリスト要素を閉じるのを防ぐ

Question

私はリスト要素の中にフォームを持っています。リスト項目の中にラップされたフォームは、デフォルトでは隠されており、slideToggleを呼び出すボタンをクリックすると表示され、リストに 'display：list-item'のインラインクラスが与えられます。ユーザーがフォームのサブミットボタンをクリックすると、liコンテナをslideToggle関数で作成したインラインスタイルを取り除いて閉じるという望ましくない効果があります。表示要素、すなわちdispaly：list-itemのままにするために、フォーム要素をワープするリスト要素が必要です。

<ul class="contact"> 
    <li>class="gravity-form"> 
    <div> 
     <form> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div class="gform_footer left_label"> 
     <input type="submit" id="gform_submit_button_1" class="button gform_button" 
     value="Submit" tabindex="5"> 
     </div>   
     </form> 
    </div> 
    </li> 
</ul> 

私の無益な努力は、これまで再instateインラインクラス表示しようとしていた次のようにHTMLの構造は次のとおりです。私はね

$('#gform_submit_button_1').bind('click', function(event) { 
$(this).prevUntil('ul.contact').children() 
    .find('li.gravity-form').css('display' , 'list-item');  
    }); 

：でリスト項目これが正しい方向であり、セレクタが正しい方向に向いているかどうかはわかりません。私はイベントpreventDefaultを試しましたが、これは明らかにフォームの送信を妨げています。何か案は？どうもありがとう。

Answer 1

event.preventDefault()を試してからAJAXポストを送信してフォームを送信してください。

$('#gform_submit_button_1').bind('click', function(event) { 
    data = { 
    formData: $('form input').val() 
    } 
    $(this).preventDefault() 
    $.post('somepage.php', function(data) { 
    $('.result').html(data); 
    }); 
}); 

Answer 2

最初にフォームを表示するためにどのボタンをクリックしたかは不明です。私はそれをどこかの外のボタンにすると仮定しています。

<input type="button" id="showform" /> 
<ul class="contact"> 
    <li id="gravity-form"> 
    <div> 
     <form> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div class="gform_footer left_label"> 
     <input type="submit" id="gform_submit_button_1" class="button gform_button" 
     value="Submit" tabindex="5"> 
     </div>   
     </form> 
    </div> 
    </li> 
</ul> 

ように私は私のコードを記述します。私は、これはあなたの問題を解決を願ってい

$('#showform').click(function(){ 
    $('#gravity-form').slideToggle(); 
}); 

$('#gform_submit_button_1').click(function(){ 
    // do something like $.ajax(url, params, method, callback); 
}); 

。