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

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

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

PEAR

PEAR (PHP Extension and Application Repository)はPHPで利用する事ができるライブラリです。

Smarty

Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。

解決済

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

saitou_san
saitou_san

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

PEAR

PEAR (PHP Extension and Application Repository)はPHPで利用する事ができるライブラリです。

Smarty

Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。

2回答

0グッド

0クリップ

605閲覧

投稿2022/11/21 02:48

編集2022/11/21 02:59

前提

・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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/11/21 04:52

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

回答2

1

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

投稿2022/11/21 02:56

yambejp

総合スコア108937

spoofy_dragon😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

saitou_san

2022/11/21 03:24

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

0

自己解決

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

php

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

投稿2022/11/21 04:56

saitou_san

総合スコア10

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

PEAR

PEAR (PHP Extension and Application Repository)はPHPで利用する事ができるライブラリです。

Smarty

Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。