[js] potrzeba rozbudowy formularz o opcję select

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

[js] potrzeba rozbudowy formularz o opcję select

Post autor: Kiluk »

Witam.
Pisałem jakiś czas temu na forum i uzyskałem pomoc, za co jeszcze raz dziękuję.
Mam ten sam formularz co poprzednio i che go nieco rozbudować.
Siedzę już 2 dni nad tym i nie wiem jak ugryźć temat.

Jest tak.
Mam javascript generyjący przyciski z tematami:

Kod: Zaznacz cały

function createSubject()
{
    var szablontd1  = '<span id="sprb{ID}"><input type="radio" name="radio" value="{VALUE}" id="rb{ID}" onclick="rbClick(this)" /></span>';
    var szablontd2 = '<input type="checkbox" name="czek{ID}" id="cb{ID}" value="{VALUE}" class="hidden" /><button id="bt{ID}" class="topic font11" onclick="return btClick(this)">{VALUE}</button>';
    var endtr   = document.getElementById('aftersubtr');
    var parent  = endtr.parentNode;
    for(var i=0, len=Math.ceil(subjects.length/2); i<len; i++)
    {
        var tr       = document.createElement('tr');
        var td       = document.createElement('td');
        td.className = 'center';
        td.innerHTML = szablontd1.replace(/\{ID\}/g,i+1).replace(/\{VALUE\}/g,subjects[i]);
        tr.appendChild(td);
        var td       = document.createElement('td');
        td.className = 'center'
        td.innerHTML = szablontd2.replace(/\{ID\}/g,i+1).replace(/\{VALUE\}/g,subjects[i]);
        tr.appendChild(td);
        if(subjects[len+i]!==undefined)
        {
            var td       = document.createElement('td');
            td.className = 'center'
            td.innerHTML = szablontd1.replace(/\{ID\}/g,len+i+1).replace(/\{VALUE\}/g,subjects[len+i]);
            tr.appendChild(td);
            var td       = document.createElement('td');
            td.className = 'center'
            td.innerHTML = szablontd2.replace(/\{ID\}/g,len+i+1).replace(/\{VALUE\}/g,subjects[len+i]);
            tr.appendChild(td);
        }
        else
        {
            var td = document.createElement('td');
            td.innerHTML = ' ';
            tr.appendChild(td);
            var td = document.createElement('td');
            td.innerHTML = ' ';
            tr.appendChild(td);
        }
        parent.insertBefore(tr,endtr);
    };
};
Mam też formularz html i odwołanie do ww funkcji - dzięki temu mam buttony.

Kod: Zaznacz cały

        var subjects = [
        'Temat 1',
        'Temat 2',
        'Temat 3',
        'Temat 4',
        'Temat 5',
        'Inne'];

        //check id user is logged
        var logged = readCookie('user');
        if(!logged)
        {
            document.location = 'login.html';
        }

        </script> 
do tego momentu jest OK i wszystko działa.

Chciałbym tez dodać pod buttonami pole "Option". z taką zasadą działania:
Klikam radiobutton przy przycisku "Temat 1"
pojawia mi się pole "Option" z wyborem: Podtemat 1, Podtemat 2, Podtemat 3..............

Jezeli Klikam w radiobutton przy przycisku "Temat 2"
to zmieniają się wartości w polu "Option" na Podtemat 21, Podtemat 22, Podtemat 23.... itd.
aż do Temat 5.

Troche to za duże wyzwanie jak na mnie i nie dam sobie z tym rady, a chciałbym to jak najszybciej uruchomić.

Goraco prosze o pomoc.
Kiluk

PS.
Zmieniłem treść posta bo poradziłem sobie z 1 problemem o którym pisałem. Pozostał ten trudniejszy (dla mnie)
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] potrzeba rozbudowy formularz o opcję select

Post autor: fan_pascala »

Witam,

Obejmę oba problemy (teraz dopiero zauważyłerm rozwiązanie jednego z problemów :) ).

Ten kod trzeba dorzucić na kniec funkcji createSubject():

Kod: Zaznacz cały

	
var tr = document.createElement('tr');
tr.id = 'trInne';
var td = document.createElement('td');
td.innerHTML='<input id="editInne" type="text" disabled><br>';
td.colSpan ="4";
tr.appendChild(td);
parent.appendChild(tr);
Dokleja on do tabelki linię na pole edycyjne przeznaczone dla innych tematów.

Ponizszy kod to obsługa dla zdarzeń onclick radiobuttnów:

