Checkbox, jak wymusić działanie... Opcje

[patigo]

Mam pytanie:
Jak zrobić aby w jakimś formularzu przy zaznaczeniu "czekboxa" pokazać jakiś wynik .np mam formularz, klikam na "czekboxa" i pokazuje mi się rozwinięty formularz z większą ilością możliwości.

Pozdrawiam i z góry dziękuję za odpowiedzi.

[nospor]

Najpierw ukryj coś, a potem to pokaż (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
uzyj
object.style.display="none" - ukrywanie
object.style.display="" - pokazanie

[patigo]

Ale jak tego użyć??

mam <input type="checkbox" name="c_tr" >
i chcem aby po zaznaczeniu załadować dodatkowe opcje w formularzu a po odznaczeniu wrócić do pierwotnej wersji.
gdzie mam wpisać

object.style.display="none" - ukrywanie
object.style.display="" - pokazanie

??Prosszę o pomoc bo się całkowicie gubię...

Może inaczej powiem....Chciałbym aby kliknięcie pola CheckBox wywoływało automatycznie zdarzenie takie jak bym kliknął jednocześnie przycisk "submit"

Ten post edytował patigo 1.03.2005, 09:37:12

[nospor]

Możesz od razu zaladować potrzebne ci dane do formularza, a po wcisnieciu checkoxa je pokazac.

dodatkowe przykladowe dane:

[HTML] pobierz, plaintext 
<input type="text" id="id1" style="display:none" value="test" />
[HTML] pobierz, plaintext 

funkcja do pokazania tego inputa:

[HTML] pobierz, plaintext 
function show()
{
    obj=document.getElementById('id1');
    obj.style.display="";
}
[HTML] pobierz, plaintext 

Klieknięcie na checkbox:

[HTML] pobierz, plaintext 
<input type="checkbox" onclick="show()" />
[HTML] pobierz, plaintext 

Tak by to w skrócie wyglądało.
trzeba by jeszcze dorobić chowanie po ponownym kliknięciu, ale to moglbyś w ramach praktyki sam zrobic

[patigo]

Nie działa:(
Nie wiem co jest grane ale wyświetla mi błąd ze jakiś obiekt nie jest zainicjowany...

A nie da się tego zrobić jakoś za pomocą php??Myślałem może żeby np checkbox był takim buttonem po naciśnięciu wywoływał np stronę index.php ze zmienną która po odczytaniu strony powodowałaby wyświetlenie jakiegoś innego formularza??

[nospor]

Pewnie krzyczy w funkcji show, ze nie ma obj. Pewnie input'a nie masz od id1 lub jest dla niego nie widoczny.Jakbyś rzucił kodem i błędem byłoby milo.

Można oczywiście w php:

[HTML] pobierz, plaintext 
<input type="checkbox" onclick="location.href='tu twoj plik z parameterm'" />
[HTML] pobierz, plaintext 

edit:
lub:

[HTML] pobierz, plaintext 
<input type="checkbox" onclick="submit()" />
[HTML] pobierz, plaintext 

jesli chceckbox jest w formularzu. oczywiscie dobrze by bylo pewnie jakąs zmienna ustawic w formularzu, aby w submit skrypt wiedzial o co chodzi

Ten post edytował nospor 1.03.2005, 10:41:54

[patigo]

Kod

<center>
<script language="JavaScript">function show()
{
obj=document.getElementById('id1');
obj.style.display="";
}
</script>
<table border="0">
<form name="index.php" method="post">
<tr>
    <td colspan="2"><input type="text" name="zapytanie" id="idl" name="zapytanie" style="display:none" value="" /></td>
    <td><input type="submit" name="action" value="Szukaj" /></td>
</tr>

<tr>
    <td colspan="3">Zaawansowane
    <input type="checkbox" onClick="show()" />
</td>
</tr>
</form>
</table>

Tak wygląda mój kod

[nospor]

tak jak myslalem. masz input o id=idl a odwolujesz sie do id1. to jest lekka róznica

[patigo]

Faktycznie ślepy już jestem:)....

Teraz działa tylko mały problem z akcją odwrotną... napisałem coś takiego:

Kod

<center>
<script language="JavaScript">function show()
{
obj=document.getElementById('idl');
obj.style.display="";
}
function show1()
{
obj=document.getElementById('idl');
obj.style.display="none";
}
</script>
<table border="0">
<form name="index.php" method="post">
<tr>
    <td colspan="2"><input type="text" name="zapytanie" id="idl" name="zapytanie" style="display:none" value="" size="40"/></td>
    <td><input type="submit" name="action" value="Wyślij" /></td>
</tr>

<tr>
    <td colspan="3">
    <input type="checkbox" onClick="show()" onBlur="show1()" />
</td>
</tr>

i teraz wykonuje się akcja odwrotna ale nie tak jak bym chciał, tzn. wraca do pozycji pierwotnej jak klikam gdziekolwiek.

[nospor]

lekka modyfikacja funkcji show. Gdy jest zaznaczony checkbox to show. gdy odznaczony to hide. myslalem ze sam do tego dojdziesz.

[HTML] pobierz, plaintext 
function show()
{
obj=document.getElementById('idl');
objCheck=document.getElementById('id twojego checkbox');
if (objCheck.checked)
    obj.style.display="";
else
   obj.style.display="none";
}
[HTML] pobierz, plaintext 

z tym warunkiem to moze byc na adwrót. sprawdz

Ten post edytował nospor 1.03.2005, 12:29:35

[patigo]

Dziękuję ci bardzo.Podobnie myślałem jeżeli chodzi o pętlę ale kompletnie nie znam skladni JavaScript zatem "rzeźbienie" na sucho by mnie tylko zmęczyło:).
mam nadzieję że będę miał kiedyś czas aby uczyć się JS.

