2017-06-15 20 views
1

フォームをAjax経由で送信します。私はそれを前にやったことがありますが、何らかの理由で投稿をクリックすると常にフォームを送信してページを更新します。私は送信ボタンが押されただけでコンソールログにテスト機能を作ったが、それは機能しない。Form_Openは常に送信します - Ajax経由で送信する - CodeIgniter

ページが更新されずにコンソールログが機能すると、私はどのようにしてAjaxを自分で行うことができます。

ここに私のフォームがあります(ここでは、例のためにここに入力してください)。

function submit_form(e) { 
    e.preventDefault(); 
    console.log('working'); 
    return false; 
}; 


    {!! form_open('myaccount/product_coupon/add',['id' => 'product_coupon_form', 'onsubmit'=> 'submit_form']) !!} 

Username <input type="text" name="username" class="form-control"> 

<input type="submit" class="btn btn-primary" id="submit"> 

</form> 

私はまた$('#submit').click(function()...ことによってそれを呼び出すJavaScriptで試してみましたが、それはまだ第一何

+0

コンソールにJSエラーがあるかどうかを確認しますか? –

+0

ajaxを使用してフォームを送信する場合は、フォーム#アクションは必要ありません。あなたはボタンクリックでそれを行うことができます。 – kishor10d

+0

私はフォームアクションを ""として残して疲れて、何もせずに投稿し続けます。コンソールのログや成功にエラーはありません。 – Gilbert

答えて

1

もしなかった:あなたはjqueryの

第二を含める確認してください。$(document).ready(function(){ //code here })

第三に、あなたのコードをラップ: フォーム提出の代わりに送信ボタンをクリックしてください

$(document).ready(function(){ 
    $('#product_coupon_form').on('submit' , function(e){ 
      submit_form(e); 
    }) 
}); 
+0

それは動作します!ありがとうございました!なぜ私がそれを呼んだときに私の働きがうまくいかなかったのか知っていますか?なぜ私はドキュメントを準備する前に電話をする必要がありますか – Gilbert

+1

@Gilbertはhttps://stackoverflow.com/questions/6691454/why-wrap-code-into-document-readyとhttps://stackoverflow.com/questions/30894981/を読んでいます。どのように重要なのは、ドキュメントの準備ができている関数のjqueryのコードです。このすべての夏は、DOMがロードされていないためオブジェクトが存在しない* '$(document).ready(function(){'がその文書のチェックを最初に読み込む –

関連する問題