[AJAX][PHP]Wyświetlenie wybranej wartości z select Opcje

[wojciechu]

Witam,

Chciałem wykorzystać następujący kod ze strony:

[PHP] pobierz, plaintext 
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
 
<select id="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>
 
<script>
$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark"); */
</script>
[PHP] pobierz, plaintext 

jednak napotkałem na problem - chciałbym pobrać wartości wybranych opcji i wyświetlić je jako echo, a potem POSTem przesłać do bazy. Prosiłbym o pomoc jaki kod stworzyć, żeby gdzieś na stronie wyświetlić wartości z list.

Próbowałem poniższego, ale nie działa...

[PHP] pobierz, plaintext 
<?php
 
echo 'Wybrana wartość '.$_GET['mark'];
 
?>
[PHP] pobierz, plaintext 

[grzes999]

Gdzie chcesz wyświetlić te dane po przesłaniu formularz po wybraniu opcji??
I chcesz przesłać formularz normalnie czy bez przeładowywania strony??

[wojciechu]

Chcę wyświetlić tekst w dowolnym miejscu na bieżącej stronie, żeby zmieniał się zależnie od wybranej opcji z select'a. Wysłanie danych już dowolnie

Pomożesz jakoś? (IMG:style_emoticons/default/smile.gif)

[mmmmmmm]

Przy selectach brak "name", przez które się później do nich odwołujesz... No i oczywiście nie są w form z method=GET

[wojciechu]

Zamieniłem id na name i nadal nie działa.

O co chodzi Tobie w poniższym zdaniu? Jak mam zmienić swój obecny kod jeszcze?

No i oczywiście nie są w form z method=GET

[b4rt3kk]

[HTML] pobierz, plaintext 
$(function() {
  $('select').change(function() {
    value = $(this).val();
    alert(value);
  });
});
[HTML] pobierz, plaintext 

[wojciechu]

OK, teraz mi wyświetla się okienko z informacją jaką wartość z selecta wybrałem (dla obu selectów).

Tylko to nie wyjaśnia problemu jaki opisałem - chciałem, żeby na stronie wyświetlił się tekst, który będzie pokazywał tylko wartości wybierane dla selecta 'mark'

Pomóżcie proszę, czuję, że jesteśmy blisko (IMG:style_emoticons/default/smile.gif)

Poniżej cały obecny kod:

[PHP] pobierz, plaintext 
<select name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
 
<select name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>
 
<script type="text/javascript" charset="utf-8">
          $(function(){
              $("#series").chained("#mark"); 
          });
 
    $(function() {
    $('select').change(function() {
    value = $(this).val();
    alert(value);
    });
    });
</script>
 
 
 
    <?php
 
    echo 'Wybrana wartość '.$_GET['mark'];
 
    ?>
[PHP] pobierz, plaintext 

[b4rt3kk]

Do tego nie potrzebny jest php, co więcej zmienna typu GET. Wystarczy HTML.

Dodaj pod selectami:

[HTML] pobierz, plaintext 
<p class="message"></p>
[HTML] pobierz, plaintext 

oraz lekko zmodyfikuj funkcję, którą podałem.

[HTML] pobierz, plaintext 
    $(function() {
    $('select').change(function() {
    value = $(this).val();
    $('.message').text(value);
    });
    });
[HTML] pobierz, plaintext 

[wojciechu]

Kurcze, już tak blisko... (IMG:style_emoticons/default/smile.gif)

Tylko jak pisałem wcześniej, zależało mi na wyświetleniu na stronie napisu, tylko dla jednego selecta (mark), a nie dla ostatniego wybranego (tak jak jest w kodzie, który mi podałeś).

Kolejną rzeczą byłoby jak do bazy sql przesłać informację do danego pola, jaka opcja select została wybrana dla 'mark' i 'series' ...

[b4rt3kk]

[HTML] pobierz, plaintext 
    $(function() {
    $('select[name=mark]').change(function() {
    value = $(this).val();
    $('.message').text(value);
    });
    });
[HTML] pobierz, plaintext 

