Rails，输入模糊后自动提交表单返回：ActionController :: UnknownFormat

Question

The Goal: Auto submit the form after blur from any input.

My approach:

Using remote: true in the form, to tell Rails I want to submit via Ajax, then in controller#create, I added a respond_to block and finally, I also created the create.js.erb file to complete.

And that's working just fine if someone clicks 'submit' ... but what about auto-submit when blur ? To achieve that, I followed this SO and added an autoSubmitForm() function, but didn't work, showing this error:

Now, the error:

Started POST "/e/0-8d5ac093-3611-4b46-a220-41eb880e6732/elements/10/posts" for 127.0.0.1 at 2018-03-08 15:41:38 -0600
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 2], ["LIMIT", 1]]
Processing by PostsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"MZQoS9PsHn50pAXmPUnbk2NjzgLOSps0rn87hYw/lyXD96N0EyzRXTVChazenb1AxL9GnpZ/GH7do3LsEp9zUg==", "answer"=>{"message"=>"MTY"}, "profile_id"=>"0-8d5ac093-3611-4b46-a220-41eb880e6732", "element_id"=>"10"}
  Profile Load (0.2ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."profileable_id" = $1 AND "profiles"."profileable_type" = $2 LIMIT $3  [["profileable_id", 2], ["profileable_type", "User"], ["LIMIT", 1]]
   (0.1ms)  BEGIN
  Element Load (0.2ms)  SELECT  "elements".* FROM "elements" WHERE "elements"."id" = $1 LIMIT $2  [["id", 10], ["LIMIT", 1]]
  SQL (0.3ms)  INSERT INTO "posts" ("element_id", "message", "created_at", "updated_at", "profile_id") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["element_id", 10], ["message", "MTY"], ["created_at", "2018-03-08 21:41:38.121299"], ["updated_at", "2018-03-08 21:41:38.121299"], ["profile_id", 4]]
   (6.0ms)  COMMIT
Completed 401 Unauthorized in 12ms (ActiveRecord: 6.8ms)



ActionController::UnknownFormat - ActionController::UnknownFormat:
  app/controllers/posts_controller.rb:9:in `create'

Started POST "/__better_errors/f572adc255d87208/variables" for 127.0.0.1 at 2018-03-08 15:41:38 -0600


ActionController::UnknownFormat - ActionController::UnknownFormat:
  app/controllers/answers_controller.rb:9:in `create'

Started POST "/__better_errors/f572adc255d87208/variables" for 127.0.0.1 at 2018-03-08 15:41:38 -0600

I also tried adding onchange: 'this.form.submit();' to input, but it returns the same error.

The post is created ok, but it breaks when implementing respond_to .

auto_submit_function.js

$(document).on('turbolinks:load', function() {
  autoSubmitForm()
})

function autoSubmitForm() {
  $('form :input').blur(function() {
    $(this).closest('form').submit();
  });
}

controller

class PostsController < ApplicationController
  before_action :authenticate_user! # I'm using devise

  def create
    @answer = Post.new(posts_params)
    @answer.save
    respond_to do |format|
      format.js
    end
  end

  private

  def posts_params
    params.permit(:post).require(:message)
  end
end

_form.html.haml

= form_for [article, post], 
  remote: true, 
  authenticity_token: true, 
  html: { id: "new_post_#{article.id}" } do |form|

  = form.text_field :message
  = form.label :message
  = form.submit

create.js.erb

console.log('I can take it from here, thanks!')

Answer 1

I just found a slightly different approach.

Instead of:

$(document).on('turbolinks:load', function() {
  autoSubmitForm()
})

function autoSubmitForm() {
  $('form :input').blur(function() {
    $(this).closest('form').submit(); // <<<<< Remove this
    $('#submit_' + $(this).attr('id')).trigger('click'); // <<< Add this
  });
}

And add a custom id for each submit button (I have multiple forms in the same view). Also, I hide with css the submit button.

Basically, instead of auto submit I'm auto clicking on submit.

Even when this works, It feels like there should be a better solution for this scenario.