Strange behavior in ajax rails form calculator (pre-filling)

Question

I have ajax rails no database form calculator. It works well, but it behaves very strange. I will try to explain it.

I go to /interest_calculator page

fill_in @first_0 with 10

fill_in @second_0 with 100

I get result equal to:

Number 50 from number 100 = 50%

Then I go to root page

Go back to /interest_calculator

Reload page and my form is pre-filled with previous value. I believe it is buggy behavior. My JavaScript knowledge is very basic, so detailed response would be very helpful.

InterestCalculator controller:

class InterestCalculatorController < ApplicationController

  def index
    @result_0 = 0
  end

  def new

    respond_to do |format|
      format.html { render 'index.html.erb' }
      format.js
    end 

    # If accepted parameter is integer, then it shows in view as 5, when it
    # is float, it shows as 5.1  
    @first_0   = params[:a_0].to_f % 1 != 0 ? params[:a_0].to_f : params[:a_0].to_i
    @second_0  = params[:b_0].to_f % 1 != 0 ? params[:b_0].to_f : params[:b_0].to_i

    # How many percent is number from the number 
    number_to_number(@first_0, @second_0) 

  end

 private 

   def number_to_number(a = 0, b = 0)   
    # If the first number is zero, it sends 0% answer. If the second number is zero 
    # and the first number is nonzero, it sends infinity. Otherwise simple formula calculation.
    if a.zero?
      @result_0 = 0
    elsif b.zero?
      @result_0 = "infinity"
    else
      @result_0 = a.to_f / b.to_f * 100
    end 
  end
end

My view index.html.erb

  <div id="interest_calculator">
    <%= form_for :interest_calculator, url: { action: :new }, method: :get, remote: true do |f|   %>
      <p>Сколько % составляет число</p>
      <%= number_field_tag :a_0, params[:a_0], step: :any, id: "first_number_0" %>
      <p>от числа</p>
      <%= number_field_tag :b_0, params[:b_0], step: :any, id: "second_number_0" %>
      <%= f.submit 'Calculate!', id: "number_to_number" %>
    <% end %>

    <% unless @result_0.nil? %>
      <p>Number <span id="first_0"><%= @first_0 %></span> from number <span id="second_0"><%= @second_0 %></span> = <label id="answer_0"></label>%</p>
    <% end %>
  </div>

My new.js.erb

document.getElementById("answer_0").innerHTML = "<%= @result_0 %>"
document.getElementById("first_0").innerHTML = "<%= @first_0 %>"
document.getElementById("second_0").innerHTML = "<%= @second_0 %>"

Check this, it might be relevant https://stackoverflow.com/questions/25019160/disable-browsers-form-inputs-prefill-autofill-feature-when-hitting-back-button — Ruby Racer, Jun 04 '17 at 15:36
Is this behavior present in all browsers? Or only in one (e.g. Mozilla)? — Gerry, Jun 04 '17 at 15:38
@Gerry Yes, your guess is correct, this is only mozilla behavior. — Kirill Zhuravlov, Jun 04 '17 at 15:43

Gerry · Accepted Answer · 2017-06-04T16:58:06.020

1

It may be that the autocomplete pre-fills the values for you, try disabling it in your form:

<%= form_for :interest_calculator, url: { action: :new }, method: :get, autocomplete: false, remote: true do |f| %>

Another option will be to use POST method instead of GET.

First, remove method: get from form_for (default method is POST):

<%= form_for :interest_calculator, url: { action: :new }, remote: true do |f| %>

Second, update your routes:

post '/interest_calculator/new'

edited Jun 04 '17 at 16:58

answered Jun 04 '17 at 16:09

Gerry

10,337
3
31
40

No, it doesn't working. I begin to think that its more mozilla issue, not rails. – Kirill Zhuravlov Jun 04 '17 at 16:29
@KirillZhuravlov It seems like it. You could also try using `POST` method instead. – Gerry Jun 04 '17 at 16:38

Strange behavior in ajax rails form calculator (pre-filling)

1 Answers1