Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][HTML]Formularz - dostępność drugiego pola zależna od wyboru w pierwszym
Forum PHP.pl > Forum > Przedszkole
XxmanxX
Witam, mam sobie taki kod na formularz (wycialem css i kilka pól)
  1. <form action="ta_sama_strona"method="POST">
  2. <fieldset style="..."><legend>FORMULARZ</legend>
  3. <p>Status:<select name="status" size="1">
  4. <option>
  5. <option>opcja1
  6. <option>opcja2
  7. </select></p>
  8. <p>Service:
  9. <textarea name="service"></textarea></p>
  10. <p><p>Recovery time objective:
  11. <select name="recovery_day" size="1">
  12. <option>
  13. <?php
  14. for($i=1;$i<=31;$i++){
  15. $value = ($i<10)? '0'.$i : $i;
  16. if($value==date('d',$_GET['recovery_time_objective'])) echo"<option selected=selected>".$value;
  17. else echo"<option>".$value;}?>
  18. </select>
  19. <select name="recovery_month" size="1" >
  20. <option>
  21. <?php
  22. for($i=1;$i<=12;$i++){
  23. $value= ($i<10)? '0'.$i : $i;
  24. if($value==date('m',$_GET['recovery_time_objective'])) echo"<option selected=selected>".$value;
  25. else echo"<option>".$value; }?>
  26. </select>
  27. <select name="recovery_year" size="1">
  28. <option><?phpfor($i=2009;$i<=2012;$i++){
  29. if($i==date('Y',$_GET['recovery_time_objective'])) echo"<option selected=selected>".$i;
  30. else echo"<option>".$i;}?></select>
  31. <span>Time:</span>
  32. <select name="recovery_hour" size="1">
  33. <option><?phpfor($i=0;$i<=23;$i++){
  34. $value= ($i<10) ? '0'.$i :$i;
  35. if($value==date('H',$_GET['recovery_time_objective'])) echo"<option selected=selected>".$value;
  36. else echo"<option>".$value;}?>
  37. </select>
  38. <select name="recovery_minut" size="1" >
  39. <option>
  40. <?php
  41. for($i=0;$i<=55;$i=$i+5){
  42. $value= ($i<10) ? '0'.$i : $i;
  43. if($value==date('i',$_GET['recovery_time_objective'])) echo"<option selected=selected>".$value;
  44. else echo"<option>".$value;}?>
  45. </select></p>
  46. <p>System available date / time:
  47. <select name="system_available_day" size="1" >
  48. <option>
  49. <?php
  50. for($i=1;$i<=31;$i++){
  51. $value = ($i<10)? '0'.$i : $i;
  52. if($value==date('d',$_GET['system_available_date_time'])) echo"<option selected=selected>".$value;
  53. else echo"<option>".$value;}?>
  54. </select>
  55. <select name="system_available_month" size="1">
  56. <option>
  57. <?php
  58. for($i=1;$i<=12;$i++){
  59. $value= ($i<10)? '0'.$i : $i;
  60. if($value==date('m',$_GET['system_available_date_time'])) echo"<option selected=selected>".$value;
  61. else echo"<option>".$value; }?>
  62. </select>
  63. <select name="system_available_year" size="1">
  64. <option>
  65. <?php
  66. for($i=2009;$i<=2012;$i++){
  67. if($i==date('Y',$_GET['system_available_date_time'])) echo"<option selected=selected>".$i;
  68. else echo"<option>".$i;}?>
  69. </select>
  70. <span>Time:</span>
  71. <select name="system_available_hour" size="1">
  72. <option>
  73. <?php
  74. for($i=0;$i<=23;$i++){
  75. $value= ($i<10) ? '0'.$i :$i;
  76. if($value==date('H',$_GET['system_available_date_time'])) echo"<option selected=selected>".$value;
  77. else echo"<option>".$value;}?>
  78. </select>
  79. <select name="system_available_minut" size="1">
  80. <option>
  81. <?php
  82. for($i=0;$i<=55;$i=$i+5){
  83. $value= ($i<10) ? '0'.$i : $i;
  84. if($value==date('i',$_GET['system_available_date_time'])) echo"<option selected=selected>".$value;
  85. else echo"<option>".$value;}?>
  86. </select></p>
  87. <input class=button type="submit" value="Send" >
  88. <input class=button type="reset" value="Reset"></fieldset></form>


