[JS] Firefox i przycisk wewnątrz formularza

[trejder]

Witam,

Stworzyłem prosty formularz. Kilka pól, list rozwijalnych i standardowy "Klawisz wyślij". Wewnątrz formularza jest drugi klawisz, który ma po prostu wywołać banalny kod JavaScript powodujący wpisanie określonej wartości do jednego z pól formularza.

Kod JS to:

Kod: Zaznacz cały

function randomize_time()
{
     edit_post.date_second.value = "00";
     
     return false;
}

Gdzie: edit_post to nazwa formularza wewnątrz którego znajduje się pole date_second, które ma przyjąć zadawaną wartość.

Klawisz wywołujący ten kod wygląda tak:

Kod: Zaznacz cały

<button onclick="javascript:randomize_time(); return false;">Czas losowy</button>

Pomimo tego, że zarówno w kodzie funkcji JS, jak i w wywołaniu jej w HTMLu występuje return false;, Firefox z uporem maniaka oprócz wywołania tej funkcji powoduje przeładowanie strony - to znaczy zachowuje się tak, jakby kliknięto klawisz "Wyślij" w tym formularzu. Co jest oczywiście nieprawdą, bo klikam "Czas losowy", a nie "Wyślij".

Pod IE tego problemu nie ma.

Czy ktoś może mi powiedzieć, co robię źle?

Albo co zrobić, żeby osiągnąć taką funkcjonalność, która do tej pory wydawała mi się logiczna i oczywista: Użytkownik klika "Czas losowy" to uruchamiana jest funkcja randomize_time() i NIC WIĘCEJ SIĘ JUŻ NIE DZIEJE. Jeśli zaś użytkownik kliknie klawisz "Wyślij", to formularz jest wysyłany (przetwarzany przez skrypt PHP) i też NIC WIĘCEJ SIĘ JUŻ NIE DZIEJE - to znaczy, w tym przypadku funkcja randomize_time() NIE JEST uruchamiana.

[trejder]

Na tą chwilę poradziłem sobie w sposób łopatologiczny. To znaczy - wyrzuciłem definicję <button></button> poza zamykający formularz znacznik </form>. Działa bez problemów.

Lecz nadal uważam, że to jest bez sensu. I swoim postem próbowałem również pobudzić dyskusję, czy Waszym zdaniem to jest normalne, że Firefox zachowuje się w sposób opisany przeze mnie w pierwszym poście? Bo moim skromnym zdaniem to jest lekkie odbiegnięcie od przyjętych standardów (które mówią, że do wysłania formularza służy klawiszy o type="submit", a nie dowolny klawisz wewnątrz formularza). Oraz również lekki bezsensik. Programiści muszą żołądkować się i szukać rozwiązania jak ominąć rzecz, która nie powinna się dziać. Mylę się?

[carlos]

Witam,

Hej,

Kod: Zaznacz cały

<button onclick="javascript:randomize_time(); return false;">Czas losowy</button>

17.5 The BUTTON element
(...)
Attribute definitions
(...)
type = submit|button|reset [CI]
This attribute declares the type of the button. Possible values:

* submit: Creates a submit button. This is the default value.

(za http://www.w3.org/TR/html4/interact/for ... def-BUTTON, podkreślenie moje)

Zmień mu typ na "button"; przy okazji możesz pozbyć się drugiego returna.

Pozdrawiam.

edit:

Bo moim skromnym zdaniem to jest lekkie odbiegnięcie od przyjętych standardów (które mówią, że do wysłania formularza służy klawiszy o type="submit", a nie dowolny klawisz wewnątrz formularza). Oraz również lekki bezsensik. Programiści muszą żołądkować się i szukać rozwiązania jak ominąć rzecz, która nie powinna się dziać. Mylę się?

Mylisz (standard zacytowałem powyżej)

[helios]

Kod JS to:

Kod: Zaznacz cały

function randomize_time()
{
     edit_post.date_second.value = "00";
     
     return false;
}

Kod: Zaznacz cały

<button onclick="javascript:randomize_time(); return false;">Czas losowy</button>

To nie będzie działać, bo przeglądarka nie wie, co to za element "edit_post". Trzeba to napisać trochę inaczej.

Kod: Zaznacz cały

function randomize_time(form)
{
   form.edit_post.date_second.value = "00"
}


Kod: Zaznacz cały

<button type="button" onclick="javascript:randomize_time(this.form)">Czas losowy</button>


Pisane z palca, nie testowałem.

Pozdrawiam

[trejder]

Zmień mu typ na "button"; przy okazji możesz pozbyć się drugiego returna.

Teraz rozumiem. Ale... Ogólnie, albo ja czegoś nie dostrzegam, albo coś jest generalnie nie tak. Oto co znalazłem:

1. Opisana przeze mnie w pierwszym poście funkcjonalność istniała tylko, gdy klawisz faktycznie służący do wysyłania formularza był zdefiniowany przy pomocy "starszego" stylu, czyli. <input type="submit"... Gdy - za Twoim cytatem zmieniłem go na po prostu <button>Wyślij...</button> (bo - jak piszesz domyślnie jest typu submit), a następnie przeniosłem owego dodatkowego buttona z powrotem do wnętrza definicji <form> to okazało się, że w takim układzie return false umieszczone wewnątrz <button> tym razem działa i kliknięcie dodatkowego klawisza już nie powoduje wysłania formularza. Mimo, że NADAL jest on typu submit (domyślnego), bo mu nie dopisywałem pola "type".

2. Po usunięciu return false i nadal nie zmienianiu typu dodatkowego klawisza formularz znowu zaczął się zachowywać tak, jak na początku - to znaczy wywoływana jest funkcja JS, a następnie formularz jest wysyłany.

3. Po dopisaniu type="button" zgodnie z tym, co mówiłeś i co należało się spodziewać (wszak to standard) całość działa tak, jak ma - funkcja jest wywoływana, formularz nie jest wysyłany.

Ogólnie jednak nadal śmiem twierdzić, że Firefox się uchyla od standardu lekko. No, bo skoro - jak piszesz - domyślnie typ jest submit to jego działania nie powinno (CHYBA) blokować zwykłe dopisanie return false po funkcji wywoływanej w onclick (pierwszy punkt powyżej).

Mylisz ;) (standard zacytowałem powyżej)

