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

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

ただいまの
回答率

91.35%

  • JavaScript

    11222questions

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

  • WordPress

    4770questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

残りの設問数を表示するJavascriptをワードプレスプラグインContact form7内で動作させたいのですが、上手く動作しません。

受付中

回答 0

投稿 2017/11/23 21:15

  • 評価
  • クリップ 0
  • VIEW 41

前提・実現したいこと

ワードプレスプラグイン「Contact form7」を利用して問い合わせフォームを作成し、その中で残りの設問数をパーセント表示をしたいです。

現在の状況としてましては、拾ってきたコードを基に使用したいコードを作成し、テスト環境ではソースコードの状態では動作を確認しました。
こちらのコードをContact form7で動作させようと思うと動きません。

またこちらのコードではinputの数を数えるようにできていると思うのですが、selectなどの項目も合わせて数える場合はどのように設定したらよいでしょうか?

試したこと

・本番のワードプレス環境では動作(コンタクトフォーム7以外の部分)

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax</title>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
    <form action="form.html" method="post" name="hoge" id="js-form2">

<p id="output">dummy</p><p>%</p>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion01_1" name="qustion01" value="1">
      <label for="qustion01_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion01_2" name="qustion01" value="2">
      <label for="qustion01_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion01_3" name="qustion01" value="3">
      <label for="qustion01_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion02_1" name="qustion02" value="1">
      <label for="qustion02_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion02_2" name="qustion02" value="2">
      <label for="qustion02_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion02_3" name="qustion02" value="3">
      <label for="qustion02_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion03_1" name="qustion03" value="1">
      <label for="qustion03_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion03_2" name="qustion03" value="2">
      <label for="qustion03_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion03_3" name="qustion03" value="3">
      <label for="qustion03_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion030_1" name="qustion030" value="1">
      <label for="qustion030_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion030_2" name="qustion030" value="2">
      <label for="qustion030_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion030_3" name="qustion030" value="3">
      <label for="qustion030_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion030_1" name="qustion031" value="1">
      <label for="qustion030_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion030_2" name="qustion031" value="2">
      <label for="qustion030_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion030_3" name="qustion031" value="3">
      <label for="qustion030_3">どちらでもない</label>
    </li>
  </ul>
  <ul class="qustionwrap">
    <li>
      <input type="radio" id="qustion030_1" name="qustion032" value="1">
      <label for="qustion030_1">YES</label>
    </li>
    <li>
      <input type="radio" id="qustion030_2" name="qustion032" value="2">
      <label for="qustion030_2">NO</label>
    </li>
    <li>
      <input type="radio" id="qustion030_3" name="qustion032" value="3">
      <label for="qustion030_3">どちらでもない</label>
    </li>
  </ul>
</form>

<div class="message" id="message">
<!-- 一時的にcssを直書きしてます汚くすいません! -->
<div class="comment">
    <div id="restMessage">あと<span id="restCheckBoxLength"></span>問です。</div>
    <div id="lastMessage" style="display:none;">お疲れ様でした。チェック項目の入力が完了しました。最後に送付先情報を入力してください。</div>
