Form submit with custom events is missing property of the submit button itself

[linjmeyer]

Past Issues Searched

• I have searched open and closed issues to make sure that the bug has not yet been reported

Issue is a Bug Report

• This is a bug report and not a feature request, nor asking for self-hosted support

Using official Plausible Cloud hosting or self-hosting?

Self-hosting

Describe the bug

I have a get request in a form, where one of the expected params is provider and the value is the button that is clicked. The form works as expected when no event class is present, but if I add one the form submission is missing the provider param from the clicked button. There is also two hidden elements, returnUrl and __RequestVerificationToken which are always present in either case. The only one missing is the button's value.

here is an example of the form:

<form method="post" class="plausible-event-name--user-login-or-signup" action="/user/login">
    <input type="hidden" name="returnUrl" value="/return/url/example">
    <input type="hidden" name="__RequestVerificationToken" value="super-secret-token-value">
    <button type="submit" name="provider" value="Google" title="Log in using your Google account">
    Login With Google
    </button>
    <button type="submit" name="provider" value="Apple" title="Log in using your Apple account">
    Login With Apple
    </button>
</form>

I suspect it is because plausible is capturing the submission via button click, stopping it, then re-submitting it via element.submit() or element.requestSubmit() but I am not sure.

Expected behavior

The button's value won't omitted when the form is submitted via a click on a particular button.

Screenshots

No response

Environment

- OS: Windows
- Browser: Chrome
- Browser Version: 132.0.x

[linjmeyer]

Easy workaround if you can edit the HTML is to just have multiple (almost) identical forms and move the button's value to a hidden input element:

<form method="post" class="plausible-event-name--user-login-or-signup" action="/user/login">
    <input type="hidden" name="returnUrl" value="/return/url/example">
    <input type="hidden" name="__RequestVerificationToken" value="super-secret-token-value">

    <input type=hidden" name="provider" value="Google" />

    <button type="submit" title="Log in using your Google account">
    Login With Google
    </button>
</form>

<form method="post" class="plausible-event-name--user-login-or-signup" action="/user/login">
    <input type="hidden" name="returnUrl" value="/return/url/example">
    <input type="hidden" name="__RequestVerificationToken" value="super-secret-token-value">

    <input type=hidden" name="provider" value="Google" />

    <button type="submit" title="Log in using your Apple account">
    Login With Apple
    </button>
</form>

[iraprabhu05]

Hi, I’ve opened a pull request with a fix for this issue.

The root cause was in custom-events.js, where the event name parsing didn’t preserve submit button values during custom event form submissions. I’ve updated the logic so the events are tracked correctly.

Here’s the PR: #5900

Happy to make changes if needed. Thanks!

[ukutaht]

This issue is fixed by the tracking script changes in v3.1.0: https://github.com/plausible/analytics/releases/tag/v3.1.0

Custom events are now sent via fetch-with-keepalive which allows us to avoid doing event.preventDefault() and form.submit(). We allow the form to submit as normal, relying on fetch-with-keepalive to send the event even after the page context unloads.