A to jak już zapiszesz to w bazie danych to kwestia wyboru, albo opakujesz całość w <form>...</form>, albo prześlesz ajaxem. Chyba wiesz jak wysłać formularz?

[wojciechu]

Dzięki za pomoc (IMG:style_emoticons/default/smile.gif)

Ostatnie pytanie: A jak wynik Twojej funkcji zapisać jako zmienną, żeby wrzucić przez polecenie INSERT INTO do bazy sql?

[b4rt3kk]

To zależy, czy ma zapisywać w momencie wyboru pola select, czy po przesłaniu formularza. W pierwszym przypadku, ajax+php, w drugim czysty php wystarczy.

[wojciechu]

Pytanie: jak będzie wyglądał kod, który pozwoli mi zamienić opisywaną przez Ciebie funkcję wyświetlania wartości danego pola select na zmienną, którą umieszczę w formularzu do przesłania danych do tabeli sql? Czyli: wybiorę sobie odpowiednie pozycje z dwóch list i po naciśnięciu przycisku ma mi przesłać do bazy do dwóch pól informacje o wybranych wartościach selectów.

[b4rt3kk]

Funkcji nie musisz modyfikować. Dodaj ramy formularza do swojego kodu HTML.

[HTML] pobierz, plaintext 
<form method="POST" action="wyslij.php">
<select name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
 
<select name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>
<input type="submit" />
</form>
[HTML] pobierz, plaintext 

Plik wynikowy wyslij.php:

[PHP] pobierz, plaintext 
print_r($_POST);
[PHP] pobierz, plaintext 

[wojciechu]

Czemu uparcie idziesz w takim kierunku? (IMG:style_emoticons/default/sad.gif)

No bo niby jak w przedstawiony przez Ciebie sposób mam wysłać do bazy sql informacje w postaci

[SQL] pobierz, plaintext 
INSERT INTO jakaś-tabela VALUES (wybrany SELECT 1, wybrany SELECT 2) 
[SQL] pobierz, plaintext 

?

[mmmmmmm]

[SQL] pobierz, plaintext 
INSERT INTO `jakas tabela` SELECT '{$_POST['mark']}', '{$_POST['series']}'
[SQL] pobierz, plaintext 

[wojciechu]

Ok, mój kod wygląda tak i nie działa.... (IMG:style_emoticons/default/sad.gif)

pierwszy plik

[PHP] pobierz, plaintext 
<p class="message"></p>
 
<script type="text/javascript" charset="utf-8">
          $(function(){
              $("#series").chained("#mark"); 
          });
 
     $(function() {
    $('select[name=mark]').change(function() {
    value = $(this).val();
    $('.message').text(value);
    });
    });
</script>
 
 
<form action="form.php" method="post">
<input type="submit" value="dodaj" />
 
<select name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
 
<select name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>
 
</form> 
[PHP] pobierz, plaintext 

form.php

[PHP] pobierz, plaintext 
 <?php
$mark = $_POST['mark'];
$series = $_POST['series'];
 
if($mark and $series) {
 
    $connection = @mysql_connect('xxx', 'xxx', 'xxx')
    or die('Brak połączenia z serwerem MySQL');
    $db = @mysql_select_db('xxx', $connection)
    or die('Nie mogę połączyć się z bazą danych');
 
 
    $ins = @mysql_query("INSERT INTO xxx VALUES (NULL, '$mark', '$series')");
 
    if($ins) echo "Rekord został dodany poprawnie";
    else echo "Błąd nie udało się dodać nowego rekordu";
 
    mysql_close($connection);
}
 
?> 
[PHP] pobierz, plaintext 

Ten post edytował wojciechu 19.09.2012, 09:57:45

[b4rt3kk]

Co niby ma robić ten warunek?

[PHP] pobierz, plaintext 
if($mark and $series)
[PHP] pobierz, plaintext 

Sprawdzasz czy $mark i $series zwraca true?

[PHP] pobierz, plaintext 
if (isset($mark) AND isset($series))
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
if (!empty($mark) AND !empty($series))
[PHP] pobierz, plaintext 

Ten post edytował b4rt3kk 19.09.2012, 10:48:38

