Disable submit button

[Alvaro Pagliari]

Hello,

I'm trying to disable the submit button when the form submit function is called. 

I gave a look at the file zotonic-1.0.js line 1694, function z_init_postback_forms, but it doesn't seem to disable the button. 

Is there support for this? Maybe a configuration I should set for this to work? 

I'm fighting a problem with a specific form post that's randomly duplicating inserts and maybe disabling the button could help.

Cheers,

--

Álvaro Pagliari

[Marc Worrell]

Hi Alvaro,

After a form is submitted then we “mask” the form.

This is done with a small delay.

What you could do is mask the form without a delay (in the submit wire).

This will place a div over the form, preventing any subsequent clicks.

Cheers, Marc

--

---
You received this message because you are subscribed to the Google Groups "Zotonic users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to zotonic-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/zotonic-users/3dcbdea9-4cf8-4e17-b284-70f354690c7f%40googlegroups.com.

[Alvaro Pagliari]

Hello!

Sorry, hadn't notice that the first line of submit was the mask 🙈

So, I'm having a problem that randomly, the server receives two postbacks for the same form with the same data.

I'm not able to reproduce it on my machine, so it's a bit hard to debug it. Maybe it's some connection issue? maybe her mouse is broken and generating multiple events?

I add some ?DEBUG macros on the postback and the problem shows up like this:

2019-11-28 20:48:20.512 [info] <0.30748.45> DEBUG: m_sisbv_cad_clientes:530  {insert,[{status,1},{acl_cad_group,"acl_user_group_recepcao"},{cpf,[]},{title,"PATRICIA MARTINS "},{data_nascimento,[]},{whatsapp,"XXXXXXXXXX"},{email,"XXXXXXXXX"},{renda_familiar,0.0},{estado_civil,"1"},{conjuge_title,[]},{conjuge_data_nascimento,[]},{conjuge_whatsapp,[]},{origem,2},{evento_marketing_id,"11202"},{observacao,"captação marketing, MCMV XXE"},{is_published,true},{imob_origem,2},{horario_atendimento_id,undefined}]}
2019-11-28 20:48:21.015 [info] <0.31135.45> DEBUG: m_sisbv_cad_clientes:530  {insert,[{status,1},{acl_cad_group,"acl_user_group_recepcao"},{cpf,[]},{title,"PATRICIA MARTINS "},{data_nascimento,[]},{whatsapp,"XXXXXXXXXX"},{email,"XXXXXXXXX"},{renda_familiar,0.0},{estado_civil,"1"},{conjuge_title,[]},{conjuge_data_nascimento,[]},{conjuge_whatsapp,[]},{origem,2},{evento_marketing_id,"11202"},{observacao,"captação marketing, MCMV XXE"},{is_published,true},{imob_origem,2},{horario_atendimento_id,undefined}]}

2019-11-28 19:59:42.254 [info] <0.1358.45> DEBUG: m_sisbv_cad_clientes:530  {insert,[{status,1},{acl_cad_group,"acl_user_group_recepcao"},{cpf,[]},{title,"DANIELI CARDOSO DA SILVA "},{data_nascimento,[]},{whatsapp,"XXXXXXXXXX"},{email,"XXXXXXXXXX"},{renda_familiar,0.0},{estado_civil,"1"},{conjuge_title,[]},{conjuge_data_nascimento,[]},{conjuge_whatsapp,[]},{origem,2},{evento_marketing_id,"11202"},{observacao,"captação marketing, MCMV XXE"},{is_published,true},{imob_origem,1},{horario_atendimento_id,undefined}]}
2019-11-28 19:59:42.293 [info] <0.1358.45> DEBUG: m_sisbv_cad_clientes:530  {insert,[{status,1},{acl_cad_group,"acl_user_group_recepcao"},{cpf,[]},{title,"DANIELI CARDOSO DA SILVA "},{data_nascimento,[]},{whatsapp,"XXXXXXXXXX"},{email,"XXXXXXXXXX"},{renda_familiar,0.0},{estado_civil,"1"},{conjuge_title,[]},{conjuge_data_nascimento,[]},{conjuge_whatsapp,[]},{origem,2},{evento_marketing_id,"11202"},{observacao,"captação marketing, MCMV XXE"},{is_published,true},{imob_origem,1},{horario_atendimento_id,undefined}]}