Zastanawiam sie jak sprawic by po wybraniu opcji1 w selekcie byl dostepny akapit "Recovery time objective" i jego selekty z których wybieram date i godzine
a po wybraniu opcji2 z selektu byl dostepny akapit "System available date / time" wraz z selektami w tym akapicie.
Chcialbym zeby domyslnie(przed wybraniem opcji w selekt) nie byl dostepny ani akapit "recovery time objective" ani "system available date/time".
Na JS sie w ogole nie znam wiec bez agresji prosze:P

Drugie pytanie to w polach typu textarea czasami wpisuje kilka wierszy oddzielonych enterami ale nie moge sprawic zeby te entery byly tolerowane tzn jak dam po wykonaniu formularza
echo $_POST['nazwa_pola_textarea']; to wszystko jest w jednej linii. Do celowo zalezy mi na tym zeby pola z textarea byly wpisywana do bazy a nastepnie wysylane w email'u,
wszystko jest zrobione i dziala oprócz enterów w tresci wyslanej wiadomosci.

Przykladowy kod odnosnie braku enterów:
skrypt.php

  1. <?php
  2. if(empty($_POST['nazwa_pola'])){
  3. ?>
  4. <form action="test_mail.php" method="POST">
  5. <p>Pole typu textarea
  6. <textarea name="nazwa_pola"></textarea></p>
  7. <input type="submit" value="Send">
  8. </form>
  9. <?php
  10. }else{
  11. $to ="email";
  12. $subject ="temat";
  13. $message ="<STYLE type='text/css'>/*<![CDATA[*/ style_css /* ]]> */</STYLE>";
  14. $message .="<p>".$_POST['nazwa_pola']."</p>";
  15. $headers ="MIME-Version: 1.0"."\n";
  16. $headers .="Content-type: text/html; charset=iso-8859-2"."\n";
  17. $headers .="Content-Transfer-Encoding: 8bit"."\n";
  18. $headers .="From: ALERTS@mailer.gro.pl.corp"."\n";
  19. $mailsent = mail($to,$subject,$message,$headers);}
  20. ?>
wiewiorek
A może być przy uzyciu biblioteki jquery - oto przykład:
  1. <script type="text/javascript">
  2. $(document).ready( function() {
  3.  
  4. $('#kontener').hide(); //ukrycie kontenera na starcie
  5.  
  6. $('#mySelect').change(function ()
  7. {
  8. if( $('#mySelect').val() == 1)
  9. {
  10. $('#kontener').show();
  11. }
  12. else{
  13. $('#kontener').hide();
  14. }
  15. });
  16.  
  17. });
  18.  
  19. <div id="kontener">
  20. tekst tekst
  21. </div>
  22.  
  23.  
  24. <select id="mySelect">
  25. <option value="1">First</option>
  26. <option value="2">Second</option>
  27. <option value="3">Third</option>
  28. <option value="4">Fourth</option>



questionmark.gif
XxmanxX
Zrobiłem kopiuj wklej Twojego kodu i nie bardzo wiem o co Ci chodziło, nie używałem nigdy biblioteki jquery.
Co ten skrypcik miał robić?
Pozdro
wiewiorek
Jak wybierzesz pierwszą opcję z selecta to pokaże zawartośc diva o id ='kontener', jak wybierzesz pozostałe to ukryje. jQuery to bardzo fajna biblioteka javascript. Ściągasz ją stąd: http://jquery.com/
I dołączasz w sekcji <head> strony w ten sposób:

  1. <script type="text/javascript" src="jquery.js"></script>


