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

前提

現在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)のようにしましたがそんな変数なんかないとのことです

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

回答2件

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

投稿2022/12/09 05:43

Mr.potatohead

総合スコア17

ベストアンサー

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});