siagapendis.com - Submit (Cari) button refreshes the page in Firefox

[reinhart1010]

URL: https://siagapendis.com/index/pencarian

Browser / Version: Firefox 69.0
Operating System: Ubuntu
Tested Another Browser: Yes

Problem type: Site is not usable
Description: Submit (Cari) button refreshes the page in Firefox
Steps to Reproduce:

1. Fill any strings on "Nama" (Name) field
2. Select any values of "Pilih Kabupaten" select box
3. Click on "Cari" (Search) button

In Firefox, the page refreshes while loading the data. In Google Chrome 77.0.3865.90 a loading bar is shown instead (and return an error since the entered search result is invalid). Note that this issue does not depend on the form inputs itself.

This was originally reported on Mozilla Indonesia Telegram group back in May, while this issue still persists as of today.

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-sergiulogigan]

Thanks for the report!
I'm able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 71.0a1 (2019-10-07)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis.

[karlcow]

        $(document).on('click','#search',function(){
          $('#errormessage_search').empty();
          $('#search').prop('disabled',true);
          $('#pencarian').slideUp('fast');
          $('#load_table').slideDown('fast');
          $('#table_body').empty();
          var kabupaten_id = $('#city').val();
          var nama_guru = $('#nama_guru').val();
…

when we do the click. It starts right away with a navigation.

https://siagapendis.com/plugins/jquery/jquery-2.1.4.min.js

The HTTP POST of the search returns:

HTTP/1.1 200 OK
Date: Wed, 09 Oct 2019 01:57:04 GMT
Server: Apache
Strict-Transport-Security: max-age=63072000; includeSubdomains;
X-Frame-Options: sameorigin
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
Referrer-Policy: same-origin
Feature-Policy: microphone 'none'; payment 'none'; sync-xhr 'self'
Cache-Control: no-cache, private
Set-Cookie: XSRF-TOKEN=eyJpdiI6Im5nbzZoNlJJMnBXOFplUXhcL1NEXC96UT09IiwidmFsdWUiOiJ2QXVrbkNmeTd5Y1dWdzEwcXVEZW5SWmo0R0R3MGJjaE1YY2xIaXJIOE9EdGZDZDE0SDgraGpBeEhBY3pleThLIiwibWFjIjoiZjkyMWY0NDJlYjNjNTM3MzBiMTYxOTZlZDI2NGFkNmZjZTNhOWJjODI1Y2U2YTA3MGE2MDQ2YTRkNDdkMmQ1MCJ9; expires=Wed, 09-Oct-2019 03:57:05 GMT; Max-Age=7200; path=/
laravel_session=eyJpdiI6ImtwUFZhMEtUQ3g4N3dLY1NuMXdPSHc9PSIsInZhbHVlIjoieGNcL3VNOXozMGZwNGVNZDJTN3NodzJISXV6eERHMUZUeW5vUkhTZHlBY0tOTTE2RHJGckg0UjVseVdqQTl0WVwvIiwibWFjIjoiZWJkZmI3ZGUyOWJmYmIyMjFlODg1N2NjZTdmMzM5ZWFjMTA5Yzc1OWMxYWNjZmI3NzVjOWFmYTZlODA3M2ZlMiJ9; expires=Wed, 09-Oct-2019 03:57:05 GMT; Max-Age=7200; path=/; httponly
Vary: User-Agent
Content-Length: 11
Keep-Alive: timeout=10, max=60
Connection: Keep-Alive
Content-Type: application/json

{'hasil': 0}

but it seems to break in JQuery?

[wisniewskit]

This one's really silly. They are not cancelling the click event on the submit button, so Firefox goes ahead and submits the form, even though they are simultaneously trying to only send a POST request with XMLHttpRequest. So that's why there is a "navigation" happening. If I change their click handler (which @karlcow listed above) to preventDefault on the event, then it works fine in Firefox too:

        $(document).on('click','#search',function(evt){
         evt.preventDefault();
          $('#errormessage_search').empty();

But why doesn't Chrome also navigate? That I don't know yet.

[wisniewskit]

Oh, the answer was right there in the code @karlcow listed, it was this line:

          $('#search').prop('disabled',true);

Disabling the button this way as it is clicked works in Chrome, but not Firefox. I have no idea why, though there is a bug filed to figure this out already. It seems like it's considered a Firefox bug.

It's unclear when that bug will be fixed, so if the site is willing to accept a trivial fix, they can just use the fix I showed above.

[softvision-oana-arbuzov]

The issue is still reproducible on my side.

Tested with:
Browser / Version: Firefox Nightly 72.0a1 (2019-11-19)
Operating System: Linux Ubuntu 16.04

[reinhart1010]

The owner of this site is contactable via email: direktorat.pai@gmail.com.
Scheduling for contact within 7 days (I'll need to rewrite this to Indonesian to be understandable by folks at Ministry of Religion of Republic of Indonesia).

[reinhart1010]

Sent via email. Moving to sitewait.

[reinhart1010]

This issue is still reproducible