写真をアップロードして投稿し、また次の投稿をしようとすると、写真だけが何度も投稿される

Question

現在、簡易チャットアプリを作成しております。

フォームに投稿内容を入力し送信ボタンを押すと、非同期で投稿内容が反映されるようになっております。

現在、新たに写真を投稿しても非同期で写真が投稿されるようにしたく実装中なのですが、

画像選択→アップロード→反映
までは同期通信でうまくいくのですが、

次の投稿で、例えば「こんにちは」と入力し、投稿すると、
投稿内容に「こんにちは」はなく、先程投稿した画像だけが反映されます。
※「こんにちは」は入力フォームに残ったままです。
※画像を投稿しない場合は、きちんとフォームから「こんにちは」は消えます。

画像が残らないようにして、次の投稿も（画像を含めてでも非同期通信で）うまく動作するようにしたいのですが、
どのようにすればよいのか、教えていただけませんでしょうか。
どうぞよろしくお願いいたします。

※非同期通信のコードを添付させていただきます。

   .done(function(data){
      var html = buildHTML(data);
      console.log(data);
      $('.main-content_body_list').append(html);
      $('.main-content_footer_body_message-area').val('')
      $('#form')[0].reset();
      $('.main-content_body_list').animate({scrollTop: $('.main-content_body_list')[0].scrollHeight}, 'fast');
      $(".main-content_footer_body_submit-btn-area").prop("disabled", false);
    })
    .fail(function(){
      alert('error');
    })
  });
});



HAMLファイル


  .main-content_footer
    .main-content_footer_body
      =form_for [@group, @message] do |f|
        .main-content_footer_body_message
          =f.text_field :content, class: 'main-content_footer_body_message-area', placeholder: 'type a message'
          %label.upload-label{for: "upload-icon"}
            %i.fa.fa-image
            = f.file_field :image, id: "upload-icon"
        .main-content_footer_body_submit-btn
          =f.submit 'Send', class: 'main-content_footer_body_submit-btn-area'

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を画像で無くコードブロックで提示されたほうが回答を得やすいと思います。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[Eltk]

失礼しました。修正いたしました。
よろしくお願いいたします。

Answer 1

HTMLが提示されていないので状況を再現できませんが、フォームごとリセットしてしまえばよいのでは。

【フォームの内容をリセット（初期値に戻す） | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website】
http://shanabrian.com/web/javascript/form-reset.php

【HTMLFormElement.reset | MDN】
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/reset

Comments

[Eltk]

ありがとうございます！
今、参考にさせていただき、jquery形式で書いてみたのですが、
form_forで記述した場合、イベントを発生させるクラスは僕のコードだとどれにあたるのでしょうか。
※JSファイルとHAMLファイルは添付し直しました。
何度も申し訳ございません。

[kei344]

HAMLが何かはわかりませんが、デベロッパーツールでidやクラスを確認すればよいです。（書き換えられた質問文にある「$('#form')[0].reset();」がリセットするコードなのでは）

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

[Eltk]

わかりました。やってみます。
教えていただき、ありがとうございます！