How to reset form and send again?

Hi there,

I came across a problem that I seriously don’t know how solve. For a project I implemented a form with the help of Kirby Uniform Plugin. Validation takes place with another jQuery Plugin called JQuery Form Validator. The Form gets sended via AJAX. I simply want to reset the form and Make it possible to send another Mail without reloading the page.

This is how my JS looks:

  $("#contact-form").submit(function(e) {
    e.preventDefault();
    var $this = $(this),
        actionurl = e.currentTarget.action,
        formData = $this.serialize();

    $.ajax({
      type:'post',
      url: actionurl,
      data: formData,
      beforeSend:function(){
        // launchpreloader();
      },
      complete:function(){
        $this.fadeOut(300, function(){
          $('.content--contact').scrollTop(0);
        });
      },
      success:function(result){
        $('.form--completed').delay(500).fadeIn(300);
      }
    });
  });

The Page controller looks like that:

<?php

use Uniform\Form;

return function ($site, $pages, $page)
{
    $form = new Form([
        'name' => [],
        'company' => [],
        'email' => [],
        'phone' => [],
        'message' => [],
        'checkbox' => []
    ]);

    if (r::is('POST')) {
        $form->emailAction([
            'to' => '.......@gmail.com',
            'from' => 'noreply@.......de',
            'subject' => 'TEST',
            'snippet' => 'emails/success',
        ]);
    }
    return compact('form');
};
var resetForm = function(e, delay){
    var me = $(e);
    if(me.css('display') == 'none'){
      setTimeout(function(){
        // RESET FORM
        me[0].reset();
        // DISABLE SUBMIT BUTTON
        me.find("input[type=submit]").prop("disabled", true).addClass("disabled");
        // HIDE THE SUBMIT CONFIRMATION
        me.next().hide();
        // SHOW THE FORM AGAIN
        me.show();
      }, delay);
    }
  }

After the submitting the form I am calling the resetForm Function. And everything works fine, except that the second Mail never gets sended. Can anybody help?

Can you confirm that a second POST request is sent via the developer tools? How can you send the form again if you disable the submit button in the resetForm function? Also you should always do validation on the server, even if you do validation in JavaScript, too. There are some people who have JS disabled in their browser and generally it’s no problem to send POST requests to your site that completely ignore your JS.

The Button is disabled via JS as long is the validation isn’t completed successfully. If JS Validation is done the Submit Button gets activated. But I’ll defenetly add some validation in PHP as well. Thanks for your advice.

Regarding your question: the second POST also appears in developer tools. What do I need to test now? Sorry I am building a form for the first time…:wink:

Thanks!

If the second POST is sent, your JS seems to work fine. What is the response code of the second POST? What Kirby version do you use?

The second post outputs this:

Request URL:http://.......de/
Request Method:POST
Status Code:302 Moved Temporarily
Remote Address:185.158........:80
Referrer Policy:no-referrer-when-downgrade

right after it shows this output:

Request URL:http://............de/
Request Method:GET
Status Code:200 OK
Remote Address:185.158..........:80
Referrer Policy:no-referrer-when-downgrade

I am using Kirby 2.4.1

Okay, two issues:

  1. When you call reset() on the form element, the CSRF token (the value of the csrf_token field) is probably cleared, too. But this token is required, else the POST request will be rejected (i.e. 302 redirected with an error message).

  2. Even if the token is not reset (any more) it will get invalid after the first request. IIRC in Kirby 2.4.1 a CSRF token is only valid for a single request. This was changed in 2.5.2 where the token is valid for an entire session. The easiest fix would be to update to the newest Kirby version. Is that possible?

Thanks a lot! :pray::pray::pray:
The update to Kirby 2.5.5 solved the problem finally! :slight_smile: