Passing input value to another inputfield

Question

I'm trying to take subscription payments and membership details The sign-up flow is as follows:

PAGE 1 = Enter Card Details
|
|

PAGE 2 = Enter Personal Details (NB. token from page 1 is required to submit this form)
|
|

PAGE 3 = Verify Email address (This part works fine)

Page 1 is the point at which the "customer" enters in their card details. This gets sent to Stripe and assuming that there is no errors Stripe sends back a "token". Now I have the token, typically a hidden input field, but I have it showing just for my own benefit for the time being. If all is well at this point I use ajax to change the forms content to one with email address fields etc.

 // Insert the token into the form so it gets submitted to the server
    $form.append($('<input type="text" id="stripeToken" name="stripeToken" />').val(token));
    // and re-submit
    $('#content').load('https://www.mydomain.com/registration-text.html#content');

    }

After the forms content change to page 2 I can literally see the content of <input type="text" id="stripeToken" name="stripeToken" /> still at the bottom of the page.

But when I fill out the email fields etc and hit submit it doesn't get sent with the form. In fact the form is setup to not allow a submission without a value for stripeToken, so at least that works. Just wondering if anyone would have any idea as to a solution? Or even the potential source of the problem?

Answer 1

The input must be in between the form tags, if you are saying that the input is located at the bottom of the page, so there is a chance that you have it outside your form tags (Just making a guess). Please note that only the inputs inside the form tags are submitted to the next page