(tylko ściągnięty plik jquery będzie miał nazwę z numerkiem na końcu to ten numerek usuń z nazwy albo zmień wyżej src)
Jak masz pytania albo watpliwosci to pytaj smialo smile.gif
XxmanxX
Wielkie dzięki:)
Jeszcze jedno pytanko, jak w tej funkcji uzależnić widoczność kontenera od zmiennej $_GET którą będę pobierał. Jak się tworzy warunek if ze zmiennąsmile.gif
pozdrawiam
wiewiorek
Daj jakiś przykład co chcesz zrobić.
XxmanxX
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('#recovery_time_objective').hide();
  4. $('#system_available_date_time').hide();
  5. $('#status').change(function()
  6. {
  7. if($('#status').val()=='Work in progress')
  8. {
  9. $('#recovery_time_objective').show();
  10. $('#system_available_date_time').hide();
  11. }
  12. if($('#status').val()=='Closed')
  13. {
  14. $('#recovery_time_objective').hide();
  15. $('#system_available_date_time').show();
  16. }
  17. if($('#status').val()=='')
  18. {
  19. $('#recovery_time_objective').hide();
  20. $('#system_available_date_time').hide();
  21. }
  22. });
  23. });
  24. </script>
  25.  
  26. <form>
  27. <p>Status:
  28. <select id="status" name="status" size="1" style="position:absolute;left:265">
  29. <option>
  30. <?php
  31. if($_GET['status']=='Work in progress') echo"<option selected=selected>Work in progress"; else echo"<option>Work in progress";
  32. if($_GET['status']=='Closed') echo"<option selected=selected>Closed"; else echo"<option>Closed";
  33. ?>
  34. </select></p>
  35. <div id="recovery_time_objective">
  36. Recovery time objective:
  37. <input type="text" name="recovery_time_objective">
  38. </div>
  39. <div id="system_available_date_time">
  40. System available date / time:
  41. <input type="text" name="system_available_date_time">
  42. </div>
  43. <input class=button type="submit" value="Update" >
  44. <input class=button type="reset" value="Reset">
  45. </form>


Jak ładuje strone to chociaż ma domyślnie ustawiony select status np. na Work in progress to nie wyświetla <div id="recovery_time_objective"> tylko dopiero jak sam ręcznie wybiore z select status opcje Work in progress to wyświetli <div id="recovery_time_objective">. Myślałem że może gdybym na początu strony przypisał $zmienna=$_GET['status'] i wtedy wrzucil to w warunek w JS scirpt to by zadziałało bez recznego wybierania z listy?
wiewiorek
No teraz rozumiem smile.gif
Bo patrz, ja (i Ty wzorując się na moim kodzie) dałeś na samym początku skryptu:
Kod
$('#recovery_time_objective').hide();
$('#system_available_date_time').hide();


Czyli elementy o id=recovery_time_objective oraz id=system_available_date_time są od razu po załadowaniu strony ukrywane. Usuń te dwie linie kodu to będą widoczne. smile.gif

