jQuery, Ajax, Rails: submit a rails form with a seperate userpassword field?

following html structure:

<%= form_for :user, :url => ajax_user_details_path, :html => { :id => 'accountPasswordForm' } do |user| -%>

        <span class="text1" >new password:</span>
        <%= password_field :user, :password, :class => 'input1', :id => 'accountNewPassword' %>

        <span class="text1" >repeat password:</span>
        <%= password_field :user, :password_confirmation, :class => 'input1', :id => 'accountRepeatPassword' %>

        &开发者_开发技巧lt;!-- <span class="text1" >current password:</span>
        <%= password_field :user, :current_password, :class => 'input1', :id => 'accountRepeatPassword' %> -->

        <button class="button1" id="accountPasswordFormSubmit" name="accountPasswordFormSubmit" type="submit" >change password</button>

<% end -%>

This is a working form sumbitted via ajax. However I want the current password field not inside this form but rather appear in an overlay once the submitbutton is pressed.

I wonder how I can solve this?

So I do already have a working ajax submit function and a overlay. The function I call to submit the form is this triggerAjaxSubmit:

function triggerAjaxSubmit(formId) {

    $(formId).ajaxSubmit({
        type: "POST",
        dataType: "text json",
        success: function(jsonObject,status) {

            console.log("function() triggerAjaxSubmit : " + status);
        }
    });
}

So now I want to have the current password form in an overlay and therefore I call a similar function that is injected into the form submission.

On formsubmit I now call the following function triggerAjaxSubmitConfirmation which pops up the overlay with the current password field. After submitting this final button I call again the triggerAjaxSubmit Function.

function triggerAjaxSubmitConfirmation(formId) {

    showOverlay();

    $('.overlay form').submit(function(e) {
        e.preventDefault();
        triggerAjaxSubmit(formId);
    });

}

The problem I have is that I have no idea how this actually should work! Right now I commented the current password field out in code-sample above. The code in the popup-overlay is the same function with the current password field.

<div class="overlay">
    <%= form_for :user, :url => ajax_user_details_path, :html => { :id => 'accountPasswordForm' } do |user| -%>
        <span class="text1" >current password:</span>
        <%= password_field :user, :current_password, :class => 'input1', :id => 'accountRepeatPassword' %>
    <% end -%>
</div>

I just need a little tip/hint how to actually solve this! Can I assign (or hand over) the the "new password" and "repeat password" to the overlay form via javascript?

I simply have no idea how to do this.

Thank you for your help

You need to send all the information in one http request, so you shouldn't post the form information and the password separately.

Instead of making the overlay a separate 'form' with it's own http POST, you could have a javascript overlay which is triggered upon submission.

When clicking the 'submit' button on the overlay, set the value of the original 'password' textbox of the form with the password gained from the overlay. The 'password' input can be kept hidden the whole time!

So the user only sees a form, and the overlaid password prompt, while the html contains a hidden password field in the form, and a bogus password field in the javascript overlay.