0

Im trying to submit a form which is kind of long and that is distributed through several "pages" and the "submit" button doesn't send the form.

<div data-role="page">
    <form action="save_data.php">
    <input type="text">
    <a href="#two">next</a>
</div>
<div data-role="page" id="#two">
    <input type="text">         
    <input type="text">
    <a href="#three">next</a>
</div>
<div data-role="page" id="#three">
    <input type="text">         
    <input type="submit">
</div>

If I place <form action="save_data.php"> in the same page as the submit it sends the data, otherwise nothing happens.

I can only send forms within the same "page" even though it's all actually the same file?

Thanks

Jasper
  • 75,717
  • 14
  • 151
  • 146
subharb
  • 3,374
  • 8
  • 41
  • 72
  • I found this answer, http://stackoverflow.com/questions/8036588/jquery-mobile-multipage-submit but from the top of my head I can think of other ways to get this done. – subharb Sep 11 '12 at 15:17
  • Are you using single-page templates or multi-page templates? – Jasper Sep 11 '12 at 16:15
  • same thing as in the example above, several pages within the same hmtl file. – subharb Sep 12 '12 at 17:41

1 Answers1

2

For all but the last form page do something like this:

var $lastPageForm = $('.last-page').find('form');
$('.not-last-page').find('form').on('submit', function () {
    $.each($(this).find('input'), function () {
        $lastPageForm.append($(this).clone());
    });
    return false;
});

This will clone each input in the first forms and append those clones to the last form. That way all the inputs from all the forms get submitted at once with the last page.

This code expects a multi-page template laid-out something like this:

<div class="not-last-page" data-role="page">
    <form>
        <input type="text">
        <a href="#two">next</a>
    </form>
</div>
<div class="not-last-page" data-role="page" id="two">
    <form>
        <input type="text">
        <a href="#three">next</a>
    </form>
</div>
<div class="last-page" data-role="page" id="three">
    <form action="save_data.php">
        <input type="text">
        <input type="submit" />
    </form>
</div>
Jasper
  • 75,717
  • 14
  • 151
  • 146
  • 1
    That's a clever way of doing it, how I solved it was just taking all inputs and send them by ajax to the page that the form action was pointing to. – subharb Sep 14 '12 at 07:52
  • just curious, why not just add an id to the last form and use var $lastPageForm = $('#lastformid') instead of var $lastPageForm = $('.last-page').find('form'); – Ray S. Nov 18 '13 at 08:50
  • @RayS. In the OP's code the pseudo-pages already have IDs and I didn't want to change them but still wanted to demonstrate my idea. Short version: no real reason. – Jasper Nov 18 '13 at 15:06