自動入力（氏名入力→カタカナ自動入力）に自動計算（加・乗算）を同時にサイト上で動かしたい。

前提・実現したいこと

自動入力（名前→カタカナ・郵便番号→都道府県）と自動計算（一口：500円→口数）を同時に動かしたい。
それぞれが動作すること自体は確認していますが、同時には動きません。

発生している問題・エラーメッセージ

エラーメッセージはありませんが、以下のソース・コードでは同時には動かない。
どちらかを削除した場合は、自動入力あるいは自動計算は動きます。
以下のコードは、それぞれネットで検索して使えそうなコードとしてはめ込んでいます。

該当のソースコード

ここにHTMLを載せてみます。

<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>&nbsp;&nbsp;<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>
コード

</head>前の行には以下のコードをペーストしています。 ※見たらわかるのかも知れませんが、以下のコードが、500✕口数(price1)✕期間(price2)＝合計(total) この合計の入力項目を複数個増やして、それの総合計が(total=price1+price2+…+…+…)と続いていきます。 ```<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; // 合計を表示

// 設定終了

// 願意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> を両方では動かないので、片方づつ外して動作確認しています。

を外すと、自動入力は動きます。

を外すと、自動計算は動きますが、自動入力はできません。

補足情報（FW/ツールのバージョンなど）

mailformpro4.2.3　というものを主体にして自動入力を動かしています。

m.ts10806

2020/05/05 02:26

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 また、HTMLもご提示ください。

fujimura

2020/05/05 03:26

ご指摘ありがとうございます。マークダウンのコード機能に変換して再掲載してみました。またHTMLは全体を掲載したほうがいいのでしょうけど、どこに貼り付けたらいいのか、お知らせいただければ幸いです。まったくの初めてですので、お手数をおかけして申し訳ありません。

m.ts10806

2020/05/05 03:31

「現象が再現できる、最小限のコード」であればベストです。関係ないCSSとか装飾とかはなくても良い時もあるので。 >https://teratail.com/help/question-tips#questionTips3-5-1 >最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。

fujimura

2020/05/05 14:40

おかしなところがあれば、お知らせください。たぶん詳しい方にとっては、初歩的なことですぐに解決が出来る方もいらっしゃると思います。ぜひお知恵を拝借いただければと願っております。よろしくお願い申し上げます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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