FAQ

[html-formfu] Submit but stay

Rasmus Skaarup
Nov 25, 2010 at 8:04 am
Is is possible to submit a form, but stay on the page without reloading it?

Currently I redirect to the same page the user came from after the values are saved to the database, which doesn't mess up any values, but forces a reload on the user and places him on the top of the page. If thats not possible, then does anybody know if it's possible to tell which html anchor the user is closest to when submitting (either pressing return, or using the button)?

-Skaarup
reply

Search Discussions

2 responses

  • Yuval Kogman at Nov 25, 2010 at 8:18 am

    On 25 November 2010 10:06, Rasmus Skaarup wrote:
    Is is possible to submit a form, but stay on the page without reloading it?

    Currently I redirect to the same page the user came from after the values
    are saved to the database, which doesn't mess up any values, but forces a
    reload on the user and places him on the top of the page. If thats not
    possible, then does anybody know if it's possible to tell which html anchor
    the user is closest to when submitting (either pressing return, or using the
    button)?
    You can use jquery's ajax forms plugin to do this very easily:

    http://jquery.malsup.com/form/

    Or more manually, send the form data from the submit event. Example from
    http://api.jquery.com/jQuery.post/:

    $.post("test.php", $("#testform").serialize());

    The ajax plugin does the same thing more or less, but checks the form's
    action URI, HTTP method, etc automatically.

    The submission results are available in a callback either way.


    As for actually getting the submit event, you could do this in one of two
    styles in your form definitions. The first option is to do it per form:

    javascript: |
    $("form:last").submit(function(form) { /* ajax post here */; return
    false });

    $("form:last") selects the last form element in the document, which is
    currently being defined (just the form container, no elements yet IIRC due
    to where formfu injects the <script> element).

    This is appropriate if you only need this for one special form.

    A more generic way is to do:

    attributes:
    class: ajaxy

    And in your .js files somewhere:

    $(document).ready(function() {
    $("form.ajaxy").submit(function (form) { ...; return false });
    });



    Finally, since the 'submit' handler uses 'return false' to override normal
    form submission, you can keep your redirect logic in case the user has
    disabled javascript, and consider this value-added ajax (i.e. you don't
    actually need to depend on the JS for functionality, it just makes it a bit
    sleeker).
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://lists.scsys.co.uk/pipermail/html-formfu/attachments/20101125/b574a5b2/attachment.htm
  • Rasmus Skaarup at Nov 26, 2010 at 9:05 am

    On 25/11/2010, at 09.18, Yuval Kogman wrote:

    On 25 November 2010 10:06, Rasmus Skaarup wrote:

    Is is possible to submit a form, but stay on the page without reloading it?

    You can use jquery's ajax forms plugin to do this very easily:

    http://jquery.malsup.com/form/

    Thanks - works beautifully!


    -Skaarup

Related Discussions

Discussion Navigation
viewthread | post

2 users in discussion

Rasmus Skaarup: 2 posts Yuval Kogman: 1 post