> For the complete documentation index, see [llms.txt](https://formbackend.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://formbackend.gitbook.io/documentation/ajax-javascript/how-to-show-your-own-message-when-a-form-has-been-submitted.md).

# How to show your own message when a form has been submitted

Sometimes you don't want the form to redirect to a new page, but instead just show an inline message once the form has been submitted. 

For this example we'll use jQuery.

We'll have a form that looks like this:

```markup
<div class="formbackend-form-wrapper">
  <form action="https://www.formbackend.com/f/kcsfk4qr" method="post" id="form-signup">
    <label>Name</label>
      <input type="text" name="name" minlength=2 required>

    <label>Email</label>
    <input type="email" name="email" required>

    <button type="submit">Submit</button>
  </form>
</div>
```

It's important to notice that we've wrapped our form in a `div` - we're doing this because we want to have the form disappear once it has been submitted.

Our javascript looks like this:

```javascript
<script>
  $(function() {

    var $form = $('#form-signup');
    var $formWrapper = $('.formbackend-form-wrapper');


    $form.on("submit", function(e) {
      var formUrl = $(this).attr('action');

      // We don't want the page to submit and refresh
      e.preventDefault();

      // Let's show the user a message once they hit submit
      $formWrapper.html("Submitting the form");

      // POST the request to Formbackend (the formUrl value)
      $.ajax({
        url: formUrl,
        type: 'POST',
        headers : {
          'accept' : 'application/javascript',
        },
        // We serialize the form fields
        data: $form.serialize()
      }).done(function(submissionMessage) {
        // submissionMessage is the "Submission Text" you
        // set in Formbackend
        // - default: "We received your submission"
        $formWrapper.html(submissionMessage)
      }).fail(function() {
        $formWrapper.html("Something went wrong :(")
      }).always(function() {
        // This always happens
      });
    });

  });
</script>
```

There's a few things going on here. As you can see we've set up an eventhandler that listens for the `submit`  event on the form. So when someone clicks on the submit button, we catch that and do something.

First we store the `formUrl` which is the url the form points to (we later use that in the ajax call). We then have the `e.preventDefault()` line, that prevents the browser from submitting the form - since we're doing this with AJAX a few lines down.

We then take the html within the `$formWrapper` and replace that with "Submitting the form" - this is to show the user a message that the form is submitting.

After the `$.ajax` call we have a `done(...)`  callback - in there we take what the server returns to us (the Submission text we saved as part of the form in FormBackend) and replaces the `$formWrapper` html with that message.

You can of course do it your own way and style it as you want :)