0

I have the following code and it works when submitting the form (It stays on the same page) but I also want that the current page will be refreshed after submission.

<script>
$('form').live('submit', function(){
  $.post($(this).attr('action'), $(this).serialize(), function(response){
  // Here I need a code to refresh the page. I tried with window.location.reload(); no      success...
  },'json');
  $('form').hide();
  return false;
});

Thanks for helping out

Sistemaevi
  • 1
  • 1
  • 1
  • why was `window.location.reload()` not successful? Did you get any errors or anything? That's what I was going to suggest doing until I saw in your code that you had already tried it. – MrOBrian Jun 29 '12 at 00:07
  • I don't know why, it just dont work the page do not refresh, you can see it in action here www. loquierocomprar. com.co/pruebanuevoform.html – Sistemaevi Jun 29 '12 at 00:35

2 Answers2

0

"return false;" in jQuery doesn't work the same way as it does in plain-jane javascript. use preventDefault:

$('form').live('submit', function(e){
    $('form').hide();
    e.preventDefault();
});

Also, if you can help it i wouldn't recommend the use of "live" ...if you can use $(document).ready and and $('form').submit(function(e){...});

---- edit 1:

I noticed on your page (noted in your comment) you are getting the error: "XMLHttpRequest cannot load http://emails.loquierocomprar.com.co/wp-content/plugins/mailpress/mp-includes/action.php. Origin http://www.loquierocomprar.com.co is not allowed by Access-Control-Allow-Origin."

The $.post call is failing and never sending the ajax post request. Therefore, the success handler is never being triggered and ultimately the window.location.refresh method will never be called.

Second, you're using datatype 'json' - if the service doesn't return properly formatted json, the success handler will also not fire correctly.

zamnuts
  • 9,492
  • 3
  • 39
  • 46
  • '"return false;" in jQuery doesn't work the same way...' - not so I'm afraid - see demo [here](http://jsfiddle.net/Kxwha/1/). – Beetroot-Beetroot Jun 29 '12 at 00:41
  • That does not work, If I add it I will be sent to the php processing page. I want to stay in the same page and refresh it after submission.. you can see the page here www. loquierocomprar. com.co/pruebanuevoform.html – Sistemaevi Jun 29 '12 at 00:42
  • @Beetroot-Beetroot please see http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false "return false" does much more. – zamnuts Jun 29 '12 at 00:55
  • @Sistemaevi, it is a bit late in the day, I think i've narrowed down the problem and have updated my response appropriately. Let me know if it requires further clarification. – zamnuts Jun 29 '12 at 01:11
  • Well thanks for your answer. I'm not an expert in jquery and I was looking for a way to stay on the same page and auto refresh after the form submission. When I enter an email and hit submit, the information is sent to the database but the only thing I don't have success is with refreshing the page. If you could provide me with the code that can do that, I will appreciate it a lot – Sistemaevi Jun 29 '12 at 01:17
  • @zamnuts, you can effectively ignore all that stuff about return false preventing the event from bubbling in this case. Reason being, either you've attached the submit handler directly to the form in which case you're not interested in bubbling, or the handler is delegated in which case it must have already bubbled by the time the handler fires (and returns false). ... – Beetroot-Beetroot Jun 29 '12 at 01:37
  • ... What it says in that S.O. answer is absolutely correct but it's only relevant in unusual circumstances - when you need a lower level event handler AND a higher level (delegated) event handler AND the lower level handler must issue a `preventDefault()` (not `return flase`) such that the delegated handler will also fire if that is what's wanted. Something to be aware of but, as I say, unusual circumstances. – Beetroot-Beetroot Jun 29 '12 at 01:38
  • can you provide me the code, please?? www. loquierocomprar. com.co/pruebanuevoform.html (submission, stay on the page and refresh the page)... thanks – Sistemaevi Jun 29 '12 at 01:44
0

You want natural HTML form submission plus hiding the form.

You can't hide the form before submission otherwise the browser won't get/post its hidden fields, therefore you have to hide it after sumbission. The easiest way is to use a setTimeout.

$(document).on('submit', 'form', function() {
  var $form = $(this);//remember $form in the closure
  setTimeout(function(){ $form.hide(); }, 0);//hide $form *after* submission
  return true;//allow natural html form submission to happen
});

Even with the setTimeout delay set to zero, $form.hide() will execute from a different event thread after form submission has happened (in the original submit thread).

Beetroot-Beetroot
  • 18,022
  • 3
  • 37
  • 44
  • You can see the working example here www. loquierocomprar. com.co/pruebanuevoform. html When I submit the form I get the info in the database but I'm not able to refresh the page... – Sistemaevi Jun 29 '12 at 00:36
  • Have you tried exactly as I posted above? Ignore my fiddle - that was just to prove to zamnuts that `return false` works in jQuery the same as in POJS. – Beetroot-Beetroot Jun 29 '12 at 00:49
  • it does not work. If I use that code, I will be taken to the php processing form. I want to stay in the same page and make that page refresh. My code above works to stay in the same page but I have not being able to refresh the page... – Sistemaevi Jun 29 '12 at 01:04
  • Something just occurred to me. You are probably seeing the form again in the re-served (new) page. If so, then you need to re-build the page server-side but this time without the submitted form. – Beetroot-Beetroot Jun 29 '12 at 01:11
  • "If I use that code, I will be taken to the php processing form". OK but since it's a PHP script, you can arrange for it to re-serve the original page. This will typically be done in one of two ways. (a) by executing actions at the top of the page, before the HTML is built out, or (b) have a separate `actions.php` script and arranging for it to cause the original page to be returned with eg. a statement of the format `header("Location: myOriginalPage.php");`. – Beetroot-Beetroot Jun 29 '12 at 02:17