テキストが入力されていない場合にボタンを押せないようにしたい

Question

テキストが入力されていないときにボタンを押せないようにしたいのですが下記のプログラムでは正常に動作せずテキストが入力されていないときでもボタンが押せてしまいました。
何が原因でボタンを押せるようになってしまうのでしょうか。

また、テキストが入力されている or 画像が選択されているときにボタンを押せるようにしたいのですがこれはどのようにして実装できるのでしょうか。

<div class="post-card">
    <%= form_with model: @post do |f| %>
        <%= f.text_area :text, placeholder: "投稿内容", class: "post-form-new", rows: "3",onkeyup: "ShowLength(value);" %>
      <div class="new-buttons">
        <label>
        <span class="filelabel">
        <%= f.file_field :image, id: "filesend" %>
        <%= image_tag "photo", width: "32", height: "26"%>
        </span>
        </label>
      　
        <%= f.submit "投稿", class: "new-post-btn" %>
        <p id="inputlength" class="new-textlength">0/140</p>
      </div>
    <% end %>
</div>

$(function() {
  $('#submit').prop('disabled', true);
  $('#text').on('keydown keyup keypress change', function() {
      if ($(this).val().length > 0) {
          $('#submit').prop('disabled', false);
      } else {
          $('#submit').prop('disabled', true);
      }
  });
});

Comments

[miyabi_pudding]

Ruby on Railsが詳しく無いので、わからないですが、
おそらく、#submit要素が取得できてないと思います。

<%= f.submit "投稿", class: "new-post-btn" %>

を、

<%= f.submit :submit, value: "投稿", class: "new-post-btn" %>
としてもうまくいきませんか？
（要は、投稿ボタンに、id="submit"が振られてない可能性大）

[yambejp]

rubyのソースではなくhtmlとして吐き出されたものを
ソースで提示するとよいでしょう

Answer 1

何が原因でボタンを押せるようになってしまうのでしょうか。

$('#submit')の指定が間違っていると思います。
submitはID名でないです。submitボタンにクラス名が設定されているので、クラス名で指定しましょう。
$('.new-post-btn').prop('disabled', true);

テキストが入力されている or 画像が選択されているときにボタンを押せるようにしたいのですが

これは、ファイル選択のchangeイベント時に選択の有無をチェックすればできます。
以下のコードで、選択ファイルパスが取得できます。未選択の場合は空文字です。
document.getElementById("filesend").value

以下がコードです。

$(function() {
  $('.new-post-btn').prop('disabled', true);
  $('#text').on('keydown keyup keypress change', function() {
    var path = document.getElementById("filesend").value;
    if ($(this).val().length > 0 || path!="") {
        // テキストと画像少なくともどちらか入力されている場合
        $('.new-post-btn').prop('disabled', false);
    } else {
        $('.new-post-btn').prop('disabled', true);
    }
  });
});

// ファイル選択のchangeイベント
$('#filesend').on('change', function() {
    var path = document.getElementById("filesend").value;
    if (path!="" || $('#text').val().length>0){
        // テキストと画像少なくともどちらか入力されている場合
        $('.new-post-btn').prop('disabled', false);
    }else{
        $('.new-post-btn').prop('disabled', true);
    }
});

以上