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

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

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

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

解決済

JavaScript内でcreateアクションを実行させて店舗情報を保存して表示させたい

Mr.potatohead
Mr.potatohead

総合スコア17

JavaScript

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

2回答

0グッド

0クリップ

212閲覧

投稿2022/12/04 11:53

編集2022/12/04 12:02

前提

現在GoogleMap上で周辺検索をし店舗を保存して道案内をするというGoogleMapの酷似版のアプリを制作しています
GoogleMapの周辺検索の機能まではできているのですが表示された店舗のピンをクリックしたら吹き出しが表示され、吹き出し内の保存ボタンを押したら店舗の情報がDBに保持されるようにしたいところ思った通りに動かないため質問させていただきます

実現したいこと

  • 吹き出し内の保存ボタンをクリックするとcreateアクションが実行され、店舗名がDBに保存されるようにしたいです

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

  • 検証ツール上でshop_nameがないとのエラーが出ています
Uncaught ReferenceError: shop_name is not defined at submitForm (search:154:32) at <anonymous>:1:1

該当のソースコード

function SearchGo(){ let initPos = {lat: <%= rodging.latitude %>, lng: <%= rodging.longitude %>}; let mapOptions = { center : initPos, mapTypeId : google.maps.MapTypeId.ROADMAP }; // #map要素にMapクラスの新しいインスタンスを作成 myMap = new google.maps.Map(document.getElementById("map"), mapOptions); service = new google.maps.places.PlacesService(myMap); // input要素に入力されたキーワードを検索の条件に設定 let myword = document.getElementById("search"); let request = { query: myword.value, location: myMap.getCenter() }; service.textSearch(request, result_search); } // 検索の結果を受け取る function result_search(results) { let bounds = new google.maps.LatLngBounds(); let contentButton = '<br><a class="btn btn-outline btn-success btn-sm mt-1" href="javascript:submitForm()" tabindex="0">保存</a>'; for(let i = 0; i < results.length; i++){ let shop_name = results[i].name; createMarker({ //createMarker関数を呼び出している position : results[i].geometry.location, text : `<a href="https://www.google.com/search?q=${results[i].name}" tabindex="0">${results[i].name}</a>`, button : contentButton, map : myMap }); bounds.extend(results[i].geometry.location); } myMap.fitBounds(bounds); } // 該当する位置にマーカーを表示 function createMarker(options) { // マップ情報を保持しているmyMapオブジェクトを指定 options.map = myMap; // Markcrクラスのオブジェクトmarkerを作成 let marker = new google.maps.Marker(options); // 各施設の吹き出し(情報ウインドウ)に表示させる処理 let infoWnd = new google.maps.InfoWindow(); infoWnd.setContent(options.text + options.button); // addListenerメソッドを使ってイベントリスナーを登録 google.maps.event.addListener(marker, 'click', function(){ infoWnd.open(myMap, marker); }); return marker; } function submitForm(){ let form = document.createElement('form'); document.body.appendChild(form); let input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','shop[address]'); input.setAttribute('value',''); ←ここに店舗名を入れるとできるようにしているのですが、 result_search関数のところで{results[i].name}をvalueのところに持ってきたらできるのかなと思うのですが、他の関数内で定義された変数は持ってこれないみたいです form.appendChild(input); form.setAttribute('action',`/rodgings/<%= rodging.id %>/shops`); form.setAttribute('method','post'); form.submit(); }

試したこと

submitForm()関数内でinput.setAttribute('value','') の部分をresult_search(results)関数内で定義した変数をinput.setAttribute('value',shop_name)のようにしましたがそんな変数なんかないとのことです

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

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

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

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

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

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

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

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

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

回答2

0

回答ありがとうございます!
aタグにvalue属性を付与して'${results[i].name'として、変数に格納して、setattributeの部分の第二引数に変数を渡すことで自己解決することができました。

投稿2022/12/09 05:43

Mr.potatohead

総合スコア17

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

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

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

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

0

ベストアンサー

submitForm(shop_name) にして埋め込むだけだと思いますよ。

(雑に書いてるのでエスケープ処理等は正しくないかもしれません)

javascript

1const contentButton = (shop_name) => '<br><a class="btn btn-outline btn-success btn-sm mt-1" href="javascript:submitForm(\"' + shop_name + '\")" tabindex="0">保存</a>'; 2 3createMarker({ ... 4 button: contentButton(shop_name), 5 ... 6});

投稿2022/12/05 14:27

mather

総合スコア6735

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

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

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

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

JavaScript

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。