Q&A
前提
・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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/11/21 03:24