2017-05-20 4 views
0

だから私は、モーダルブートストラップ この内部形式を検証しようとしていますが、フォームJS呼び出す関数は、フォームの提出とAjaxリクエストが完了した後にフォームの送信を防ぐ

<div id="extendWorkflowModal" class="modal fade" role='dialog'> 
    <div class="modal-dialog" style="width: 94%"> 
    <div class="modal-content"> 
     <header class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close Modal</span></button> 
     <h4 class="modal-title" id="mySmallModalLabel" style="padding-left: 2%;">Select a block</h4> 
     </header> 
     <form id="wfpopup" onsubmit ='return addTasksPopUP();' method="post"> 
     <div class="modal-body"> 

      <%=render 'workflowpanel' %> 
       <br /> 
     </div> 
     <div class="modal-footer"> 
     <button type="submit" class="btn btn-primary" id="extendConfirmed">Add</button> 
     <button type="button" data-dismiss="modal" class="btn">Cancel</button> 
     </div> 
     </form> 

    </div> 
    </div> 
</div> 

であり、これはある機能ですAjaxのリクエストが完了します後は、フォームが婚約/ IDをURLにPOSTメソッドで要求を行っているが、私はフォームがgetメソッドでリクエストを作成する必要があることにしたいが、私が手を使用する場合、問題があると思われる

function addTasksPopUP() { 

    $.ajax({ 
    type: "POST", 
    url: '/timeline/addTaskPopup/' + engagement_id, 
    data: $('#workflowpopup').serialize(), 
    success: function(msg) { 
     $("#thanks").html(msg) 
     $('#extendWorkflowModal').modal('hide'); 
     $("#apd_success").show(); 
    }, 
    error: function() { 
     console.log("failure"); 
    } 
    }); 

} 

と呼ばれています方法を私は間違って取得またはRequest-URIが大きすぎるフォームには50〜60ほどのフィールドが多数含まれているので、私はpost.Anyアドバイスとしてメソッドを使用していますので、大きな助けになります。

答えて

0

あなたはajaxを使用しています。フォームonsubmitイベントでajax関数を呼び出す必要はありません。 'id = "extendConfirmed"で' onclick 'イベントを通じてajaxを呼び出してみてください。それで十分です。

関連する問題