Rails custom update method doesn't get called in jquery toggled form

Question

I have a profile edit form inside which I have button which toggles another form for changing password.

My routes look like this:

resource :profile do
  get '/password_edit' => 'profiles#password_edit', as: 'edit_password'
  patch '/password_update' => 'profiles#password_update', as: 'change_password'
end

Custom controller methods:

def password_edit
  render partial: 'edit_password'
end

def password_update
  if @user.authenticate(params[:user][:current_password]) &&  @user.update_attributes(user_params)
    redirect_to root_url
  else
    render :edit
  end
end

And the form:

<div class="password-edit">
<%= form_for @user, {url: '/change_password_profile'} do |f| %>
  <div class="password" style="display:none; height:320px;">
    <%= render partial: "password_form", locals: { f: f } %>
  <div>
    <%= f.submit "Update password", class: "btn btn-primary" %>
    <%= link_to "cancel and go back", admin_accounts_path, class: "btn btn-link" %>
  </div>
  </div>
<% end %>
</div>

The profiles.js:

$(function(){
  $(".expand_password_edit_form").on("click", function(event){
    $(".password-edit").find('.password').slideToggle(400,
    function(){
      $('html, body').animate({
        scrollTop: $('.password').offset().top + $('window').height()
    }, 1000);
    });
  });
});

However, when I click the submit button, it's being handled by the update action, not by the password_update one. I know it's because I'm rendering this form through js and the route does not change.

How can I accomplish this?