javascriptruby-on-railsajaxpostgresqlslimselect

Display the price of a coin after selecting its name in select

I use slim-select in which you can select the name of the coin, how to display its price after selecting the name (the price is in the database, i can find it by the name that is selected in the select)How can i do it(maybe i shoud use Ajax but how )?

My form with select

<%= form_with(model: @investment, local: true) do |f| %>
      <div class="">
        <p class="very-mb-sm text-center"> <%= f.label :coin_name %></p>
        <%= f.select :coin_name, Coin.pluck(:name), {include_blank: true},{data: {controller: 'slim',class:'my-slim-select'}}%>
      </div>
      <p class="very-mb-sm very-mt-sm text-center"> <%= f.label :shopping_price %></p>
      <p class="text-center "><%= f.text_field :shopping_price, class: 'form-text-field'%></p>

      <p class="very-mb-sm very-mt-sm text-center"> <%= f.label :invest %></p>
      <p class="text-center"><%= f.text_field :invest, class: 'form-text-field'%></p>
        
      <div class="div-center mt-btn">
        <%= f.submit '+', class: "text-20" %>
      </div>
<% end %>

Update 1

Rendered HTML

<div class="popup-content">
    <form action="/investments" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="u_oVXD2WK9CBd13gQq2i5XSDiEED389yjhY1Pv22sDj2fVz6Y2HJVwj2RRHGgzW9xcXSb78BYmjGFAhmMGOugA" autocomplete="off" />
      <div class="">
        <p class="very-mb-sm text-center"> <label for="investment_coin_name">Coin name</label></p>
        <select data-controller="slim" data-class="my-slim-select" name="investment[coin_name]" id="investment_coin_name"><option value="" label=" "></option>
<option value="Solana">Solana</option>
<option value="TRON">TRON</option>
<option value="Binance USD">Binance USD</option>
<option value="Dai">Dai</option>
<option value="Shiba Inu">Shiba Inu</option>
<option value="Litecoin">Litecoin</option>
<option value="Avalanche">Avalanche</option>
<option value="Uniswap">Uniswap</option>
<option value="Toncoin">Toncoin</option>
<option value="Wrapped Bitcoin">Wrapped Bitcoin</option>
<option value="Monero">Monero</option>
<option value="LEO Token">LEO Token</option>
<option value="TrueUSD">TrueUSD</option>
<option value="Ethereum Classic">Ethereum Classic</option>
<option value="OKB">OKB</option>
<option value="Chainlink">Chainlink</option>
<option value="Filecoin">Filecoin</option>
<option value="Cosmos Hub">Cosmos Hub</option>
<option value="Stellar">Stellar</option>
<option value="Lido DAO">Lido DAO</option>
<option value="Aptos">Aptos</option>
<option value="Bitcoin Cash">Bitcoin Cash</option>
<option value="Cronos">Cronos</option>
<option value="Quant">Quant</option>
<option value="Hedera">Hedera</option>
<option value="ApeCoin">ApeCoin</option>
<option value="The Graph">The Graph</option>
<option value="NEAR Protocol">NEAR Protocol</option>
<option value="Algorand">Algorand</option>
<option value="VeChain">VeChain</option>
<option value="Arbitrum">Arbitrum</option>
<option value="BNB">BNB</option>
<option value="Cardano">Cardano</option>
<option value="XRP">XRP</option>
<option value="Ethereum">Ethereum</option>
<option value="USD Coin">USD Coin</option>
<option value="Tether">Tether</option>
<option value="Polkadot">Polkadot</option>
<option value="Dogecoin">Dogecoin</option>
<option value="Lido Staked Ether">Lido Staked Ether</option>
<option value="Polygon">Polygon</option>
<option value="MultiversX">MultiversX</option>
<option value="Aave">Aave</option>
<option value="Radix">Radix</option>
<option value="Bitcoin">Bitcoin</option>
<option value="Internet Computer">Internet Computer</option>
<option value="Pax Dollar">Pax Dollar</option>
<option value="Fantom">Fantom</option>
<option value="EOS">EOS</option>
<option value="The Sandbox">The Sandbox</option></select>
</div>

Solution

  • I think if you are using coffee JS then i can help here.

    I am assuming you are using turbolinks:load to view your assets.

    You can Create something like this:

    coinWithPrices: ->
    coin = $('#investment_coin_name').val()
    $.ajax(url : '/commons/get_prices', data :{ coin_name: coin })
    .then (data) ->
        selected_price = $('#investment_coin_price').data('coin_price')

$(document).on "turbolinks:load", ->
     coinWithPrices.init()

    This is part for coffee js now some work on Rails end.

    def get_prices
    @coin_name = params[:coin_name]
    data[:coin_price] = Investment.where("coin_name is ilike '#{@coin_name}'")
    render 'investment_form'
  end

    I have assume your model name is Investment and your form name is investment_form.

    I think this will work for you.