2016-10-24 6 views
0

私はブートストラップモーダルの中にある単純な送信フォームを持っています。このコードはモーダルを使用しないとうまく動作しますが、モーダル内ではpreventDefaultは機能しません。送信関数は、私のエンドポイント:(何ブートストラップのモーダルでpreventDefaultを破るためにやっている任意のアイデア?それともリダイレクトを防止するための別の方法にページにリダイレクト?リダイレクトフォームをモーダルで防ぐことはできません

<div id="bootstrapModal" class="bootstrapModal"> 
<div id="modal-dialog" class="modal-dialog"> 
<div class="modal-content" id="modal-content"> 
<form action="/myendpoint.cmd" id="myForm" name="myForm" role="form"> 
<div class="input-group"> 
<input type="email" name="userEmail" class="form-control" id="emailSignUp" placeholder="Email Address"> 
<span class="input-group-btn"> 
<button type="submit" class="btn btn-secondary" id="emailbtn"">Sign Up</button> 
</span> 
</div> 
</form> 
</div> 
</div> 
</div 




<script> 
$('#myForm').submit(function(e) { 
    var postData = $(this).serializeArray(); 
    var formURL = $(this).attr("action"); 
    $.ajax({ 
     url: formURL, 
     type: "POST", 
     data: postData, 
     success: function(data) { 
    console.log('success!') 
     } 
    }); 
    e.preventDefault(); //STOP default action 
}); 
</script> 

答えて

0

あなたはjQueryの構文で試すことができて

<script> 
$(document).ready(function(){ 
    $('#myForm').submit(function(e) { 
    var postData = $(this).serializeArray(); 
    var formURL = $(this).attr("action"); 
    $.ajax({ 
     url: formURL, 
     type: "POST", 
     data: postData, 
     success: function(data) { 
     console.log('success!') 
     } 
    }); 
    e.preventDefault(); //STOP default action 
}); 
}); 
</script> 
+0

をして確認してくださいフォームアクションを作る= '#' <フォームアクション= "#" ID = "あるmyForm" 名前= "あるmyForm" 役割= "form"> –

+0

うーん...もっと近づく。私はもはやページからリダイレクトされませんでしたが、ページをリフレッシュしましたが、これは私にはできません... – user3390251

0

無効な(二重引用符で囲まれた)ボタンが書かれているようですその行動を壊すかもしれない。

<button type="submit" class="btn btn-secondary" id="emailbtn"">Sign Up</button> 

ただ、下記のような重複した引用符を削除します。

<button type="submit" class="btn btn-secondary" id="emailbtn">Sign Up</button>

関連する問題