Pozdrawiam

[nospor]

psze bardzo. cieszę się że pomogłem (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

[patigo]

Jakaś porażka znowu mi nie chodzi...Myślałem że już ok ale...
jak mam rozumieć tą linijkę:

objCheck=document.getElementById('id twojego checkbox');

zwłaszcza to co jest w nawiasie i co powinienem wstawić do

Kod

<input type="checkbox"  onClick="show()">

Znowu mam info że oczekiwano na obiekt.Proszę pomóż ostatni raz:)

[nospor]

id twojego checkboxa to id jakie nadasz dla checbox czyli
checkbox:

[HTML] pobierz, plaintext 
<input type="checkbox"  id="idC" onClick="show()">
[HTML] pobierz, plaintext 

obj:

[HTML] pobierz, plaintext 
objCheck=document.getElementById('idC');
[HTML] pobierz, plaintext 

[patigo]

Tak też zrobiłem no i.... Właśnie nie działa myślałem że może coś innego ma tam być. oto mój kod:

Kod

<script language="JavaScript">
function show()
{
obj=document.getElementById('idl');
objCheck=document.getElementById('idBox');
if (objCheck.checked)
obj.style.display="";
else
obj.style.display="none";
}
</script>
<table border="0">
<form name="index.php" method="post">
<tr>
   <td colspan="2"><input type="text" name="zapytanie" id="idl" style="display:none" value="" size="40"/></td>
   <td><input type="submit" name="action" value="Szukaj" /></td>
</tr>

<tr>
   <td colspan="3">Sortuj wg&nbsp;<select name="opcja"><option value="data">daty
   <option value="alfa">alfabetycznie</select>&nbsp;zaawansowane
   <input type="checkbox" id="idBox" onClick="show()"  />
</td>
</tr>

Ten post edytował patigo 1.03.2005, 13:43:13

[nospor]

Ale co nie działa? Jakiś komunikat o błędach