[terabit]

Witam,

znalazlem ten sam kod, ktory jest umieszczony w pierwszym poscie, jednak staram sie go przerobic tak by dzialal tylko z "radio".

Chodzi mi o coś takiego:

[HTML] pobierz, plaintext 
DATY:
<input type="radio" name="data1" value="01.10" />
<input type="radio" name="data2" value="02.10" />
<input type="radio" name="data3" value="03.10" />
 
 
DOSTEPNE GODZINY:
<input type="radio" name="g" value="13:20 />
<input type="radio" name="g" value="14:30" /> <----- maja sie wyswietlac gdy pierwszy radio (data1) jest zaznaczony
<input type="radio" name="g" value="15:40" />
 
<input type="radio" name="g" value="15:20 />
<input type="radio" name="g" value="16:30" /> <----- maja sie wyswietlac gdy drugi radio (data2) jest zaznaczony
<input type="radio" name="g" value="17:40" />
 
<input type="radio" name="g" value="13:20 />
<input type="radio" name="g" value="14:30" /> <---- itd.
<input type="radio" name="g" value="15:40" />
 
[HTML] pobierz, plaintext 

czyli generalnie ma to działać identycznie jak omawiany skrypt, jednynie zamiast select/option ma być radio.
Próbowałem przerobić skrypt http://www.appelsiini.net/download/jquery.chained.js jednak z JS nie jestem zbyt dobry.

Ma ktoś pomysł lub wskazówki jak to przerobić?

Z góry dzięki za pomoc

Pozdrawiam

[wojciechu]

Dodaj do powiązanego wyboru 'class' i zmień układ na taki jak w poście #7, żeby selecty miały swój 'name'.

[terabit]

@wojciechu, nie do końca rozumiem jak mam to zrobić, w jquery.chained.js mam wprowadzic jakies zmiany?

"jak w poście #7, żeby selecty miały swój 'name'."

tylko ze u mnie nie bedzie zadnego pola select.

---------

mam coś takiego i niestety nie działa:

[HTML] pobierz, plaintext 
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
 
 
<script type="text/javascript" charset="utf-8">
$(function(){
	$("#series").chained("#mark");  
	$("#model").chained("#series");
});
</script>
 
</head>
<body>
 
 
<div id="mark">
	<input type="radio" name="g" value="" /> nic
	<input type="radio" name="g" value="bmw" /> bmw
	<input type="radio" name="g" value="audi" /> audi
</div>
<div id="series">
	<input type="radio" name="g" class="bmw" value="" /> seria 3
	<input type="radio" name="g" class="bmw" value="" /> seria 4
	<input type="radio" name="g" class="audi" value="" /> a3
	<input type="radio" name="g" class="audi" value="" /> a4
</div>
 
 
</body>
</html>
[HTML] pobierz, plaintext 

pilk jquery.chained.js

Ten post edytował terabit 26.09.2012, 10:20:54

[wojciechu]

Heh, a czytałeś stronę: http://www.appelsiini.net/projects/chained ?

Już w pierwszym zdaniu jest mowa, że to dot. selectów:
Chained is simple jQuery plugin for chained selects

[terabit]

wiem, dlatego pytalem czy da sie to przerobic/dostosowac do "radio".
Bo gotowego niestety nie moge znaleźć dlatego staram się ten jakoś przerobić.

[wojciechu]

Zadaj sobie pytanie po co przerabiać, skoro masz gotowca na rozwijane listy.... butem też można gwoździe wbijać, ale lepiej młotkiem (IMG:style_emoticons/default/smile.gif)

[terabit]

wiem, jednak w moim przypadku przejrzyściej będzie wyświetlać całą liste, niż listę rozwijaną. Nie ma rzeczy niemożliwych dlatego myślę że jakoś da rade to przerobić, masz jakieś pomysły? (IMG:style_emoticons/default/smile.gif)
Bo ja już całe Google przekopałem i nic sensownego nie znalazłem.

Oczywiście nie oczekuję gotowca, jedynie porady jak się za to zabrać żeby zaczęło działać (IMG:style_emoticons/default/smile.gif)