I tak w ogóle to w formularzach domyślną metodą wysyłania danych jest GET, ale lepiej zmieniać na POST <form method='post'>, bo GET ma jakiś tam limit znaków, a poza tym to potem jest widoczne w url więc w url robi się niezły śmietnik. GET'em głównie się przesyła jakieś identyfikatory, np. rekordów w bazie danych - jakieś krótkie rzeczy.
XxmanxX
Usunąlem te dwie linie kodu , ale teraz przypisuje zmienną $_GET['status'] do opcji w select a zarówno
<div id="recovery_time_objective"> i <div id="system_available_date_time"> są domyślnie widoczne.
wiewiorek
A jak powinno być ? Wnioskuję, że jeden element chcesz mieć na samym początku po załadowaniu strony gdy jeszcze nic nie wybrało się z selecta ukryty a drugi widoczny, tak ? Element o jakim id chcesz mieć ukryty a o jakim id widoczny na starcie ?
XxmanxX
W formularzu mam jeszcze kilka pól które są od początku widoczne, te dwa muszą być ukryte i pojawiać się wzależności od opcji z listy rozwijanej winksmiley.jpg
wiewiorek
Chodzi ci o cos takiego:
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.  
  4. //po zaladowaniu strony:
  5. var wybrana_opcja = $("#status option:selected");
  6.  
  7. if(wybrana_opcja.val()=='Work in progress')
  8. {
  9. $('#recovery_time_objective').show();
  10. $('#system_available_date_time').hide();
  11. }
  12. if(wybrana_opcja.val()=='Closed')
  13. {
  14. $('#recovery_time_objective').hide();
  15. $('#system_available_date_time').show();
  16. }
  17. if(wybrana_opcja.val()=='')
  18. {
  19. $('#recovery_time_objective').hide();
  20. $('#system_available_date_time').hide();
  21. }
  22.  
  23.  
  24. //po zmianie wybranej opcji z listy select:
  25. $('#status').change(function()
  26. {
  27. if($('#status').val()=='Work in progress')
  28. {
  29. $('#recovery_time_objective').show();
  30. $('#system_available_date_time').hide();
  31. }
  32. if($('#status').val()=='Closed')
  33. {
  34. $('#recovery_time_objective').hide();
  35. $('#system_available_date_time').show();
  36. }
  37. if($('#status').val()=='')
  38. {
  39. $('#recovery_time_objective').hide();
  40. $('#system_available_date_time').hide();
  41. }
  42. });
  43.  
  44. });


questionmark.gif
XxmanxX
A działa Ci to bo mi nie, od razu mam dostępne dwie opcje.
Czy możesz mi pokazać jak by wyglądałby kod w którym widoczność <div id="recovery_time_objective"> i
<div id="system_available_date_time'> byłaby zależna od wartość zmiennej $status
Dla $status=='Work in progress'
$('#recovery_time_objective').show();
$('#system_available_date_time').hide();
Dla $status=='Closed'
$('#recovery_time_objective').hide();
$('#system_available_date_time').show();
A dla $status==''
$('#recovery_time_objective').hide();
$('#system_available_date_time').hide();
wiewiorek
Kompletnie nie rozumiem co masz na mysli - jak to nie działa ? smile.gif

Strona główna:
http://img121.imageshack.us/my.php?image=09242009155423.png
Po wybraniu opcji z listy:
http://img12.imageshack.us/my.php?image=09242009155547.png
Po kliknięciu na przycisk update:
http://img43.imageshack.us/my.php?image=09242009155615.png

Zresztą jak chcesz żeby gdy ktoś wpisze w przeglądarce w adresie url:
http://localhost:81/?status=Work+in+progre...able_date_time=
wyświetlać lub ukrywać dane pole to nie trzeba do tego używać javascript, wystarczy użyć php - pobrać GET'em wartość 'status' i w zależności od jej wartości wyświetlać lub nie pola.
Javascript/ajaxa używa się gdy coś ma zostać wykonane bez przeładowania strony, ale ja nie bardzo rozumiem co masz na myśli także już nie wiem smile.gif
XxmanxX
Heh, ja w momencie kiedy ładuje strone po raz pierwszy już znam (ze zmiennej $status) domyślną wartość listy rozwijanej.
I chciałbym żeby przy ładowaniu strony właśnie w zalenożności od tej zmiennej wyświetlał się albo jeden kontener albo drugi.
A następnie jeśli user chce to sam wybiera opcje z listy i zmienia sie kontener lub zostaje kontener ten załadowany przy starcie strony(ale zależny od zmiennej $status).
Rozumiesz ? tongue.gif