2019-11-28 19:15:36.295 [info] <0.7044.44> DEBUG: m_sisbv_cad_clientes:530  {insert,[{status,1},{acl_cad_group,"acl_user_group_recepcao"},{cpf,[]},{title,"GISELE CAMARGO "},{data_nascimento,[]},{whatsapp,"XXXXXXXXXX"},{email,"XXXXXXXXXX"},{renda_familiar,0.0},{estado_civil,"1"},{conjuge_title,[]},{conjuge_data_nascimento,[]},{conjuge_whatsapp,[]},{origem,2},{evento_marketing_id,"11202"},{observacao,"captação marketing, MCMV XXE"},{is_published,true},{imob_origem,1},{horario_atendimento_id,undefined}]}
2019-11-28 19:15:36.351 [info] <0.7044.44> DEBUG: m_sisbv_cad_clientes:530  {insert,[{status,1},{acl_cad_group,"acl_user_group_recepcao"},{cpf,[]},{title,"GISELE CAMARGO "},{data_nascimento,[]},{whatsapp,"XXXXXXXXXX"},{email,"XXXXXXXXXX"},{renda_familiar,0.0},{estado_civil,"1"},{conjuge_title,[]},{conjuge_data_nascimento,[]},{conjuge_whatsapp,[]},{origem,2},{evento_marketing_id,"11202"},{observacao,"captação marketing, MCMV XXE"},{is_published,true},{imob_origem,1},{horario_atendimento_id,undefined}]}
2019-11-28 19:15:36.413 [info] <0.7044.44> DEBUG: m_sisbv_cad_clientes:530  {insert,[{status,1},{acl_cad_group,"acl_user_group_recepcao"},{cpf,[]},{title,"GISELE CAMARGO "},{data_nascimento,[]},{whatsapp,"XXXXXXXXXX"},{email,"XXXXXXXXXX"},{renda_familiar,0.0},{estado_civil,"1"},{conjuge_title,[]},{conjuge_data_nascimento,[]},{conjuge_whatsapp,[]},{origem,2},{evento_marketing_id,"11202"},{observacao,"captação marketing, MCMV XXE"},{is_published,true},{imob_origem,1},{horario_atendimento_id,undefined}]}

Any hints on what can be happening? Or how I should debug this issue?

--

Álvaro Gianni Pagliari
alvaropag [at] gmail [dot] com

To view this discussion on the web visit https://groups.google.com/d/msgid/zotonic-users/2AF03B22-FFEC-421F-A68D-09EFFB1EE0A1%40me.com.

[Marc Worrell]

Hola,

That is less than 0.5 seconds in between.

So it is not the “retry handler”, that one only works after > 30 secs (or so, need to look it up).

To me it looks like a broken mouse which does double click.

Or she double clicks and it actually generates two submit events.

Or there are two submit handlers attached to the form, but you should have seen that in your testing.

We can catch this either on the client or the server side.

On the client it is the easiest, I think.

An option is to add some code to the form submit to prevent double submits within a short period.

If these are actually generated by accidental double clicks then 0.5 secs or less should be enough to catch them.

Especially as > 0.1 secs can be caught by the form mask.

Of course there might be forms that _need_ quick submits (incrementers and the like).

So we might want to have an option for this de-duplication, an option to suppress the deduplication or tie this into the mask function.

What do you think?

Cheers,

Marc

To view this discussion on the web visit https://groups.google.com/d/msgid/zotonic-users/CAOuQNV1tqkorpAHAJei2nfAfw7rZ4ws2ZznWkBtyZ8FmL%3DCc_Q%40mail.gmail.com.

[Alvaro Pagliari]

Hello,

I verified the submit handler and there was only one attached.

I talked with the user, her mouse was ok but it seems her connection was flaky... It didn't occur anymore, but I'll keep monitoring.

I liked your idea of de-duplicating... maybe an option to the postback? or the form? something like...

{% wire id="the_form" type="submit" postback={pb_crud_save dedup=200} delegate="module_to_handle_this" %}
          <form id="the_form" class="form-horizontal" method="post" action="postback">

or

{% wire id="the_form" type="submit" postback={pb_crud_save } delegate="module_to_handle_this" %}
          <form id="the_form" class="form-horizontal" method="post" action="postback" data-dedup="200" >

The dedup value would be in milliseconds... no dedup information would result in the same behavior as of now...

Cheers,

--

Álvaro Gianni Pagliari
alvaropag [at] gmail [dot] com

To view this discussion on the web visit https://groups.google.com/d/msgid/zotonic-users/6B645C59-8A4B-45C7-9F22-0EC58E2E3088%40me.com.

[Marc Worrell]

Definitely an idea.

We can add a ‘data-‘ attribute to the <form> tag when it is submitted.

Then after that you can check if the minimal amount of time passed before allowing it to submit again.

- M

To view this discussion on the web visit https://groups.google.com/d/msgid/zotonic-users/CAOuQNV3FUAEYna%2BKqWjS%2B9grjEffRRfL5ORwqe4_3oKo0FWSNg%40mail.gmail.com.