Problem z skryptem JavaScript

Wszystko związane ze skryptami JS, DHTML itd.
peja1990
Posty: 3
Rejestracja: 04 gru 2010, 12:11:17
Płeć: Niewybrana
User Agent: Chrome Windows 1280x1024

Problem z skryptem JavaScript

Post autor: peja1990 »

Witam.
Mam problem ze skryptem w technologii JavaScript.
A mianowicie chodzi mi o to, że mam skrypt działający poprawnie, ale jeżeli użyję opcji CHECKBOX'a to wysyła mi do bazy MySQL (bez znaczenia co zaznaczę), wysyła wartosc pierwszej opcji "value", a chcę aby wysyłało wszystkie, które zaznaczę. :cry:

Oto skrypt:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <script src="../zamowienie/jquery-latest.js"></script>

<style type="text/css">
.tick {
   vertical-align: middle;
   margin: -2px 6px 0px 0px;
   padding: 0;
}

.error {
   vertical-align: middle;
   margin: -2px 6px 0px 0px;
   padding: 0;
}

.info {
   margin: 0;
   padding: 0px 0px 0px 13px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    $("form#submit").submit(function() {
        // Przechwytujemy wartości z formularza i przesyłamy je do pliku insert.php
        var imie = $('input[name=imie]');
        var nazwisko = $('input[name=nazwisko]');
        var nazwa_firmy = $('input[name=nazwa_firmy]');
        var email = $('input[name=email]');
        var telefon = $('input[name=telefon]');
        var nazwa_serwisu = $('input[name=nazwa_serwisu]');
        var tematyka = $('input[name=tematyka]');
        var kolorystyka = $('input[name=kolorystyka]');
        var czas_na_realizacje = $('input[name=czas_na_realizacje]');
        var platnosc = $('input[name=platnosc]');
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(imie.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(nazwisko.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(email.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(telefon.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(nazwa_serwisu.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(tematyka.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(czas_na_realizacje.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        // Jeżeli pole jest puste wyświetlamy błąd i nie dodajemy rekordu
        if(platnosc.val() == "") {
            $('div.blad').fadeIn(400);
            // Usuwamy wiadomość o błędzie po 4 sekundach
            setTimeout(function(){ $("div.blad").fadeOut(400) }, 4000);
            return false;
        }
        
        var data = 'imie=' + imie.val() + '&nazwisko=' + nazwisko.val() + '&nazwa_firmy=' + nazwa_firmy.val() + '&email=' + email.val() + '&telefon=' + telefon.val() + '&nazwa_serwisu=' + nazwa_serwisu.val() + '&tematyka=' + tematyka.val() + '&kolorystyka=' + kolorystyka.val() + '&czas_na_realizacje=' + czas_na_realizacje.val() + '&platnosc=' + platnosc.val();

        $.ajax({
            type: "POST",
            url: "zamowienie/insert.php",
            data: data,
            success: function(){
                // Usuwamy wpisane dane
                $('#imie').val('');
                $('#nazwisko').val('');
                $('#nazwa_firmy').val('');
                $('#email').val('');
                $('#telefon').val('');
                $('#nazwa_serwisu').val('');
                $('#tematyka').val('');
                $('#kolorystyka').val('');
                $('#czas_na_realizacje').val('');
                $('#platnosc').val('');
                // Wyświetlamy wiadomość o poprawnym dodaniu użytkownika    
                $('div.dodano').fadeIn(400);
                // Usuwamy wiadomość o poprawnym dodaniu użytkownika po 4 sekundach
                setTimeout(function(){ $("div.dodano").fadeOut(400) }, 4000);
            }
            
        });
        return false;
    });
});
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="250" border="0" cellpadding="0" cellspacing="0" align="left">
    <tr>
        <td>
<div id="content">
<form id="submit" method="post" name="submit" action="">
            <fieldset style="border: 0px;">

                <label for="imie">Imi&#281;:</label>
                <br />
                <input type="text" name="imie" id="imie" size="20" />
                <br />
                <label for="nazwisko">Nazwisko:</label>
                <br />
                <input type="text" name="nazwisko" id="nazwisko" size="20" />
                <br />
                <label for="nazwa_firmy">Nazwa firmy:</label>
                <br />
                <input type="text" name="nazwa_firmy" id="nazwa_firmy" size="20" />
                <br />
                <label for="email">Adres e-Mail:</label>
                <br />
                <input type="text" name="email" id="email" size="20" />
                <br />
                <label for="telefon">Telefon:</label>
                <br />
                <input type="text" name="telefon" id="telefon" value="+48." size="20" />
                <br />
                <label for="nazwa_serwisu">Nazwa serwisu:</label>
                <br />
                <input type="text" name="nazwa_serwisu" id="nazwa_serwisu" size="20" />
                <br />
                <label for="tematyka">Tematyka:</label>
                <br />
                <input type="text" name="tematyka" id="tematyka" size="20" />
                <br />
                <label for="kolorystyka">Kolorystyka:</label>
                <br />
                <input type="checkbox" value="niebieski" name="kolorystyka" /> niebieski<br />
                <input type="checkbox" value="czerwony" name="kolorystyka" /> czerwony<br />
                <input type="checkbox" value="zielony" name="kolorystyka" /> zielony<br />
                <input type="checkbox" value="pomarancz" name="kolorystyka" /> pomarańcz
                <br />
                <label for="czas_na_realizacje">Czas na realizacj&#281;:</label>
                <br />
                <input type="text" name="czas_na_realizacje" id="czas_na_realizacje" size="20" />
                <br />
                <label for="platnosc">P&#322;atno&#347;&#263;:</label>
                <br />
                <input type="text" name="platnosc" id="platnosc" size="20" />

                <p align="right" style="padding-right: 10px;"><button type="submit" id="submit" class="dodaj_zlecenie">&nbsp;</button></p>
            </fieldset>
</form>

<div class="dodano" style="display:none;">
<img class="tick" src="zamowienie/tick.png" alt="" />Zam&#243;wienie zosta&#322;o dodane do naszej bazy danych
</div>
<div class="blad" style="display:none;">
<img class="error" src="zamowienie/error.png" alt="" />Uzupe&#322;nij pola w formularzu!
</div>        
</div>
        </td>
    </tr>
</table>

</body>
</html>
Bardzo proszę o pomoc. :cry:
Będę niezmiernie wdzięczny.
kryzz
Posty: 438
Rejestracja: 26 sty 2008, 09:05:13
Płeć: Niewybrana
User Agent: Firefox Windows 1600x1200

Re: Problem z skryptem JavaScript

Post autor: kryzz »

Problem leży w dwóch miejscach:
1. pobieranie przez $('input[name=kolorystyka]').val(); zwróci wartość val() pierwszego elementu z tablicy, a masz kilka inputów.
2. checkbox'y z tą samą nazwą powinny być zrobione jako tablica "name=kolorystyka[]"

Zainteresuj się http://jquery.malsup.com/form/

Proszę nie wklejaj tak dużo kodu na forum, są serwisy które pomagają wrzucić kod.
http://www.nopaste.pl/Home
http://www.wklej.eu/
http://www.copypastecode.com/
i dużo więcej.
peja1990
Posty: 3
Rejestracja: 04 gru 2010, 12:11:17
Płeć: Niewybrana
User Agent: Opera Mini mobile 298x240

Re: Problem z skryptem JavaScript

Post autor: peja1990 »

sranie w banie a nie kolorystyka[] ;] wszyscy chuja wiecie tylko piszecie pierdoly...
kryzz
Posty: 438
Rejestracja: 26 sty 2008, 09:05:13
Płeć: Niewybrana
User Agent: Firefox Windows 1600x1200

Re: Problem z skryptem JavaScript

Post autor: kryzz »

Chętnie przeczytam Twoje rozwiązanie.
peja1990
Posty: 3
Rejestracja: 04 gru 2010, 12:11:17
Płeć: Niewybrana
User Agent: Chrome Windows 1280x1024

Re: Problem z skryptem JavaScript

Post autor: peja1990 »

Kod: Zaznacz cały

$.each(kolorystyka, function(i, val) {
            if(val.checked) data = data + '&kolorystyka[]=' + val.value;
        }); 

Kod: Zaznacz cały

var kolorystyka = $('input[name=kolorystyka]');
                for(var i = 0; i < kolorystyka.length; i++){
                    kolorystyka[i].checked = false;
                } 

Kod: Zaznacz cały

<input type="checkbox" value="czerwony" name="kolorystyka" /> czerwony />
<input type="checkbox" value="czarny" name="kolorystyka" /> czarny />
<input type="checkbox" value="bialy" name="kolorystyka" /> bialy /> 

Kod: Zaznacz cały

$kolorystyka = isset($_POST['kolorystyka'])?$_POST['kolorystyka']:$_GET['kolorystyka']; 

Kod: Zaznacz cały

$kolor = htmlspecialchars(trim($kolor));
   $dodaj  = "INSERT INTO baza (kolorystyka) VALUES ('".implode(' ',$kolorystyka)."')"; 
;];];]
kryzz
Posty: 438
Rejestracja: 26 sty 2008, 09:05:13
Płeć: Niewybrana
User Agent: Firefox Windows 1600x1200

Re: Problem z skryptem JavaScript

Post autor: kryzz »

Jednak korzystasz z moich uwag.
ODPOWIEDZ