Kod: Zaznacz cały

	function rbClick(wsk)
	{
	  var numberTopics = subjects.length;
	  var id = wsk.id.match(/[\d]+$/)[0];
	  var editInne = document.getElementById('editInne')
	  if (id == numberTopics) // Czyli że chodzi tu o "inny temat"
	  {
	    editInne.disabled = false
			
        var trPodtemat = document.getElementById('trPodtemat')
        if (trPodtemat) 
        {
		  var trInne = document.getElementById('trInne');
		  parent = trInne.parentNode;
		  parent.removeChild(trPodtemat)
        }  
	  }
	  else
	  {
	    editInne.disabled = true

		if (!document.getElementById('trPodtemat'))
		{
	      var trInne = document.getElementById('trInne')
		  var parent = trInne.parentNode;	
		  var tr = document.createElement('tr')
		  tr.id = 'trPodtemat'
		  var td = document.createElement('td')
		  td.colSpan = "4"
		  td.id = "tdPodtemat"
		  tr.appendChild(td)
          parent.insertBefore(tr,trInne) 
		}
        var tdPodtemat = document.getElementById('tdPodtemat')
		var select = '<select id="selPodtemat'+id+'">'   		
		for (var n=0; n<subtopics[id].length; n++)
		{
		  select = select + '<option>'+subtopics[id][n]+'</option>'
		}
		select = select + '</select>'
        tdPodtemat.innerHTML = select
	  }
	}
Ona jest odpowiedzialna za włączanie/wyłączanie pola edycyjnego oraz generowanie odpowiedniego selekta z podtematami.

W funkcji rbClick() została użyta tablicami z podtematami:
Najlepiej to wrzucuic na początek skryptu pod tablicę subjects
Przykładowa tablica z podtematami:

Kod: Zaznacz cały

var subtopics = new Array()
    subtopics[1] = new Array("podtemat1","podtemat2","podtemat3","podtemat4","podtemat5")		
    subtopics[2] = new Array("podtemat6","podtemat7")
    subtopics[3] = new Array("podtemat8","podtemat9","podtemat10")		
    subtopics[4] = new Array("podtemat11","podtemat12","podtemat13","podtemat14","podtemat15","podtemat16")		
    subtopics[5] = new Array("podtemat17")
PS. W sumie nie do końca zrozumiałem istoty tych podtematów, więc nie wiem czy o to dokładnie chodziło.
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

re

Post autor: Kiluk »

Nie wiem czy o to mi chodziło, bo nie mam jak w tej chwili sprawdzić..

Chodzi o takie coś.
Mam tematy (główne) działające na zasadzie przycisku i radiobuttona (radiobutton zaznacza przycisk na czerwono, żeby było go widać)

Teraz potrzebuję, aby każdy Temat (główny) miał swoje podtematy.

Czyli Klinięcie w radiobutton 1 (Temat 1) powoduje pokazanie listy podtematów w polu select.

Każdy Teamt (główny) ma swoje własne podtematy.

Tu włąnie mam problem, aby po kliknięciu w radiobutton 1 pojawiło się pole select z np 10 podtematami,
Kliknięcie w radiobutton 2 powoduje pojawienia się pola select ze swoimi podtematami, itd

Nie wiem czy jasniej to wytłumaczyłem.
Kiluk

PS. Znalazłem chwilę na sprawdzenie, ale cholera nie wiem, gdzie i jak wkleic Twój kod, tak żeby zadziałał
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] potrzeba rozbudowy formularz o opcję select

Post autor: fan_pascala »

Tutaj możesz to zobaczyć

http://linki.cal.pl/tematy.html

Tablica subtopics pod tablice z tematami subjects, funkcję rbClick choćby pod to, a te linie doklejające to do tabelki na końcu funkcji createSubjects(), zresztą porównaj źródła
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

re

Post autor: Kiluk »

dokładnie to to o co mi chodzi (mowa o podtematach)

tylko dlaczego nie umiem tego użyć ? :)
Kiluk
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

re

Post autor: Kiluk »

Moge Cie prosic - Panie fan_pascala
o zmodyfikowanie swojego kodu tak, aby nie było juz tego pola tekstowego a tylko te podtematy?
Jest to troche skomplikowany kod, a pole tekstowe juz mam działające.
Cokolwiek zmodyfikuję w Twoim kodzie to juz mi nie działa

Kiluk
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] potrzeba rozbudowy formularz o opcję select

Post autor: fan_pascala »

Tak, jest już poprawione.
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

re