</div>
<div class="bar" style="width:300px;height:30px;border:solid 1px #ccc;"><p style="width:0%;height:30px;background:red;" id="restCheckBoxPercent"></p></div>
</div>


    <script>
        var $form = $('#js-form2'),
                $restCheckBoxLength  = $('#restCheckBoxLength'),
                $restCheckBoxPercent = $('#restCheckBoxPercent'),
                $message             = $('#message'),
                $restMessage         = $('#restMessage'),
                $lastMessage         = $('#lastMessage'),
                radio_type_array = [],
                radio_type_length = 0;

        //チェックボックスが入っている数を習得
        var checkedInputLength = function(){
            return $form.find('input:checked').size();
        }

        //残り何パーセントかを習得
        var percentageFromForm = function(){
            return checkedInputLength() / radio_type_length * 100 + '%';
        }
        //パーセント習得表示用
        var percentageFromForm2 = function(){
            return checkedInputLength() / radio_type_length * 100;
        }

        //残り○個とパーセントを入れる
        var updateRestCheckBox = function(){
            $restCheckBoxLength.text(radio_type_length - checkedInputLength());
            if (percentageFromForm() === '100%') {
                $restMessage.hide();
                $lastMessage.show();
                setTimeout(function(){
                    $message.hide();
                },5000);
            }
            $restCheckBoxPercent.css('width', percentageFromForm());
        }

        //パーセント表示
       var updateRestCheckBox2 = function(){
    var percentNum = (percentageFromForm2());
    var percentNum2 = Math.round(percentNum);
        target = document.getElementById("output");
        target.innerHTML = (percentNum2);
    }


        //項目が何個あるかを習得
        $form.find('input').each(function(){
            var $this = $(this),
                    name  = $this.attr('name');
            if (radio_type_array.indexOf(name) == -1) {
                radio_type_array.push(name);
                radio_type_length++;
            }
        })

        //フォームの値が更新されたら更新状況をセット
        $form.on('change', function(){
            updateRestCheckBox();
        })

        //最初の値をセット
        updateRestCheckBox();

        //フォームの値が更新されたら更新状況をセット
        $form.on('change', function(){
            updateRestCheckBox2();
        })

        //最初の値をセット
        updateRestCheckBox2();
    </script>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • kei344

    2017/11/23 21:18

    エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

    キャンセル

  • NaokiTanizawa

    2017/11/23 21:22

    ご回答ありがとうございます。こちらのエラーがでておりました。「Uncaught SyntaxError: Unexpected token <」こちら調べてみましたが、わかりませんでした。

    キャンセル

まだ回答がついていません

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

ただいまの回答率

91.35%

関連した質問

  • 解決済

    jQueryをもっとスマートにかけないでしょうか。

    特定のラジオボタンにチェックをしたら他の項目を表示/非表示にするjQueryを書きました。 一応動くのですが、見ての通り頭悪い書き方になってしまいました。 さらに出来れば、

  • 解決済

    JavaScriptとラジオボタンの連動

    前提・実現したいこと ラジオボタンで入力した値を使って配列に格納したデータを探し出し表示したい。 発生している問題・エラーメッセージ ラジオボタンを選択し、結果を出力しよ

  • 受付中

    選択済みのラジオボタンを押すと選択が解除される

    選択済みのラジオボタンを押すと選択が解除される 上記の通りの実装を考えております。下記のソースコードのようにラジオボタンが1セットのみでしたら、下記の通りのソースコードでも問題が

  • 解決済

    formの選択をプルダウン以外で作成したい。

    formでInput画面を作っています。 selectのタグを使うとプルダウンになりますね。 これを、例えば↓のように4つの文字列のどれかをクリックすることによりそこが選択されるよ

  • 解決済

    【js】チェックボックスで表示OR非表示が切り替わりません。。

    ■やりたいこと チェックボックス選択でテーブルの行の、表示OR非表示を切り替えたいです。 ■いまの状態 左側(1だけ表示)にチェックが入っているときに、3の行が消えてくれない

  • 解決済

    jQueryで複数条件の絞込み検索

    jQueryを使って絞込み検索を作りたいです。 下記コードでor検索はできるようになりました。 全てをor検索ではなく、各hoge-1、hoge-2はor検索、hoge-1とh

  • 解決済

    店ごとにカレンダーの休日の設定

    jQuery UI のお問い合わせフォーム欄に「カレンダー」を実装していますが… 実行したい内容 ・店(店舗A)を選択後、カレンダー通りに、選べるようにしたい。 ・店ごとの休日が異

  • 解決済

    class直下 radioのvalueをすべて取得したい

     やりたいこと 現在、新規登録画面を作成しています submitが行われた時に,各科目radioボタンのvalue値を計算しようとしたところ input内のnameを毎回

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

  • JavaScript

    11222questions

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

  • WordPress

    4770questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • トップ
  • JavaScriptに関する質問
  • 残りの設問数を表示するJavascriptをワードプレスプラグインContact form7内で動作させたいのですが、上手く動作しません。