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

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

ただいまの
回答率

90.39%

  • JavaScript

    21489questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8549questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

ボタンを押したときにJSが実行されるが、その後連打しても内容が変わらない限り、実行されないようにできないのでしょうか?

解決済

回答 1

投稿 編集

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

退会済みユーザー

送信ボタンを押しまくるとどんどん背景が縦に長くなってしまう問題が起きます。
ボタンを押したときにJSが実行されるが、その後連打しても内容が変わらない限り、実行されないようにできないのでしょうか?
そしてinputboxにテキストがを入れて送信ボタンを押した時に背景の縦幅が小さくなる、つまり元のサイズに戻るように指定です。
これも連打すると小さくなり続けます。

空の状態で一度押すと、中にテキストを入れて縦が元のサイズに小さくなった時のみ、もう一度空にしたときに押すと伸びるという風にしたいです。
そこまではできたのですが、空の状態で送信ボタンを押しまくると当たり前ですが永遠に背景の縦幅が大きくなり続けます。
toggleclassしかないですかね?

再現
https://codepen.io/anon/pen/bBxqjR

なぜかボタンを押しても、再現されませんが、つまり
下記の部分のspanの中にinputが空だった場合、送信ボタンを押すと
必須項目と出るということです。

<dt>
<label for="name">お名前 (必須)</label>
</dt>
<span class="js-is-error--text-input1"></span>

するとお名前の下に必須項目というテキストが出てきます。
すると一文字分背景が足りなくなる対処をしたいということです。

$('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
        // inputに文字が入っていなければ、必須項目と出るようにする。
        // spanタグ
        $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
                                                              'text-shadow': '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '2px 2px 2px #fff'}); // +改行を可能にするために必要
        // 背景の縦幅を必須項目というテキスト分高くする。
        var heightGet = $('#js-height-adjustment').height(); // sectionタグ
        $('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
        checkform = false; // var省略
    }else{
            // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
            $('.js-is-error--text-input1').text(''); // spanタグ
    }

上記のcheckform = false; // var省略の前にもうひとつifをつくって、
heightGet=trueとして、そのifにheight==falseという条件を加えれば、
falseになった時だけ1emプラスされるとできませんか?

ただこんな大変なことをしないと連打防止はできないのでしょうか?

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

最終的なエラーの形式を理解しきれなかったのですが、入力必須チェックのサンプルを提示します。基本的にはエラーがあったら、その文字を対象のテキストの上に表示して背景色を変更する物です。ヒントになればと思います。
同じエラーを出し続けない、という観点では

$("p.error").remove();
$("dl dd").removeClass("error");


で、エラー内容を初期化している、というところがポイントです。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
    //お問い合わせフォームチェック
    $(function(){
      $('#js-error-inquiry').submit(function(){
        //エラーの初期化
        $("p.error").remove();
        $("dl dd").removeClass("error");
        var checkform = true;
        $(":text,textarea").filter(".validate").each(function(){
          //必須項目のチェック
          $(this).filter(".required").each(function(){
            if($(this).val()==""){
              $(this).parent().prepend("<p class='error'>必須項目です</p>")
              $("p.error").parent().addClass("error");
              checkform = false;
            }
          });
        })
        return checkform;
      });
    });
    </script>
    <style type="text/css">
      form {background-color:green;}
      dl dd p.error{
        margin:0;
        color:red;
        font-weight:bold;
        margin-bottom:1em;
      }
      dl dd.error input {background:#FFCCCC;}
    </style>
  </head>
  <body>
    <form id="js-error-inquiry" class="inquiry-form" role="form"><!-- action="mail.php" -->
    <dl>
      <dd>
        <input type="text" name="name" size="100" class="validate required" />
      </dd>
      <dd>
        <input type="text" name="name" size="100" class="validate required" />
      </dd>
    </dl>
      <button type="submit">test</button>
    </form>
  </body>
</html>

追記(html全体)

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
//お問い合わせフォームチェック
    $(function(){
$('#js-error-inquiry').submit(function(){
    var checkform = true;
    // 以下input一つ目
    // inputタグ
    if($('.js-is-input-error1').val() == ''){
        //まだエラーメッセージが出力されていなければ、背景色を長くする
        if($('.js-is-error--text-input1').text() == ''){
          var heightGet = $('#js-height-adjustment').height(); // sectionタグ
          //$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
          $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
        }
        // inputに文字が入っていなければ、必須項目と出るようにする。
        // spanタグ
        $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
                                                              'text-shadow': '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '0px 0px 10px #fff,'+
                                                                             '2px 2px 2px #fff'}); // +改行を可能にするために必要
        checkform = false; // var省略
    }else{
        //既にエラーメッセージがあった場合は背景色の長さを元に戻す
        if($('.js-is-error--text-input1').text() != ''){
          var heightGet = $('#js-height-adjustment').height(); // sectionタグ
          $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
        }
        // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
        $('.js-is-error--text-input1').text(''); // spanタグ
    }
    return checkform;
});
    });
    </script>
    <style type="text/css">
#js-height-adjustment{
  background-color:red;
