Bootstrapで見積フォームを作成したい。

前提として知識不足であることをご説明させていただきます。
bootstrap3を利用してWEBサイトや業務用フォーム（入力したものをメールで飛ばす、PDFにしやすい方に出力させる等）を作成する程度の知識しかない者です。
htmlはかじった程度でcssやjavascriptはライブラリサイトで見つけた者をコピペして、多少書き換える程度しかできません。Wordpressもテンプレートとプラグインを利用する側なので同様です。

見積をWEB上で入力し計算させたいと思い、ネットで下記記事を見つけました。
https://qiita.com/ShibuyaKosuke/items/02ba7d084230747b7542
なぜ上記の見積フォームがいいのかは以降の理由からです。
◎希望している内容
・入力画面でフィールド追加し、項目を増やすことができる
・見積対象が　商品の価格が一定でない※A＝1,000円/個など規則がないのでソースに商品名や単価設定をしなくていいから
◎なくてもいい内容
・明細ごとに消費税を計算する機能
→総合計時に税込み価格がわかれば大丈夫です。

https://qiita.com/ShibuyaKosuke/items/02ba7d084230747b7542
上記記事を実装させたいのですが、ファイルをアップロードしても
動作することができません。

あれこれいじって見たのですが、jsの動作が動かず、見た目を調整することしかできずどなたかご教授いただけないかと質問いたしました。

アップロードしている階層としては
index.php
CSSフォルダ
-ブートストラップで自動生成されるcssファイル
jsフォルダ
-ブートストラップで自動生成されるjsファイル＋jquery.number-format.js
jpgフォルダ
の状態です。

知識不足ではありますが、お力添えいただけると幸いです。
何卒よろしくお願い申し上げます。

m.ts10806

2018/09/06 07:54

ブラウザ開発ツールのコンソールにエラーはでていませんか？出ているようでしたら質問本文に追記してください

ellebecca

2018/09/06 08:00

Dwではエラーがでませんでした・・・あれこれいじってもエラーがないので困り果てたところです。

m.ts10806

2018/09/06 08:03

いえ、コンソール確認はあくまでブラウザ開発ツールのもので、アップロードした先のURLにアクセスした上で、です。まあ、参照された記事を書かれた方も回答者の中にはいらっしゃるので、その方の回答を待っても良いかもしれませんが・・・。ひとまず実際のコードをご提示ください。

ellebecca

2018/09/06 08:22

他の方の回答にも記載しましたが、<script src="js/jquery.number-format.js"></script>にしています。質問文内にコードが文字数制限で記載できなかった為、その他は参照サイトをどのようにして動かすのかご教授いただけると幸いです。

m.ts10806

2018/09/06 08:32

何となく話が通じてなさそうなので、「ブラウザでエラーを確認する方法」の記事です。→ https://eng-entrance.com/javascript-display-error#JavaScript

ellebecca

2018/09/06 08:35 編集

F12で検証していたつもりでしたが、正しい見方がわかっておりませんでした。お手間おかけして申し訳ございませんでした。無事解決していただきました。

m.ts10806

2018/09/06 08:37

使い方や見方を覚えておくと問題解決がスムーズになるのでこれを機にぜひ。

ellebecca

2018/09/06 08:41

ありがとうございます。参考サイト早速ブクマさせていただきました。

行動規範の内容に同意します

回答2件

ベストアンサー

index.php で、Uncaught SyntaxError: Unexpected end of input のエラーが出ていますね。

エディタに貼り付けてみたら 368 行目( </body> の直前　)の </script> の前に

});

が不足しているようです。

(以前の回答)

ざっと、参考サイトを眺めただけですが....

jquery.number-format.js は、どこにアップロードされたのでしょうか？

index.php には、

<script src="jquery.number-format.js"></script>

となっていますので、index.php と同じ階層に必要です。
他のディレクトリに入れるのであれば、ファイルの位置に合わせて、パスを修正する必要があります。

投稿2018/09/06 07:58

編集2018/09/06 08:22

CHERRY

総合スコア25171

ellebecca

2018/09/06 08:08

説明が足りず申し訳ありません。階層に合わせて <script src="js/jquery.number-format.js"></script>にしております。ちなみに、index.phpと同階層にするとbootstrapの自動生成の方がうまく動作しなかったのでjsフォルダに格納してパス修正しています。