根据表单输入生成动态URL

时间:2013-09-27 19:07:50

标签: javascript jquery ruby-on-rails coffeescript ruby-on-rails-4

我需要根据两种下拉输入生成一个网址,来自货币和两种货币,这样当用户点击提交按钮时,当表单货币为usd且to_currency为时,生成的网址应该看起来像http://localhost:3000/currencies/usd-eur以欧元为例。

这是我的观点(index.html.erb)

 <%= semantic_form_for :calculator, :url => {:controller => "conversions", :action => "calculate" }  do |f| %>
      <p><%= f.label :amount %>
      <%= f.text_field :amount %></p>
      <p><%= f.label :from_currency %>
      <%= select :calculator, :from_currency, Choices['from_currency'] %></p>
      </p><%= f.label :to_currency %>
      <%= select :calculator, :to_currency, Choices['to_currency'] %></p>
       <p><%= f.submit "Calculate" %></p>
<%= end %>

的routes.rb

match 'currencies', to: 'conversions#index', via: :get
match 'currencies/convert', to: 'conversions#calculate', as: :calculate, via: :post

控制器(conversions_controller.rb)

def index
 end

 def calculate
  @amount = params[:calculator][:amount]
  @from_cur = params[:calculator][:from_currency]
  @to_cur = params[:calculator][:to_currency]
  @result = ConversionsHelper.calculate(@from_cur, @to_cur, @amount)
 end

我没有任何模型,因为我从谷歌API获取数据因此我可能超出了RESFFUL约定的范围。一个详细的答案将不胜感激。谢谢。

4 个答案:

答案 0 :(得分:3)

这个javascript代码最终解决了我的问题。

  $(document).ready(function(){
        $('#Cal').attr('action', '/currencies');
        $("#Cal").submit(function(e){            
            var from = $('#calculator_from_currency').val().toLowerCase();
            var to = $('#calculator_to_currency').val().toLowerCase();
            var url_end = from + "-" + to;
            var url = $('#Cal').attr('action') + '/' + url_end;
            $('#Cal').attr('action', url);            
        });
    });

然后我在我的路线中添加了这一行。

  post '/currencies/:url' => 'conversions#calculate', via: [:post]

答案 1 :(得分:1)

尝试使用jquery,从表单中选择您的值。 然后按

设置网址
 $('form#currency_form').attr('action', url);

在表格旁边

更新

您的路线文件中的

使用以下路线:

match '/currencies/', to: 'converter#show',   via: [:post]
  post '/currencies/:url_end' => 'converter#show'

我希望有所帮助。

答案 2 :(得分:0)

你的目标有点超出restfull和rails约定。你最终应该学习这些,因为它们是由那些已经做了很长时间的人开发的,他们会让你的生活变得更轻松。看起来你只是玩得开心所以这里有一些可以完成这项工作的咖啡脚本。

jQuery ->
  currency_convert_path = ->
    "/currencies/#{$(#id_of_from_currency option:selected).val()}-#{$(#id_of_to_currency option:selected).val()}"

  %("#id_of_from_currency #id_of_to_currency").blur( ->
    $("#id_of_form").attr('action', currency_convert_path())
  )

您需要检查表单上的元素,并将id_of_from_currency id_of_form和id_of_to_currency填入实际ID。然后,当您更改选择时,您可以在提交之前检查表单并查看新操作。

我也假设选项标签的价值形式像usd和eur。如果不是,您将需要为上述代码更改它们以获得所需的效果。

答案 3 :(得分:0)

啊,就像我太矮了说抱歉我做了一个嘘声

更改

"/currencies/#{$(#id_of_from_currency option:selected).val()}-#{$(#id_of_to_currencyoption:selected).val()}"

"/currencies/#{$('#id_of_from_currency option:selected').val()}-#{$('#id_of_to_currency option:selected').val()}"

注意$()里面的''