Step by step:
1. ładuje strone
2. rozpakowuje z bazy pole status
3. jesli $status=='Work in progress' to takie kontenery widoczne a inne nie jeśli $status=='Closed' to takie kontenery widoczne a inne nie, jeśli $status=='' to wszystkie kontenery nie widoczne.
4. Pkt. 3 to domyślny wygląd formularza
5. User może zmienić wartość selectu i automatycznie mają się zmieniać widoczne/niewidoczne kontenery bez przycisku submit formularza
wiewiorek
Pokaż mi tylko przykładowy url - link, pod którym jest coś nie tak, bo nie rozumiem tongue.gif U mnie wszystko jest ok zgodnie z tymi punktami.
XxmanxX
Strona po załadowaniu
http://img411.imageshack.us/i/79007366.jpg/
Po wybraniu opcji
http://img16.imageshack.us/i/79549083.jpg/
wiewiorek
To wygląda jakby jQuery Ci w ogóle nie działało - masz pobraną bibliotekę jQuery i ją dodaną w ten sposób:
<script type="text/javascript" src="jquery.js"></script>

questionmark.gifquestionmark.gif?


Masz tu cały DZIALAJĄCY kod:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <title>Dokument bez tytułu</title>
  4. <script type="text/javascript" src="jquery.js"></script>
  5.  
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8.  
  9. //po zaladowaniu strony:
  10. var wybrana_opcja = $("#status option:selected");
  11.  
  12. if(wybrana_opcja.val()=='Work in progress')
  13. {
  14. $('#recovery_time_objective').show();
  15. $('#system_available_date_time').hide();
  16. }
  17. if(wybrana_opcja.val()=='Closed')
  18. {
  19. $('#recovery_time_objective').hide();
  20. $('#system_available_date_time').show();
  21. }
  22. if(wybrana_opcja.val()=='')
  23. {
  24. $('#recovery_time_objective').hide();
  25. $('#system_available_date_time').hide();
  26. }
  27.  
  28.  
  29. //po zmianie wybranej opcji z listy select:
  30. $('#status').change(function()
  31. {
  32. if($('#status').val()=='Work in progress')
  33. {
  34. $('#recovery_time_objective').show();
  35. $('#system_available_date_time').hide();
  36. }
  37. if($('#status').val()=='Closed')
  38. {
  39. $('#recovery_time_objective').hide();
  40. $('#system_available_date_time').show();
  41. }
  42. if($('#status').val()=='')
  43. {
  44. $('#recovery_time_objective').hide();
  45. $('#system_available_date_time').hide();
  46. }
  47. });
  48.  
  49. });
  50.  
  51. </head>
  52.  
  53.  
  54. <p>Status:
  55. <select id="status" name="status" size="1" style="position:absolute;left:265">
  56. <?php
  57. if($_GET['status']=='Work in progress') echo"<option selected=selected>Work in progress"; else echo"<option>Work in progress";
  58. if($_GET['status']=='Closed') echo"<option selected=selected>Closed"; else echo"<option>Closed";
  59. ?>
  60. </select></p>
  61. <div id="recovery_time_objective">
  62. Recovery time objective:
  63. <input type="text" name="recovery_time_objective">
  64. </div>
  65. <div id="system_available_date_time">
  66. System available date / time:
  67. <input type="text" name="system_available_date_time">
  68. </div>
  69. <input class=button type="submit" value="Update" >
  70. <input class=button type="reset" value="Reset">
  71. </form>
  72.  
  73.  
  74. </body>
  75. </html>


Jeśli nie działa to znaczy, że nie masz biblioteki jQuery tongue.gif
XxmanxX
Chyba znalazłem swój błąd, ale nie mam teraz dostępu do kodu, jutro sprawdzę i dam znać;)
Dzięki za poświęcony czas, pozdrawiam;)
wiewiorek
Powodzenia biggrin.gif tongue.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.