Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
また、HTMLもご提示ください。
前提・実現したいこと
自動入力（名前→カタカナ・郵便番号→都道府県）と自動計算（一口：500円→口数）を同時に動かしたい。
それぞれが動作すること自体は確認していますが、同時には動きません。
発生している問題・エラーメッセージ
エラーメッセージはありませんが、以下のソース・コードでは同時には動かない。
どちらかを削除した場合は、自動入力あるいは自動計算は動きます。
以下のコードは、それぞれネットで検索して使えそうなコードとしてはめ込んでいます。
該当のソースコード
ここにHTMLを載せてみます。
</head>前の行には以下のコードをペーストしています。 ※見たらわかるのかも知れませんが、以下のコードが、500✕口数(price1)✕期間(price2)＝合計(total) この合計の入力項目を複数個増やして、それの総合計が(total=price1+price2+…+…+…)と続いていきます。 ```<script type="text/javascript"> <!--<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111279414-1"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" ></script> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css"> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-111279414-1'); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=320,initial-scale=1.0,user-scalable=no"> <title>誓願寺 護摩祈祷 申込みフォーム</title> <!--メールフォームプロ用CSS--> <link rel="stylesheet" href="../mfp.statics/mailformpro.css" type="text/css"> <!--/メールフォームプロ用CSS--> <link rel="stylesheet" href="../mfp.statics/example.css" type="text/css"> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 願意1 var price1 = document.form1.pray_1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 願意1 var price2 = document.form1.month_2.selectedIndex * price1; // 単価を設定 document.form1.field2.value = price2; // 乗算合計を表示 // 願意１合計を計算 var total = price1 + price2; document.form1.field1_total.value = total; // 合計を表示 // 設定終了 <!-- --> // 総合計を計算 var total = price1 + price2 + price3 + price4 + price5 + price6; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <scriptn> $(function(){ $('.free_dropdown').click( function () { //「input」要素の「data-options」をカンマで分割し、配列にする。 var options = $(this).data("options").split(','); $(this).autocomplete({ source: options, minLength: 0, // ①「0」を設定したら、全ての項目を表示する。 delay : 1, autoFocus: false, scroll:true, }); $(this).autocomplete("search", "");//この行を入れないと、初回にプルダウンボックス（セレクトボックス）が効かないという不具合がある }); }); </script> </head> <body> <div id="wrapper"> <div id="header"> <h1><a href="../../index.html"><img src="../mfp.statics/_images/logo_L.gif" width="342" height="64"></a></h1> </div> <div id="container"> <!--メールフォームプロ--> <form id="mailformpro" action="../mailformpro/mailformpro.cgi" name="form1" method="POST"> <table width="100%" cellpadding="0"> <tr> <td align="center"><p>必要事項と願意を入力してください</p></td> </tr> <!--ここから個人単位 --> <tr> <td> <div class="mfp_phase" summary="個人情報1"> <div id="mailfield2"> <dl class="mailform"> <input type="hidden" name="mfp_separator_2" value="1"> <input type="hidden" name="ご祈祷者名（１）" data-join="姓1+ +名1+（+セイ1+ +メイ1+）" value=""> <dt class="mfp"><span class="must">必</span>ご祈願者名（１）</dt> <dd class="mfp"> <input type="text" name="姓1" data-kana="セイ1" size="15" placeholder="佐伯" required="required"> <input type="text" name="名1" data-kana="メイ1" size="15" placeholder="真魚" required="required"> フリガナ（１） <input type="text" name="セイ1" size="15" placeholder="サエキ" data-charcheck="kana"> <input type="text" name="メイ1" size="15" placeholder="マオ" data-charcheck="kana"> </dd> </dl> </div> <!--ここにセレクトボックスなどの計算式がはいります --> <dl class="mailform"> <dt class="mfp">護摩祈祷：合計</dt> <input type="text" name="field" size="" value="0" style="display: none;"> <input type="text" name="field_total" size="8" value="0" style="color: #FF5A5F; font-size: 150%; font-weight: ;text-align: right;"> <span>円</span> </dl> <div class="mfp_phase" summary="アンケート"> <div class="mfp_buttons"> <button type="submit">送信する</button> <button type="reset">リセット</button> </div> </div> </form> <script type="text/javascript" id="form1" src="../mailformpro/mailformpro.cgi" charset="UTF-8"></script> <script type="text/javascript" id="mfpjs" src="../mailformpro/mailformpro.cgi" charset="UTF-8"></script> <!--/メールフォームプロ--> <tr> <div style="text-align:center"> <p><font size="-1" color="#990000">確認メールが届かない場合は、再度ご入力いただくか、お電話（0879 - 75 - 0252）にてお申込みをご確認ください</font></p> <p><a href="../../index.html">ホームページへ戻る</a></p> </div> </tr> </div> <div id="footer"> <p>Copyright 2018 Seigan-ji Temple Rights Reserved.</p> </div> </div> </body> </html> コード
function keisan(){
// 設定開始 // 願意1 var price1 = document.form1.pray_1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 願意1 var price2 = document.form1.month_2.selectedIndex * price1; // 単価を設定 document.form1.field2.value = price2; // 乗算合計を表示 // 願意１合計を計算 var total = price1 + price2; document.form1.field1_total.value = total; // 合計を表示
// 設定終了
// 願意2 var price3 = document.form1.pray_3.selectedIndex * 500; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 願意2 var price4 = document.form1.month_4.selectedIndex * price3; // 単価を設定 document.form1.field4.value = price4; // 乗算合計を表示 // 願意２合計を計算 var total = price3 + price4; document.form1.field2_total.value = total; // 合計を表示
// 設定終了
// 願意3 var price5 = document.form1.pray_5.selectedIndex * 500; // 単価を設定 document.form1.field5.value = price5; // 小計を表示 // 願意3 var price6 = document.form1.month_6.selectedIndex * price5; // 単価を設定 document.form1.field6.value = price6; // 乗算合計を表示 // 願意３合計を計算 var total = price5 + price6; document.form1.field3_total.value = total; // 合計を表示
// 設定終了
<!-- -->// 総合計を計算 var total = price1 + price2 + price3 + price4 + price5 + price6; document.form1.field_total.value = total; // 合計を表示
}
// -->
</script>
コード
※以下は申込みの枠に対して選択もできるし、自由に入力もできるというもの ```<scriptn> $(function(){ $('.free_dropdown').click( function () { //「input」要素の「data-options」をカンマで分割し、配列にする。 var options = $(this).data("options").split(','); $(this).autocomplete({ source: options, minLength: 0, // ①「0」を設定したら、全ての項目を表示する。 delay : 1, autoFocus: false, scroll:true, }); $(this).autocomplete("search", "");//この行を入れないと、初回にプルダウンボックス（セレクトボックス）が効かないという不具合がある }); }); </script> コード
以下の<script>は、コードの最後の方に載せています。
※自動入力（住所とか氏名）のものは、mailformproというところからコピーさせてもらって動かしています。
id="form1"というのは、上記自動計算のものです
試したこと
上記、<script type> を両方では動かないので、片方づつ外して動作確認しています。
<script type="text/javascript" id="form1" src="../mailformpro/mailformpro.cgi" charset="UTF-8"></script>を外すと、自動入力は動きます。
<script type="text/javascript" id="mfpjs" src="../mailformpro/mailformpro.cgi" charset="UTF-8"></script>を外すと、自動計算は動きますが、自動入力はできません。
補足情報（FW/ツールのバージョンなど）
mailformpro4.2.3 というものを主体にして自動入力を動かしています。
ご指摘ありがとうございます。
マークダウンのコード機能に変換して再掲載してみました。
またHTMLは全体を掲載したほうがいいのでしょうけど、どこに貼り付けたらいいのか、お知らせいただければ幸いです。
まったくの初めてですので、お手数をおかけして申し訳ありません。
「現象が再現できる、最小限のコード」であればベストです。
関係ないCSSとか装飾とかはなくても良い時もあるので。
>https://teratail.com/help/question-tips#questionTips3-5-1
>最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。
おかしなところがあれば、お知らせください。
たぶん詳しい方にとっては、初歩的なことですぐに解決が出来る方もいらっしゃると思います。
ぜひお知恵を拝借いただければと願っております。
よろしくお願い申し上げます。
あなたの回答
tips
プレビュー
