<div dir="ltr">On 25 November 2010 10:06, Rasmus Skaarup <span dir="ltr"><<a href="mailto:mlist@gal.dk">mlist@gal.dk</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0.8ex; border-left-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; padding-left: 1ex; ">
<br>Is is possible to submit a form, but stay on the page without reloading it?<br><br>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)?<br>
</blockquote><div> </div>You can use jquery's ajax forms plugin to do this very easily:<div><br></div><div><a href="http://jquery.malsup.com/form/">http://jquery.malsup.com/form/</a></div><div><br></div><div>Or more manually, send the form data from the submit event. Example from <a href="http://api.jquery.com/jQuery.post/">http://api.jquery.com/jQuery.post/</a>:</div>
<div><br></div><div> <span class="Apple-style-span" style="font-family: monospace; font-size: 14px; color: rgb(51, 51, 51); line-height: 14px; white-space: pre; ">$.post("test.php", $("#testform").serialize());</span></div>
<meta charset="utf-8"><div><br></div><div>The ajax plugin does the same thing more or less, but checks the form's action URI, HTTP method, etc automatically.</div><div><br></div><div>The submission results are available in a callback either way.</div>
<div><br></div><div><br></div><div>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:</div><div><br></div><div> javascript: |</div>
<div> $("form:last").submit(function(form) { /* ajax post here */; return false });</div><div><br></div><div>$("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).</div>
<div><br></div><div>This is appropriate if you only need this for one special form.</div><div><br></div><div>A more generic way is to do:</div><div><br></div><div> attributes:</div><div> class: ajaxy</div><div>
<br>
</div><div>And in your .js files somewhere:</div><div><br></div><div> $(document).ready(function() {</div><div> $("form.ajaxy").submit(function (form) { ...; return false });</div><div> });</div><div>
<br></div><div><br></div><div><br></div><div>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).</div>
</div>