edit: u mnie działa. wklepalem ten kod co dales i dziala

Ten post edytował nospor 1.03.2005, 13:53:57

[patigo]

Na pasku przeglądarki że "oczekiwano na obiekt" nie wiem co jest

[nospor]

u mnie działa. wklepalem ten kod co dales i dziala

[patigo]

No w morde jeża....To już przesada za długo siedzę na kompie, za bardzo jestem przemęczony....czas zrobić sobie kilkudniową przerwę chyba:) WSZYSTKO OK (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) Moja wina faktycznie wszystko działa, miałem 2 skrypty o podobnych nazwach i przez przypadek odpalałem ten "zepsuty". Przepraszam za fatygę i jeszcze raz WIELKIE DZIKI

Ten post edytował patigo 1.03.2005, 13:58:47

[hwao]

php pocz -> po stronie przegladarki (js)

[patigo]

hmm?(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) hwao, co masz na myśli??

[Plastek]

Witam, zmodyfikowałem do swoich potrzeb przytoczony wcześniej skrypt, ale nie mogę osiągnąc oczekwanego rezultatu, a mianowicie chodzi mi o to, żeby wykorzystując pola "radio" móc wybierac rozwijac dodatkowe pola "select" w zależności od wybranego pola "radio" W tej chwili działa to tak że po przełączeniu pól "radio" nie znikają pola "select" wcześniej już wybrane oraz przy pierwszym uruchamianiu skryptu nie pojawia mi się pole "select" wybrane przez pole radio checked='checked'

Proszę o pomoc, dzięki

Kod

<script language="JavaScript">
function show()
{
obj=document.getElementById('idRad');
objCheck=document.getElementById('idRadBox');
if (objCheck.checked)
obj.style.display="";
else
obj.style.display="none";
}

function show1()
{
obj=document.getElementById('idPio');
objCheck=document.getElementById('idPioBox');
if (objCheck.checked)
obj.style.display="";
else
obj.style.display="none";
}

function show2()
{
obj=document.getElementById('idTusz');
objCheck=document.getElementById('idTuszBox');
if (objCheck.checked)
obj.style.display="";
else
obj.style.display="none";
}
</script>

[HTML] pobierz, plaintext 
<table border="0">
<tr>
	<td colspan="1">REJON&nbsp;<select name="opcja" id="idRad" style="display:none" >
	<option value="111">Radom
   	<option value="222">Kozienice
	<option value="333">Przysucha</select>
</td>	
</tr>
<tr>
	<td colspan="1">REJON&nbsp;<select name="opcja" id="idPio" style="display:none" >
	<option value="444">Piotrków
   	<option value="555">Opoczno
	<option value="666">Zelów</select>
</td>
<tr>
	<td colspan="1">REJON&nbsp;<select name="opcja" id="idTusz" style="display:none" >
	<option value="777">Tuszyn
   	<option value="888">Łódź
	<option value="999">Bełchatów</select>
</td>
<tr>
 
   <td colspan="3">&nbsp;Centrala
  <input type="radio" id="idRadBox" name='centrala' checked='checked' value='Radom' onClick="show()"  />
  <input type="radio" id="idPioBox" name='centrala' value='Piotrkow' onClick="show1()"  />
  <input type="radio" id="idTuszBox" name='centrala' value='Tuszyn' onClick="show2()"  />
</td>
</tr>
[HTML] pobierz, plaintext 

Prosze uzywac bbcode!!!
poprawiam
---
nospor

[nospor]

[HTML] pobierz, plaintext 
<table border="0">
<tr>
<td colspan="1">REJON&nbsp;<select name="opcja" id="idRad" style="display:" >
<option value="111">Radom
<option value="222">Kozienice
<option value="333">Przysucha</select>
</td> 
</tr>
<tr>
<td colspan="1">REJON&nbsp;<select name="opcja" id="idPio" style="display:none" >
<option value="444">Piotrków
<option value="555">Opoczno
<option value="666">Zelów</select>
</td>
<tr>
<td colspan="1">REJON&nbsp;<select name="opcja" id="idTusz" style="display:none" >
<option value="777">Tuszyn
<option value="888">Łódź
<option value="999">Bełchatów</select>
</td>
<tr>
 
