SmartyテンプレートにJavaScript処理を付ける方法または、changeイベントの発火方法

前提

・JavaScriptにおいて、テキストフォームが変更されたときにイベントを発火させる方法を教えてください。
(ページの読み込み時にイベントが発生して困っております。)
または、
・Smartyでテキストフォームを作るときに、onChange="change();"のようにJavaScriptを発火させる文を追加させる方法を教えてください。

実現したいこと

テキストフォームに名前を漢字で入力すると、APIにPOSTされ、ひらがなに変換された名前を表示する

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

POST https://labs.goo.ne.jp/api/hiragana 400 (Bad Request)

該当のソースコード

・独断で省略しております。ご不明な点等ございしたら、コメントください。

php
1$first_name = $this->form->addElement('text',  'first_name',['id' => 'first_name','size' => 30] );

tpl
1<body onload="firstscript();">
2<tr>
3              <td style="vertical-align:top; text-align:right;">名：</td>
4              <td style="text-align:left;">
5                {$form.first_name.html}
6              </td>
7            </tr>
8</body>

とりあえず、コンソールに表示させてみようと思いました

JavaScript
1function change(value){
2//ひらがな化API使用
3  const data = {app_id:アプリケーションID,
4                sentence:value,
5                output_type:'katakana'};
6
7  // FetchAPIのオプション準備
8  const param  = {
9    method: "POST",
10    headers: {
11      "Content-Type": "application/json; charset=utf-8"
12    },
13  
14    // リクエストボディ
15    body: JSON.stringify(data)
16  };
17  
18  // paramを付ける以外はGETと同じ
19fetch("https://labs.goo.ne.jp/api/hiragana", param)
20    .then((res)=>{
21      return( res.json() );
22    })
23    .then((json)=>{
24      console.log(json);
25    }).catch((error)=>{
26      console.log(error);
27    });
28
29}
30
31function firstscript(){
32
33  const first_name =document.getElementById('first_name');
34
35  first_name.onchange=change(first_name.value);
36
37  }

試したこと

・POSTする文字列をJavaScriptに直接書いたところ正常な応答が返ってきた。
・change関数においてvalue変数の値をコンソールに表示したところ空白だったので

JavaScript
1function change(){
2if(value!==''){
3//処理
4}
5}

としたところエラーは無くなりましたが、フォームに値を入力しても何も起こりません
・試しにボタンを追加し、それがクリックされたらコンソールに”クリック”と表示する処理を書きましたが、それは上手く動きました

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

xamppをwindowsにダウンロードしてサーバにしています。(xamppのバージョンは調べられませんでした。)
PHP Version 7.4.26

回答2件

fetchでpostする際は、データはbody要素としてformdataで渡します

投稿2022/11/21 02:56

yambejp

総合スコア110921

回答へのコメント

saitou_san

2022/11/21 03:24

ソースコードの形式でvalueの部分だけ文字列に変えた場合上手くいったのですが、これではダメですか?

自己解決

smartyにてこのように書くことで無理やり実現できました。

php
1$last_name = $this->form->addElement('text',  'last_name',['id' => 'last_name','size' => 30, 'onchange'=>'(function() { let val="last_name";change(val); } )();'] );