Zmienne Post nie są ustawione podczas wysyłania formularza za pomocą JS

Question

Mam formularz, który przesyłam z javascriptem, gdy tylko użytkownik kliknie etykietę. Istnieje dziwne zachowanie, w którym dane nie są wysyłane. Ale jeśli przekażę formularz z opóźnieniem (nawet z opóźnieniem 0), działa.

Oto html:

<form action="/other-page" method="post"> 
    <input id="val-1" type="checkbox" name="filter[]" value="1"> 
    <label for="val-1">Value 1</label> 

    <input id="val-2" type="checkbox" name="filter[]" value="2"> 
    <label for="val-2">Value 2</label> 
</form> 

Skrypt:

<script> 
    $('label').click(function() { 
     var form = $(this).closest('form') 

     // if I use the following line the values won't be set 
     form.submit() 

     // If I use a `setTimeout` it works, even with a delay of 0 
     setTimeout(function() { 
      form.submit() 
     }, 0) 
    }) 
</script> 

Nie jest to duży problem, jak można dokonać tej pracy z setTimeout ale piszę to z opóźnieniem 0 jest naprawdę brzydki. Myślałem o błędzie przeglądarki, ale testowałem z Chrome i Firefoxem i mam taki sam wynik.

Masz pojęcie o tym, co się dzieje?

Answer 1

To dlatego, że słuchasz na kliknięciu etykiety. Spróbuj odsłuchać zaznaczenie pola wyboru.

$('input[type=checkbox]').click(function() { 
    $(this).closest('form').submit(); 
}); 

Kliknięcie na etykiecie oznacza, że ​​przeglądarka "kliknie" powiązany z nią element. A ponieważ przesyłasz formularz na etykiecie kliknij, nie da to przeglądarce szansy na zrobienie tego.

Dlaczego funkcja setTimeout z 0 działa, ponieważ jest to sztuczka do opublikowania wykonania, dopóki przeglądarka nie zakończy działania. Więcej informacji na ten temat można znaleźć pod adresem Why is setTimeout(fn, 0) sometimes useful?

Answer 2

Ktoś (nie pamiętam jego nazwy użytkownika) opublikował rozwiązanie, ale został cofnięty, więc usunął odpowiedź. Ale jego roztwór prawo więc tutaj jest:

Wszystko co musisz zrobić, to użyć zdarzenia kliknięcia na wejściu zamiast etykiety

$('input[type=checkbox]').click(function() { 
     $(this).closest('form').submit() 
})