Wobec tego chylę czoła i zwracam honor - oczywiście tu był ewidentny mój błąd i niedoczytanie...

[carlos]

Zmień mu typ na "button"; przy okazji możesz pozbyć się drugiego returna.

Teraz rozumiem. Ale... Ogólnie, albo ja czegoś nie dostrzegam, albo coś jest generalnie nie tak. Oto co znalazłem:

1. Opisana przeze mnie w pierwszym poście funkcjonalność istniała tylko, gdy klawisz faktycznie służący do wysyłania formularza był zdefiniowany przy pomocy "starszego" stylu, czyli. <input type="submit"... Gdy - za Twoim cytatem zmieniłem go na po prostu <button>Wyślij...</button> (bo - jak piszesz domyślnie jest typu submit), a następnie przeniosłem owego dodatkowego buttona z powrotem do wnętrza definicji <form> to okazało się, że w takim układzie return false umieszczone wewnątrz <button> tym razem działa i kliknięcie dodatkowego klawisza już nie powoduje wysłania formularza. Mimo, że NADAL jest on typu submit (domyślnego), bo mu nie dopisywałem pola "type".

Jeśli bardzo chcesz pod górkę kombinować, obie formy działają[1]:

Kod: Zaznacz cały

<button onclick="javascript:randomize_time(this.form); return false;">Czas losowy</button>
<input type="submit" onclick="javascript:randomize_time(this.form); return false;" value="Czas losowy" />

http://www.orchid.homeunix.org/carlos/t ... lick.xhtml

Nie wiem tylko jaki sens jest tworzyć "submit", jeśli nic nie ma wysyłać... o_O

2. Po usunięciu return false i nadal nie zmienianiu typu dodatkowego klawisza formularz znowu zaczął się zachowywać tak, jak na początku - to znaczy wywoływana jest funkcja JS, a następnie formularz jest wysyłany.

Zgodnie ze specyfikacją (to jest przycisk "submit").

3. Po dopisaniu type="button" zgodnie z tym, co mówiłeś i co należało się spodziewać (wszak to standard) całość działa tak, jak ma - funkcja jest wywoływana, formularz nie jest wysyłany.

No właśnie, teraz to jest zwykły przycisk.

Ogólnie jednak nadal śmiem twierdzić, że Firefox się uchyla od standardu lekko. No, bo skoro - jak piszesz - domyślnie typ jest submit to jego działania nie powinno (CHYBA) blokować zwykłe dopisanie return false po funkcji wywoływanej w onclick (pierwszy punkt powyżej).

No to się teraz pogubiłem. Po pierwsze chciałeś mieć przycisk wewnątrz formularza, który nie będzie wysyłać danych - to już mamy, do tego jest typ "button" zamiast "submit" i działa bez tricków z JS.
Po drugie pisałeś, że FF ma problem (IE nie) - wysyła dane mimo użycia 'return false' w zdarzeniu 'onclick' - z tego co widzę nie wysyła; u Ciebie wysyłał prawdopodobnie ze względu na błąd w JS (patrz post heliosa).
Teraz z kolei piszesz, że działanie 'return false' jest be...

Pozdrawiam.

[1]

Kod: Zaznacz cały

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  /* <![CDATA[ */
  function randomize_time(form)
  {
     form.input.value='o_O';
     
     return false;
  }
  /* ]]> */
  </script>
</head>
<body>
<form method="post" action="onclick.xhtml">
<p>
<input type="text" name="input" />
<button type="button" onclick="javascript:randomize_time(this.form);">Czas losowy</button>
<input type="submit" value="wyślij" />
</p>
</form>
<form method="post" action="onclick.xhtml">
<p>
<input type="text" name="input" />
<button onclick="javascript:randomize_time(this.form); return false;">Czas losowy</button>
<input type="submit" value="wyślij" />
</p>
</form>
<form method="post" action="onclick.xhtml">
<p>
<input type="text" name="input" />
<input type="submit" onclick="javascript:randomize_time(this.form); return false;" value="Czas losowy" />
<input type="submit" value="wyślij" />
</p>
</form>
</body>
</html>

[trejder]

No to się teraz pogubiłem. Po pierwsze chciałeś mieć przycisk wewnątrz formularza, który nie będzie wysyłać danych - to już mamy, do tego jest typ "button" zamiast "submit" i działa bez tricków z JS.
Po drugie pisałeś, że FF ma problem (IE nie) - wysyła dane mimo użycia 'return false' w zdarzeniu 'onclick' - z tego co widzę nie wysyła; u Ciebie wysyłał prawdopodobnie ze względu na błąd w JS (patrz post heliosa).
Teraz z kolei piszesz, że działanie 'return false' jest be...

Możliwe, że pogubiłeś się dlatego, iż ja zacząłem mieszać i typowo inżyniersko dociekać. Może niepotrzebnie. Twoje rozwiązanie (z wcześniejszego posta) polegające na ustawieniu <button type="button"> działa i tam powinienem zakończyć. Sorry...

EoT