Post autor: Kiluk »

Dzieki.
jak tylko ukołysze córę do snu siadam do uzuupełnienia mojego formularza o podtematy.
Oczywiście napisze o rezultatach mojej pracy (z gotowym kodem).
Kiluk
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

RE

Post autor: Kiluk »

Dzieki. działa ale jeszcze mam małą prosbe.

Mam juz funkcje rbClick, która zajmuse sie zmiana koloru przycisku i obramowania radiobuttona na kolor czerwony. wygląda ona tak

Kod: Zaznacz cały

function rbClick(ra)
{
    var id                          = ra.id.substring(2);
    var bt                          = document.getElementById('bt'+id);
    var cb                          = document.getElementById('cb'+id);
    var sp                          = document.getElementById('sprb'+id);
    if(lastbt)
    {
        lastbt.style.backgroundColor    = '';
        lastsp.style.backgroundColor    = '';
        lastbt.style.color              = '';
        lastbt.disabled                 = false;
        lastcb.checked                  = false;
    }
    bt.style.backgroundColor        = '#FF0000';
    sp.style.backgroundColor        = '#FF0000';
    bt.style.color                  = '#55CC55';
    cb.checked                      = true
    bt.disabled                     = true;
    lastbt                          = bt;
    lastcb                          = cb;
    lastsp                          = sp;
    startTimer();
}
Jak moge go połączyc z Twoim kodem czyli:

Kod: Zaznacz cały

	function rbClick(wsk)
	{
	  var numberTopics = subjects.length;
	  var id = wsk.id.match(/[\d]+$/)[0];
	  if (id == numberTopics) // Czyli że chodzi tu o "inny temat"
	  {
			
        var trPodtemat = document.getElementById('trPodtemat')
        if (trPodtemat) 
        {
		  var tr = document.getElementById('aftersubtr');
		  parent = tr.parentNode;
		  parent.removeChild(trPodtemat)
        }  
	  }
	  else
	  {

		if (!document.getElementById('trPodtemat'))
		{
		  var parent = document.getElementById('aftersubtr').parentNode;	
		  var tr = document.createElement('tr')
		  tr.id = 'trPodtemat'
		  var td = document.createElement('td')
		  td.colSpan = "4"
		  td.id = "tdPodtemat"
		  tr.appendChild(td)
          parent.appendChild(tr) 
		}
        var tdPodtemat = document.getElementById('tdPodtemat')
		var select = '<select id="selPodtemat'+id+'">'   		
		for (var n=0; n<subtopics[id].length; n++)
		{
		  select = select + '<option>'+subtopics[id][n]+'</option>'
		}
		select = select + '</select>'
        tdPodtemat.innerHTML = select
	  }
	}
Czyli, żeby działanie było tak jak w twoim (tworzenie podtematów) i zachowane kolorowanie radiobuttona i buttona na kolor czerwony.
Bardzo mi na tym zalezy)

Kiluk
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] potrzeba rozbudowy formularz o opcję select

Post autor: fan_pascala »

Kod: Zaznacz cały

	function rbClick(wsk)
	{
	  var numberTopics = subjects.length;
	  var id = wsk.id.match(/[\d]+$/)[0];
	  var bt = document.getElementById('bt'+id);
      var cb = document.getElementById('cb'+id);
      var sp = document.getElementById('sprb'+id);	  
	  if (lastbt)
	  {
        lastbt.style.backgroundColor    = '';
        lastsp.style.backgroundColor    = '';
        lastbt.style.color              = '';
        lastbt.disabled                 = false;
        lastcb.checked                  = false;	  
	  }	
      bt.style.backgroundColor        = '#FF0000';
      sp.style.backgroundColor        = '#FF0000';
      bt.style.color                  = '#55CC55';
      cb.checked                      = true
      bt.disabled                     = true;
      lastbt                          = bt;
      lastcb                          = cb;
      lastsp                          = sp;	  
      startTimer(); 
	  if (id == numberTopics) // Czyli że chodzi tu o "inny temat"
	  {
        var trPodtemat = document.getElementById('trPodtemat')
        if (trPodtemat) 
        {
		  var tr = document.getElementById('aftersubtr');
		  parent = tr.parentNode;
		  parent.removeChild(trPodtemat)
        }  
	  }
	  else
	  {
		if (!document.getElementById('trPodtemat'))
		{
		  var parent = document.getElementById('aftersubtr').parentNode;	
		  var tr = document.createElement('tr')
		  tr.id = 'trPodtemat'
		  var td = document.createElement('td')
		  td.colSpan = "4"
		  td.id = "tdPodtemat"
		  tr.appendChild(td)
          parent.appendChild(tr) 
		}
        var tdPodtemat = document.getElementById('tdPodtemat')
		var select = '<select id="selPodtemat'+id+'">'   		
		for (var n=0; n<subtopics[id].length; n++)
		{
		  select = select + '<option>'+subtopics[id][n]+'</option>'
		}
		select = select + '</select>'
        tdPodtemat.innerHTML = select
	  }
	}
