F
Filament•2mo ago
Matilda

Prevent Enter\Return submitting form

Hi guys, Anyone know if there is simple way of stop the Enter\Return key triggering the submit on the form? Thanks
5 Replies
LeandroFerreira
LeandroFerreira•2mo ago
try this Register in the appserviceprovider 
use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;
FilamentAsset::register([
    Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
]);
use Filament\Support\Assets\Js;
use Filament\Support\Facades\FilamentAsset;
FilamentAsset::register([
    Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
]);
/* custom.js */
document.addEventListener('alpine:init', () => {
    const form = document.getElementById('form');
    if (form) {
        form.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
            }
        });
      }
    });
/* custom.js */
document.addEventListener('alpine:init', () => {
    const form = document.getElementById('form');
    if (form) {
        form.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
            }
        });
      }
    });
run php artisan filament:assets
Matilda
MatildaOP•2mo ago
Hi, Thanks for reply! This working, but is working everywhere... Can I specifiy to one form?
toeknee
toeknee•2mo ago
see 
const form = document.getElementById('form');
const form = document.getElementById('form');
and change it to 
form = document.querySelector('.myformClass');
form = document.querySelector('.myformClass');
Then on $form do 
$form->extraAttributes(['class' => 'myformClass']);
$form->extraAttributes(['class' => 'myformClass']);
LeandroFerreira
LeandroFerreira•2mo ago
After publishing this asset, you could remove it from the provider and load it on specific pages using the mount method: CreateXX.php 
public function mount(): void
{
    parent::mount();

    FilamentAsset::register([
        Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
    ]);
}
public function mount(): void
{
    parent::mount();

    FilamentAsset::register([
        Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
    ]);
}
@Matilda did it work?
Matilda
MatildaOP•2mo ago
I'm gonna be trying later today...thanks !

Did you find this page helpful?