質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 530
退会済みユーザー

退会済みユーザー

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

また、テキストが入力されている 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);
      }
  });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/12/26 14:53

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

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

    を、

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

    キャンセル

  • yambejp

    2019/12/26 14:56

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

    キャンセル

回答 1

0

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

$('#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);
    }
});

以上

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る