Forum PHP.pl > [JavaScript][HTML]Js, dodawanie z formularzy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML]Js, dodawanie z formularzy

inspired

30.05.2012, 14:58:15

Witam, chciałem zrobić sobie ćwiczenie z JavaScripts połączonego z formularzami. Ćwiczenie miało polegać na stworzeniu polecenia, które doda liczby, które użytkownik wpisał do dwóch formularzy, po tym klika button i pojawia się alert. Niestety to nie działa. Oto kod:
Witam, chciałem zrobić sobie prosty przykład, który by dodawał dwie liczby do siebie, które użytkownik wpisuje fo formularza. Problem jest w tym, że alert nie wyskakuje. Oto kod:

CODE

<form id="licz" name="licz" action=""><div>
<input type="text" name="first" id="first">
<input type="text" name="second" id="second">
<button onclick="return licz()">Dodaj!</button>
</div></form>

<script>
function licz()
{
var first = document.forms['licz'].first.value;
var second = document.forms['licz'].second.value;
var suma;
suma = first + second ;
alert('Wynik' +suma+ "!');
return false;
}
</script>

Dodam, że jestem kompletnie zielony, ponieważ dopiero się uczę

POZDRAWIAM Inspired

IProSoft

30.05.2012, 15:04:06

Nie liczy Ci ponieważ formularz zostaje wysłany, a skrypt nie zdąży się wykonać.

Możesz poczytać o http://api.jquery.com/event.preventDefault/

Lub przenieść:

Kod

<button onclick="licz();return false;">Dodaj!</button>

pod FORM (tak jak napisałem ponieważ w Twoim jest błąd.).

Poza tym masz błędy w JS.
Zainstaluj sobie Firebug

skowron-line

30.05.2012, 15:04:58

[JAVASCRIPT] pobierz, plaintext 
function licz()
{
var first = document.forms['licz'].first.value;
var second = document.forms['licz'].second.value;
var suma;
suma = parseFloat(first) + parseFloat(second); // rzutowanie na liczbe zmienno przecinkową
alert('Wynik' +suma+ "!');
return false;
}
[JAVASCRIPT] pobierz, plaintext

z formularza z pól zawsze pobierane są stringi więc żeby przeprowadzać działania matematyczne trzeba zmienić ich typ na float lub int
parseFloat i parseInt

Jeżeli dalej nie pokaże się alert zobacz do konsoli błędów co pokazuje

Edit:
@IProSoft buttonem się nie wysyła formularzy

IProSoft

30.05.2012, 15:33:33

Cytat(skowron-line @ 30.05.2012, 16:04:58 )

Edit:
@IProSoft buttonem się nie wysyła formularzy

Wysłać można nawet span'em, zależy od inwencji

Tak samo jak cały skrypt powinien być inaczej napisany itp itd ale do takich rzeczy powinien dojśc sam więc podałem mu tylko najprostszą drogę

kamil4u

30.05.2012, 15:54:29

Dodam tylko, że musisz ostrożniej nazywać zmienne, funkcje i atrybuty "id". Część przeglądarek( na pewno IE, inne chyba nie, ale nie pamiętam teraz ) tworzy sobie zmienne globalne oparte na elemencie DOM( zwykły element HTML ), gdy jest nadawane id. Czasami prowadzi to do błędu w postaci: "licz is not a function".

Cytat

@IProSoft buttonem się nie wysyła formularzy smile.gif

Z tym też jest różnie

Generalnie w ogóle nie powinno się korzystać z <button, a <input type="button|submit|itd.">, ale jak jest w dokumentacji w3c button ma 3 różne typy( submit, reset i button ), ale:

Cytat

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

. Tak więc ~skowron-line masz rację( w praktyce ), ale i nie masz racji( w teorii )

Cytat

Wysłać można nawet span'em, zależy od inwencji smile.gif

Chodziło raczej o "normalne wysyłanie", a nie przez JS.

Co do tematu to jeszcze takie podpowiedzi odnośnie kodu:
- używaj funkcje DOM-owskie - getElementById, getElementsByTagName itd. - jest to znacznie wygodniejsze
-

Cytat

alert('Wynik' +suma+ "!');

Nie te cudzysłowów
- używaj konsoli błędów i firebug-a
- korzystaj z rady ~skowron-line

Pozdrawiam

inspired

30.05.2012, 17:15:14

A mógł by mi ktoś wytłumaczyć dlaczego to pierwsze niedziała a to drugie tak?

CODE

<form id="dodaj" action=""><div>
<input type="text" id="pierwszy">
<input type="text" id="drugi">
<button onclick="return ObliczCume()">Do</button>
</div></form>
<script>
function ObliczSume()
{
var first = document.getElementById(dodaj).pierwszy.value;
var second = document.getElementById(dodaj).drugi.value;
var suma= parseInt(first) + parseInt(second) ;
alert(+ suma + '!');
return false;
}
</script>


<form id="elo" action=""><div>
<input type="text" name="pierwsze">
<input type="text" name="drugie">
<button onclick="return witamciebie()">Pozdrów!</button>
</div></form>
<script>
function witamciebie()
{
var firsto = document.forms['elo'].pierwsze.value;
var secondo = document.forms['elo'].drugie.value;
var suma = parseInt(firsto) + parseInt(secondo) ;
alert(' '+ suma +'!');
return false;
}
</script>

kamil4u

30.05.2012, 17:53:42

Przeczytaj jeszcze raz mój post:

Cytat

- używaj konsoli błędów i firebug-a

A konsola błędów mówi... no właśnie sprawdź sam - podpowiem, że masz literówkę

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.