Gdyby coś było nie tak niech Pan pisze.
Ostatnio zmieniony wt wrz 04, 2007 10:09 pm przez fan_pascala, łącznie zmieniany 7 razy.
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] potrzeba rozbudowy formularz o opcję select

Post autor: fan_pascala »

Do czego służy startTimer() ?

PS. Jeśli Panu będzie działał kod powyżej, nie muszę znać działania tej funkcji :wink:
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

re

Post autor: Kiluk »

FtartTimer słuzy do startu stopera umieszczonego w formularzu

Na pierwszy rzut oka wydaje sie, że wszystko działa jak nalezy (posiadze nad testami około 12.00)

Zastanawai mnie jak nazywa sie pole z podtematami.
pytam, bo musze wysłac jego zawrtość wraz z inymi danymi z formularza do pliku csv za pomocą PHP.
Odbywa się to za pomocą funkcji $_POST['radio'].';'. (gdzie "radio" to nazwa jednego z radiobuttonów)

Kiluk
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] potrzeba rozbudowy formularz o opcję select

Post autor: fan_pascala »

Witam:

selPodtemat+idTeamtu

czyli np. selPodtemat1, selPodtemat3......
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

re

Post autor: Kiluk »

Może powinien to byc dział PHP ale temat formularza jest tu.

Wracając do nazewnictwa pola select z podtematami.
mam php wysyłający do pliku csv

Kod: Zaznacz cały

$dane = $_POST['pracownik'].'#'.$_POST['radio'].'#'.$_POST['czek1'].'#'.$_POST['czek2'].'#'.$_POST['czek3'].'#'.
$_POST['czek4'].'#'.$_POST['czek5'].'#'.$_POST['czek6'].'#'.$_POST['czek7'].'#'.$_POST['czek8'].'#'.
$_POST['czek9'].'#'.$_POST['inne'].'#'.$_POST['sec'].'#'.$_POST['min'].'#'.$_POST['date'].'#'.$_POST['time']; 
$dane=mb_convert_encoding($dane,"ISO-8859-2", "UTF-8");
!$plik = @fopen('./plik.csv', 'a+');  
!fwrite($plik,$dane."\r\n");  
!fclose($plik);  
ichciałbym daną z pola select (podtemat) wysłać do csv zaraz po : $_POST['radio']
Optymalnie, żeby to pole miało jakąś nazwę bo wysyłanie byłoby proste.

a teraz co wpisać w moim przypadku. ?
Kiluk
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] potrzeba rozbudowy formularz o opcję select

Post autor: fan_pascala »

Witam, teraz już chyba dobrze rozumię.
Niestety poprzednio wprowadziłem Pana w błąd z nazwą pola
bo ten select wogóle nie został nazwany, za co przepraszam.
Z pośpiechu podałem nazwę z "id".

Należy zmodyfikować linijkę (rbClick())

var select = '<select id="selPodtemat'+id+'">'

na

var select = '<select name="podtemat">'

Po wysłaniu formularza w $_POST['podtemat']
będzie dokładnie to co zostanie zaznaczone (np. 'podtemat12').

Kod: Zaznacz cały

$dane = $_POST['pracownik'].'#'.$_POST['radio'].'#'.$_POST['podtemat'].'#'.$_POST['czek1'].'#'.$_POST['czek2'].'#'.$_POST['czek3'].'#'.
$_POST['czek4'].'#'.$_POST['czek5'].'#'.$_POST['czek6'].'#'.$_POST['czek7'].'#'.$_POST['czek8'].'#'.
$_POST['czek9'].'#'.$_POST['inne'].'#'.$_POST['sec'].'#'.$_POST['min'].'#'.$_POST['date'].'#'.$_POST['time'];
$dane=mb_convert_encoding($dane,"ISO-8859-2", "UTF-8");
!$plik = @fopen('./plik.csv', 'a+'); 
!fwrite($plik,$dane."\r\n"); 
!fclose($plik); 
ODPOWIEDZ