Multiple form submission after visiting page

Questions
#1

Hello,

I’m fairly new at programming and I encounter a problem with my framework app. I will try to describe my problem:

I access a page, which contains a form, using this router:

path: ‘/control-lavanderia/’,
componentUrl: ‘./pages/control-lavanderia.html’,
},

When I submit the form, everything is ok and once the submission is successful y use:

app.views.main.router.navigate("/");

to go back.

The problem is that if I access the same page again, and submit the form, it will submit two times. Then if I repeat the process again it will be submitted three times and so on.

In short, the form is submitted as many times as I access this page, even if I just access the it and go back using the back button, without submitting the form.

This happens also with every page on my app, which I access using a similar router.

So, what am I doing wrong here?

Thanks.

#2

How do you handle the submit event?

#3

Hi, thanks for the response, I’m using a standar submit button and handling the response with the app.

app.on(‘formAjaxSuccess’, function (form, data, xhr) {

//My code

});

I also use a this, which also runs several times:

app.on(‘formAjaxBeforeSend’, function (form, data, xhr) {

        app.dialog.preloader("Espere por favor.");
        
    });

The main view is configured like this, just in case:

var mainView = app.views.create(’.view-main’, {
url: ‘/index.html’,
main: true,
stackPages: false,
allowDuplicateUrls: false,
});

Thanks,

#4

Sorry, here is the form header and the submit button.

’<form id ="data" action= "http://www.miadmon.com/miappmon/v1/laundry_record/create.php" method="POST" class="form-ajax-submit">

<div class = "block"> <div class = "row"> <input type="submit" id="submit" value = "Registrar inicio" class="col button button-large button-raised button-fill"/> </div> </div>

#5

where did you put that code?

#6

In the pageini section of the page I’m calling using my router.

#7

app.on(‘formAjaxSuccess’, function (form, data, xhr) {

change to

this.$el.find('.form-example').on('formajax:success', function (e) {
  var xhr = e.detail.xhr; 
  var data = e.detail.data; 
});

In router component:

<form class="form-example"....>

#8

Thank your very much! it seems that the problem is solved. However, could you please explain the reason why it wasn’t working before and with this fix it does?

Thanks again!

#9

Because with using app.on every time you just add more and more same event listeners (and you don’t remove them later) so with every page load form will be submitted more and more times.
And with correct code it just add event handler for that specific form.

#10

Thank you very much for your answer and help.