height:500px;
}
.inquiry {
    position: relative;
    padding: 34rem 0 35.5rem 0;
    width : 100%;
    /*background: url(./img/common-img/inquery-back.png) no-repeat;*/
    background-position: center center;
    background-size: cover;
}

@media (min-width: 960px) {
.inquiry {
    padding: 53rem 0 28rem 0;
}
}

/*入力フォーム一覧の位地*/
.inquiry-wrap {
    position: absolute;
    top: 7.6%;
    left: 8%;
}

@media (min-width: 640px) {
.inquiry-wrap {
    top: 7.6%;
    left: 11%;
}
}

@media (min-width: 960px) {
.inquiry-wrap {
    position: absolute;
    top: 10.3%;
    left: 11%;
}
}

.heading2_color_white {
    text-shadow:
                1px 1px rgba(0, 0, 0, .2),
                2px 2px rgba(0, 0, 0, .1),
                3px 3px rgba(0, 0, 0, .1),
                4px 4px rgba(0, 0, 0, .05),
                5px 5px rgba(0, 0, 0, .05),
                6px 6px rgba(0, 0, 0, .05)
                ;
}

.heading2_color_white,.inquiry-form dt {
    color: white;
}

.inquiry-form dt {
    text-shadow:
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                0px 0px 10px #fff,
                2px 2px 2px rgba(0,0,0,.9);
    color: #000;
    font-weight: bold;
}

/*フォーム~ボタンまでの横幅、行間一括指定、個人情報ボックス以外*/
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
    width: 90%;
    height: 1.8em;
    line-height: 1.8;
    border-style: none;/*選択時の枠線を無くす*/
}

@media (min-width: 960px) {
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
    width: 40%;
}
}

.inquiry-form__input-box,.inquiry-form__input-box_kind_textarea {
    opacity: 0.7;
}

.inquiry-form__input-box {
    margin-bottom: 1rem;
}

.inquiry-form__input-box_kind_textarea .inquiry-form__body {
    margin-bottom: 2rem;
    resize: horizontal;/*横のみリサイズ可能*/
}

/* コメントボックスの高さ */
.inquiry-form__body {
    height: 7rem;
}

@media (min-width: 960px) {
.inquiry-form__body {
    height: 10rem;
}
}
/* /コメントボックスの高さ */

.inquiry-form__privacy {
    border: 0.1rem solid #03AFFF;
    width: 78%;
    padding: 2.3rem 3rem 0 3rem;
    height: 12rem;
    line-height: 2;
    overflow-y: scroll;
    background: #fff;
    opacity: 0.7;
}

@media (min-width: 960px) {
.inquiry-form__privacy {
    width: 37%;
}
}

.inquiry-form__primary-btn {
    display: block;
    margin-top: 4rem;
    height: 5.5rem;
    background: rgb(0, 239, 123);
    color: #fff;
    font-size: 2.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 5.5rem;
    text-align: center;
    text-shadow: 1px 1px 0px #000,
                 -1px 1px 0px #000,
                 1px -1px 0px #000,
                 -1px -1px 0px #000;
    box-shadow: 2px 2px 2px rgba(0,0,0,.9);
}
form {background-color:green;}
    </style>
  </head>
  <body>
<section id="js-height-adjustment" class="inquiry">
                    <div class="inquiry-wrap"><!-- コンタクトの要素をまとめてポジションで移動するため -->
                        <h2 id="js-inquiry" class="heading2_color_white heading2">CONTACT</h2>
                        <form id="js-error-inquiry" class="inquiry-form"  method="post" role="form"><!-- action="mail.php" -->
                            <dl>
                                <dt>
                                    <label for="name">お名前&nbsp;(必須)</label>
                                </dt>
                                <span class="js-is-error--text-input1"></span>
                                <dd class="inquiry-form__input-box">
                                    <input id="name" class="js-is-input-error1" name="name" onclick=””></dd>
                            <button class="inquiry-form__primary-btn js-fadein-from-bottom
animation-hover action-hover" type="submit">ご相談完了</button>
                        </form>
                    </div><!-- /.inquiry-wrap -->
                </section><!-- /#about -->
  </body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/23 19:20 編集

    すいません。現在、クリスマス休暇中で26日まで実機を触れないのでその後に確認とさせてください。宜しくお願い致します。

    キャンセル

  • 2016/12/24 14:06

    ありがとうございました。
    その後、3つすべてに適応したところうまくいきました。
    なぜ一つないしは二つだけ適応すると全く背景画像が大きくならなかったのかという理由はわかりませんが、おかげさまで結果は出ました。

    キャンセル

  • 2016/12/24 14:08

    ただ下記の部分がなぜ二つプロパティが必要で'height': heightGet + 'em'だけではだめなのでしょうか?
    $('#js-height-adjustment').css({'height': heightGet + 'px',
    'height':'+=30em'})


    javascript em pxとググってもあまり情報がありません。
    px以外は上記のように二重に書かないといけない仕様なので消化?

    キャンセル

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

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

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

  • JavaScript

    21489questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8549questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • トップ
  • JavaScriptに関する質問
  • ボタンを押したときにJSが実行されるが、その後連打しても内容が変わらない限り、実行されないようにできないのでしょうか?