住所を自動入力すると保存ができなくなります。

Question

Railsで住所自動入力フォームを実装したいです。

ajaxという郵便番号を入力すると住所が自動入力されるライブラリを用いて、郵便番号を入力するとそれに該当する住所が出るようなフォーマットを作ることはできました。しかし、いざそのデータを保存しようとすると、param is missing or the value is empty: listingというエラーが出ます。原因が分からず困っています。

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

param is missing or the value is empty: listing

該当のソースコード

address.html.erb

<%= render 'partial/navbar' %>
<div class="container">
  <div class="col-md-3">
    <!-- vertical-navbar -->
    <%= render 'partial/verticalnavbar'%>
  </div>
  <div class="col-md-9">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="text-center">
          <span style="font-size:24px;">住所の編集</span>
        </div>
      </div>

      <div class="panel-body">

        <%= form_for @listing do |f| %>

          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>〒</label>
                <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
                <!-- ▼郵便番号入力フィールド(7桁) -->
                <input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label>住所</label>
                <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
                <%= f.text_field :address, placeholder: "例: 東京都港区六本木６丁目１１−１", class: "form-control", required: "true" , name:"addr11" %>
              </div>
            </div>
          </div>

          <div class="actions">
            <%= f.submit "更新", class: "btn btn-danger" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>


listing_controller.rb

エラー該当箇所↓
private
  def listing_params
    params.require(:listing).permit(:home_type, :pet_type, :breeding_years, :pet_size, :price_pernight, :address, :listing_title, :listing_content, :active)
  end

元の部分↓
def update

    @listing.update(listing_params)
    redirect_back fallback_location: root_path,notice:"更新できました"
  end

試したこと

,name: "addr11"の部分を消すとエラーは発生しないのですが、当然郵便番号に紐づく住所は表示されなくなります。

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

Comments

[m.ts10806]

エラーメッセージで検索するとteratail内の過去質問がでてきますが、そちらは確認されました？現象とやってみたことは近いように思います。　https://teratail.com/questions/30703

[Rena0522]

ご回答して頂きありがとうございます！はい、参考にしましたが、やはり自動入力された場合は保存ができなくなります。本来addressとして保存されるべきデータがaddr11で保存されてしまっているようなのですが...　よくわからないですね。

Answer 1

もう一個隠れたformを作成し、JSを使って無理やり表面に出ている値をDBのカラムに送信するようにしたらエラーは出ず、無事保存できるようになりました。
以下、コードを貼っておきます。
コメントして下さった方、考えて頂いた方々、本当にありがとうございました。

address.html.erb

<%= render 'partial/navbar' %>

<div class="container"> <div class="col-md-3"> <!-- vertical-navbar --> <%= render 'partial/verticalnavbar'%> </div> <div class="col-md-9"> <div class="panel panel-default"> <div class="panel-heading"> <div class="text-center"> <span style="font-size:24px;">住所の編集</span> </div> </div>

  <div class="panel-body">

    <%= form_for @listing do |f| %>

      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>〒 郵便番号から住所を検索 (保存はされません)</label>
            <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
            <!-- ▼郵便番号入力フィールド(7桁) -->
            <input f.text_field :preadd, placeholder= "例: 1234567", class="form-control", name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
            <%= f.hidden_field :address %>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label>住所</label>
            <!-- ▼住所入力フィールド(都道府県+以降の住所) -->
            <%= f.text_field :address, placeholder: "例: 東京都港区六本木６丁目１１−１", class: "form-control", required: "true" , name:"addr11", id: "preadd" %>
            <!--上矢印　これ追加　, name:"addr11"　してね-->
          </div>
        </div>
      </div>

      <div class="actions">
        <%= f.submit "更新", class: "btn btn-success", onClick: 'setAddress()' %>
      </div>
    <% end %>
  </div>
</div>

</div> </div> <script> function setAddress() { var preadd = document.getElementById("preadd").value; document.getElementById('listing_address').value = preadd; } </script>