やりたいこと
1つのフォーム内に、画像の登録フォームと文章の入力フォームがあります。
そのフォーム内で、
1.画像の登録だけはajaxでその場で登録=ページ更新なしで画像をサーバーに保存
2.その後、文章部分はsubmitで送信してphp側で処理してDBに登録
をしたいと思っています。
※事情により、上記の2つを同じフォーム内で行っています。
書いたコード
以下のようなコードにしました。
// html <form name="edit" action="" method="post"> <input type="file" name="content_image" accept=".jpg,.gif,.png,image/gif,image/jpeg,image/png"> <button type="submit" data-button-type="save-image">押すと画像をajaxで保存</button> <textarea name="content_text"></textarea> <button type="submit" name="page_submit">編集を保存</button> </form>
// jQuery $(document).on('click','[data-button-type="save-image"]',function(){ $('form').submit(function() { // フォームデータ(画像ファイル)の取得・セット var fd_save = new FormData(); var fd_save = new FormData($(this).get(0)); $.ajax({ url: 'ajax_images.php', type: 'POST', data: fd_save, cache: false, contentType: false, processData: false, dataType: 'html' }) .done( (data) => { $('[data-space-type="save-img-message"]').html(data); //保存を実行 }) .fail( (data) => {}) .always( (data) => {}); return false; //ページ更新をしたくないのでsubmit中止 }); }); $('#page_content_edit').on('click','[data-button-type="page_content_edit_submit"]',function(){ $('form').submit(function(){ }); });
困っていること・解決したいこと
上記のコードで、ajaxで画像を保存する際にページをリロードさせたくないために「return false;」をしているのですが、おそらくその影響で、ajaxでの画像保存後に「<button type="submit" name="page_submit">編集を保存</button>」を押してもsubmitができません。
※ajaxで画像保存しない場合はsubmitができます。
一度「return false;」した状態が続いてしまっているせいだと思うのですが、どのようにすればそれを解除し、通常通りsubmitできるのでしょうか。
ご存じの方がいらっしゃいましたら、どうかご教授いただければ幸いです。
何卒、よろしくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/18 14:13