[JavaScript][HTML]Js, dodawanie z formularzy, Proste (niedziałające) ćwiczenie :( Opcje

[inspired]

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ę (IMG:style_emoticons/default/smile.gif)

POZDRAWIAM Inspired

[IProSoft]

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

Ten post edytował IProSoft 30.05.2012, 15:04:17

[skowron-line]

[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 (IMG:style_emoticons/default/smile.gif)

Ten post edytował skowron-line 30.05.2012, 15:06:01

[IProSoft]

Edit:
@IProSoft buttonem się nie wysyła formularzy (IMG:style_emoticons/default/smile.gif)

Wysłać można nawet span'em, zależy od inwencji (IMG:style_emoticons/default/smile.gif)
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ę (IMG:style_emoticons/default/smile.gif)

[kamil4u]

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".

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

Z tym też jest różnie (IMG:style_emoticons/default/smile.gif) 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:

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 ) (IMG:style_emoticons/default/smile.gif)

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
-

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

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

Pozdrawiam

Ten post edytował kamil4u 30.05.2012, 15:55:07

[inspired]

A mógł by mi ktoś wytłumaczyć dlaczego to pierwsze niedziała a to drugie tak? (IMG:style_emoticons/default/wink.gif)

CODE

<!--pierwsze-->
<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>

<!--drugie-->
<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>

Ten post edytował inspired 30.05.2012, 17:19:08

[kamil4u]

Przeczytaj jeszcze raz mój post:

- 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ę