<td colspan="3">&nbsp;Centrala
<input type="radio" id="idRadBox" name='centrala' checked='checked' value='Radom' onClick="show();show1();show2();" />
<input type="radio" id="idPioBox" name='centrala' value='Piotrkow' onClick="show1();show();show2();" />
<input type="radio" id="idTuszBox" name='centrala' value='Tuszyn' onClick="show2();show();show1();" />
</td>
</tr>
</table>
[HTML] pobierz, plaintext 

a przy starcie strony musisz pokazac selecta (usunac display:none) krorego radio jest zaznaczone

[Plastek]

Super, bardzo Ci dziękuje, właśnie o to mi chodziło (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif) Mam jednak problem z wysyłaniem danych z formularza nie ważne które "radio" i "selecta" wybiore zawsze dane są wysyłane z ostatniej funkcji show2() nie wiem co powinienem z tym zrobić

Ten post edytował Plastek 21.11.2005, 11:24:11

[nospor]

dla selectow nadaj inne name, wtedy w poscie bedziesz mial wartosci dla tych name. Radio zostaw bez zmian. w poscie pod nazwą centrala bedziesz mial rozna wartosc w zaleznosci jakie radio wybrales

[Plastek]

Jest szansa zrobić tak, aby wysyłane dane były tylko z jednego selecta ? zależy mi na tym ponieważ w dalszej części skryptu analizowane i wysylane do bazy sa jeszcze inne dane w taki sposób, że wysyłanie danych w tym przypadku ze wzystkich selectów może prowadzić do niepoprawnych wpisów w bazie

[nospor]

Kod

<script language="JavaScript">
function show()
{
obj=document.getElementById('idRad');
objCheck=document.getElementById('idRadBox');
if (objCheck.checked)
{
obj.style.display="";
obj.disabled=false;
}
else
{
obj.style.display="none";
obj.disabled=true;
}
}

function show1()
{
obj=document.getElementById('idPio');
objCheck=document.getElementById('idPioBox');
if (objCheck.checked)
{
obj.style.display="";
obj.disabled=false;
}
else
{
obj.style.display="none";
obj.disabled=true;
}
}

function show2()
{
obj=document.getElementById('idTusz');
objCheck=document.getElementById('idTuszBox');
if (objCheck.checked)
{
obj.style.display="";
obj.disabled=false;
}
else
{
obj.style.display="none";
obj.disabled=true;
}
}
</script>

[HTML] pobierz, plaintext 
<table border="0">
<tr>
<td colspan="1">REJON&nbsp;<select name="opcja" id="idRad" style="display:none" >
<option value="111">Radom
<option value="222">Kozienice
<option value="333">Przysucha</select>
</td> 
</tr>
<tr>
<td colspan="1">REJON&nbsp;<select name="opcja" id="idPio" style="display:none" >
<option value="444">Piotrków
<option value="555">Opoczno
<option value="666">Zelów</select>
</td>
<tr>
<td colspan="1">REJON&nbsp;<select name="opcja" id="idTusz" style="display:none" >
<option value="777">Tuszyn
<option value="888">Łódź
<option value="999">Bełchatów</select>
</td>
<tr>
 
<td colspan="3">&nbsp;Centrala
<input type="radio" id="idRadBox" name='centrala' checked='checked' value='Radom' onClick="show();show1();show2();" />
<input type="radio" id="idPioBox" name='centrala' value='Piotrkow' onClick="show1();show();show2();" />
<input type="radio" id="idTuszBox" name='centrala' value='Tuszyn' onClick="show2();show();show1();" />
</td>
</tr>
</table>
[HTML] pobierz, plaintext 

