How to reload a specific form after submit success using Ajax?

Question

I am currently trying to reload a specific form, which is the form inside which the button was submitted, purely for the purpose of instant feedback. I am creating a Favorites button. This is my current setup. The ajax works but I still have to reload the page for it to show the new styles and even to change the METHOD type, which is required to unfavorite-favorite.

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function() {
        form.reload();
    }
});

Normally what i do is have the server side generate the html for the new form then have the success function rewrite. Otherwise you have to manipulate the DOM after success with more `javascript`. — Victory, Aug 31 '14 at 03:08
I am looking for a technique to reload the specific form in which the submit button was clicked. If I can achieve that, then all my problems will be solved. It shall be by far the cleanest technique. Less code is always better for me :) — Ali Gajani, Aug 31 '14 at 03:15
I am using PHP. So as to speak, if I get it working, it will reload the parent or the closest.form within which the submit was clicked. — Ali Gajani, Aug 31 '14 at 03:19

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

I guess you could clear all fields :

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function() {
        form.find('input:text, input:password, input:file, select, textarea').val('');
        form.find('input:radio, input:checkbox')
             .removeAttr('checked').removeAttr('selected');
    }
});

Taken from this answer.

EDIT :

As precised in comments, maybe you should get your server send back infos from the newly created item.

Then you could populate a "template" you have, and replace the form with it :

var newItem = $("<div class='newItem'></div>");

$.ajax({
    type: method,
    url: url,
    data: form.serialize(),
    success: function( data ) {
        //Get response from server like : {'name':'Name', 'attribut':'Attribut'}
        for( var key in data ) {
            newItem.append("<p>" + key + " : " + data[key] + "</p>");
        }
        form.replaceWith(newItem);
    }
});

An example JSFiddle.

edited May 23 '17 at 12:27

Community

1
1

answered Aug 31 '14 at 03:29

Yoann

3,020
1
24
34

I am trying to submit a favorites button. Upon POST it sends the AJAX to the server and it works. But the styles do not get changed nor does the form, so I can't get instant feedback and act on it. What if I wanted to un-favorite the entity. If I come somehow refresh that portion of the form within which the submit button was clicked, only then everything will work fine. The new method DELETE and the new styles all will show up. – Ali Gajani Aug 31 '14 at 03:48
Oh, I get it, you want to replace the form, with the newly created element you've just posted. – Yoann Aug 31 '14 at 04:07
I can try replacing that div (containing everything). Let's see. Still on it. – Ali Gajani Aug 31 '14 at 04:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60323/discussion-between-yoannm-and-ali-gajani). – Yoann Aug 31 '14 at 04:16

score 1 · Answer 2 · answered Aug 31 '14 at 03:29

So i would do it like this

//mainpage.php
<html>
// ... snip html ...
<?php include("form.php") ?>
<script>
$("form").one('submit', function (evt) {
   evt.preventDefault();
   var $this = $(this);
   $.ajax({
     url: $this.attr('action'),
     method: $this.attr('method'),
   }).done(function (data, status, xhr) {
      var $newForm = $(data);
      $this.html($newForm.html());
      $this.attr("method", $newForm.attr("method"));
   });
});
</script>

// ... snip more html ...

then the form page just returns the <form> html

//form.php
<form method="<?php $method ?>" action="form.php">
   <input name="foo">
   <input type="submit" value="submit">
</form>

Note: you may have to rebind the form after you submit, you will have to double check that.

How to reload a specific form after submit success using Ajax?

2 Answers2