Ruby on Rails modal form submitting to wrong DB

Question

I have a modal on a searches/show page:

<button name="button" type="button">
  <a class="nav-link" data-toggle="modal" data-target="#emailFriendModal" href="">Email Results to Friend</span></a>
</button>

On click, the modal correctly brings up this partial (most of the code redacted for brevity):

<div class="modal fade" id="emailFriendModal">
  ...
  <div class="mx-auto text-left column">   
  <%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>            
      ...
    <%= recaptcha_tags %>
    <div class="actions">
      <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
    </div>
    <script>
      function submit_form() {
      document.getElementById('friend_email_form').submit();
      }
    </script>
  <%end%>
</div>

But on submit, the object is not sent to the friend_emails Controller:

class FriendEmailsController < ApplicationController

  def new
    @friend_email = FriendEmail.new
  end

  def create
    @friend_email = FriendEmail.new(message: params[:message], email: params[:email], email2: params[:email2], path: params[:path])
    if @friend_email.save
      redirect_back fallback_location: root_path, notice: "Your email has been sent"
    else
      redirect_back fallback_location: root_path, notice: "Sorry, something went wrong, please try again"
    end
  end

  def friend_email_params
    params.require(:friend_email).permit(:message,:email,:email2,:path)
  end

end

When the "Email a Friend" button is clicked, the correct partial pops up, but when the form is submitted, a Tour object is created (not a Friend_email object!!). The tour message is displayed, a tour email is sent. On submit the the info is completely bypassing the Friend_emails controller and going straight to the Tour controller.

Routes:

post "friend_emails/create"
post "tours/create"

Rake Routes:

friend_emails_create POST   /friend_emails/create(.:format) friend_emails#create
tours_create POST           /tours/create(.:format)    tours#create 

Tours Controller in case its helpful:

class ToursController < ApplicationController

  def index
    @tours = Tour.all
  end

  def new
    @tour = Tour.new
  end

  def create
    @tour = Tour.new(day: params[:day], time: params[:time], user_id: params[:user_id], listing_id: params[:listing_id], school_id: params[:school_id],
      email: params[:email])

    if @tour.save
      redirect_back fallback_location: root_url, notice: "Your tour request has been sent; we will be in touch soon with confirmation."
    else
      redirect_back fallback_location: root_url, notice: "#{@tour.errors.full_messages}"
    end
  end

  def destroy
    @tour = Tour.find(params[:id])
    @tour.destroy
    redirect_back fallback_location: root_url, notice: "Your Tour has been Cancelled"
  end


  def tour_params
    params.require(:tour).permit(:tour_req, :user_id, :listing_id, :school_id, :email, :day, :time)
  end
end

And Finally, this is an excerpt from the Application Layout which holds the partials.

<%= yield %>
<% unless user_signed_in? %>
  <%= render partial: 'devise/registrations/new' %>
  <%= render partial: 'devise/sessions/new' %>
<% end %>
<%= render partial: 'friend_emails/new'%>
<%= render partial: 'tours/new'%>

Answer 1

I figured out the problem. I had two modals in the application layout and the code referenced the same javacript submit() function. The fix was to change the name of the submit() function like this:

<div class="actions">
      <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form2();", "data-dismiss":"modal"%>
    </div>
<script>
  function submit_form2() {
  document.getElementById('friend_email_form').submit();
  }
</script>

Now we have two javascript functions, submit_form() and submit_form2() and everything works as it should.