i na koniec po zaladowaniu wykonaj taki skrypcik:

Kod

<script language="JavaScript">
show();
show1();
show2();
</script>

[Plastek]

Teraz super mi to działa (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Dzięki (IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif) !! Mam jeszcze pytanko , czy mozna pobierać pola wyboru selecta np. z tabeli bazy danych (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

[nospor]

uzyj wyszukiwarki, wrrrr
np. tu
http://forum.php.pl/index.php?showtopic=37252

[escaflowne]

Jeżeli chcesz ukrywać/pokazywać większą ilość elementów, zamknij je w <div></div>, np.

[HTML] pobierz, plaintext 
<div id="obszar1">
<input type="text" name="pole1"><br>
<input type="text" name="pole2"><br>
</div>
[HTML] pobierz, plaintext 

[nospor]

@escaflowne ale w tym przypadku to nie ma sensu bo dla każdego radio jest tylko po jednym selectie. A nie będzie przeciez robil po kilka kombinacji divów w selectie by zamykac obszary dla roznych radio

[Dandelion]

a jezeli zamiast

[HTML] pobierz, plaintext 
<input type="checkbox" id="idBox" onClick="show()" />
[HTML] pobierz, plaintext 

chcialbym uzyc cos w stylu

[HTML] pobierz, plaintext 
<input type="image"  id="idBox" onClick="show()">Szukaj</BUTTON>
[HTML] pobierz, plaintext 

to jak musze zmodyfikowac kod js


I jak zrobic aby po kliknieciu w button pokazalo mi sie np 2 nowe pola zamiast jednego jak w poprzednich przykladach


chce zastosowac <input type="image" ... bo moge tam ustawic tlo obrazkowe. Po kliknieciu na button pod spodem ma wyskakiwac jedno pole textarea oraz pole <input type="submit"

probowalem narazie dojsc do tego zeby wyskakiwalo same pole textarea jednka nie udalo mi sie

[HTML] pobierz, plaintext 
<script language="JavaScript">
function show()
{
obj=document.getElementById('idl');
objCheck=document.getElementById('idBox');
if (objCheck.checked)
obj.style.display="";
else
obj.style.display="none";
}
</script>
 
<div id="logo">1</div> 
 
<div id="menu">
      <form method="POST" style="style.css" class="formularz">
             <input type="image" VALUE="pokaz" src="images/podstawowa2.gif" id="idBox" onClick="show()">
             <input type="image" VALUE="szukaj" src="images/podstawowa2.gif">
             
      </form>
      
 
<div id="menu2">
      <form action="dodaj" method="POST" style="style.css" class="formularz2">
 
<div id="menu3">
            <p></p>
            <textarea name="dodaj" cols="50" rows="10" id="idl" style="display:none"></textarea>
</div>
            <input type="image" VALUE="wyslij" src="images/dodaj.gif">
      </form>
 
</div>      
</div>
[HTML] pobierz, plaintext 

wydaje mi sie ze problem lezy w tej lini

if (objCheck.checked)

obiekt jest buttonem wiec nie moze byc zaznaczony jak np radio czy checkbox bardzo mozliwe ze sie myle bo to pierwsze moje starcie z java scriptem (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)


Rozwiazanie

poszperalem troche w google i znalazlem opis ukrywania calego diva

Kod

<script language="javascript">
var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
</script>

[HTML] pobierz, plaintext 
<input type="button" VALUE="dodaj" onclick="showhide('menu2');" value="show" class="przycisk">
[HTML] pobierz, plaintext 

button pokazujacy i ukrywajacy diva

konkretny div ktory chcemy ukryc

[HTML] pobierz, plaintext 
<div id="menu2" style="display: none;">
[HTML] pobierz, plaintext 

Ten post edytował Dandelion 16.04.2006, 00:06:43