Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana koloru tła dynamicznego pola formularza
Forum PHP.pl > Forum > Po stronie przeglądarki
detter
31.01.2010, 02:21:42
Witam.
Na wstępie zaznaczę, iż w kwestii Javy jestem totalnie zielony, a odpowiedzi na nurtujące mnie pytanie szukałem dłuuugo...
i niestety nie znalazłem... sad.gif

Mam formularz w html, w pewnym momencie, dochodzi opcja wyboru, czy użytkownik chce otrzymać fakturę VAT.
użyłem takiej opcji:
[HTML] pobierz, plaintext 
  1. <input type="checkbox" name="nazwa" value="wartość" onclick="
  2. 	this.form.elements['vat_firma'].disabled = 
  3. 	this.form.elements['vat_miejscowosc'].disabled = 
  4. 	this.form.elements['vat_ulica'].disabled = 
  5. 	this.form.elements['vat_nip'].disabled = !this.checked" />
[HTML] pobierz, plaintext


Do pól formularza (vat_firma, vat_miejscowosc, vat_ulica i vat_nip) dodałem opcję:
[HTML] pobierz, plaintext 
  1. disabled="disabled"
[HTML] pobierz, plaintext


Wszystko działa fajnie i przyjemnie...
Problem polega na tym, iż wygląd formularza mam oparty o css...

I teraz tak:
jak mam zaznaczone pole typu checkbox - normalnie mogę wypełnić interesujące mnie pola,
jeśli pole checbox nie jest zaznaczone: pola są zablokowane i nie można wprowadzać w nich tekstu.
Chciałbym, aby gdy pole checkbox nie jest zaznaczone - to żeby pola mu podlegające zmieniły kolor tła...
Aby je wyróżnić - jako nie aktywne....

Tu mały obrazek, przedstawiający o co mi dokładniej chodzi:



Ma ktoś może jakiś pomysł, jak to rozwiązać?

Dodam tylko, ze cała reszta formularza wygląda tak jak w pierwszej części screena - i chciałbym aby tak pozostało...

icetique
31.01.2010, 09:49:28
Dodawaj klasę do tych inputów po kliknięciu na checkbox:
Kod
this.form.elements['vat_firma'].className = 'disabled';
this.form.elements['vat_firma'].className = 'twojaKlasa disabled'; // lub tak


Ta druga opcja wtedy, gdy masz już jakąś klasę przypisaną do vat_firma.
Jak chcesz zrobić z powrotem enabled, to:

Kod
this.form.elements['vat_firma'].className = '';
  this.form.elements['vat_firma'].className = 'twojaKlasa'; // lub tak


Najlepiej jakąś funkcję zrób, bo inline będzie trochę nieczytelny.
blooregard
31.01.2010, 10:23:11
Cytat
iż w kwestii Javy jestem totalnie zielony

JavaScript to nie Java.
detter
31.01.2010, 14:16:12
ok, poprawiam mój błąd: jestem ziolony w JavaScript smile.gif

Trochę zaczyna mi świtać, ale nie do końca wiem w jaki sposób zastosować te wskazówki....
Może moglibyście podać konkretny przykład jak to ma wyglądać? (cały input....).

PS. przepraszam za marudzenie, ale naprawdę tego nie ogarniam....
icetique
31.01.2010, 16:41:59
Kod
function disable()
  {
  this.form.elements['vat_firma'].disabled = this.form.elements['vat_miejscowosc'].disabled = this.form.elements['vat_ulica'].disabled = this.form.elements['vat_nip'].disabled = true;
  this.form.elements['vat_firma'].className = this.form.elements['vat_miejscowosc'].className = this.form.elements['vat_ulica'].className = this.form.elements['vat_nip'].className = 'disabled';
  }
  
  function enable()
   {
   this.form.elements['vat_firma'].disabled = this.form.elements['vat_miejscowosc'].disabled = this.form.elements['vat_ulica'].disabled = this.form.elements['vat_nip'].disabled = false;
   this.form.elements['vat_firma'].className = this.form.elements['vat_miejscowosc'].className = this.form.elements['vat_ulica'].className = this.form.elements['vat_nip'].className = '';
   }


Kod
input.disabled
  {
  background-color: #aaaaaa;
  }


Kod
<input type="checkbox" name="nazwa" value="wartość" onclick="this.checked ? enable() : disable();" />


Pisane z palca (może nie działać, chodziło mi o przedstawienie idei).
detter
31.01.2010, 17:22:24
Wow... taką formę wyjaśnienia nawet ja potrafiłem wrzucić do mojego "projektu" smile.gif

Jednak w linijce: 
[PHP] pobierz, plaintext 
  1. this.form.elements['vat_firma'].disabled = this.form.elements['vat_miejscowosc'].disabled = this.form.elements['vat_ulica'].disabled = this.form.elements['vat_nip'].disabled = true;
[PHP] pobierz, plaintext


Jest błąd składni - a ja niestety nie widzę gdzie jest coś nie tak sad.gif
icetique
31.01.2010, 17:41:21
Kod
<script type="text/javascript">
function disable()
   {
   document.getElementById('vat_firma').disabled = document.getElementById('vat_miejscowosc').disabled = document.getElementById('vat_ulica').disabled = document.getElementById('vat_nip').disabled = true;
   document.getElementById('vat_firma').className = document.getElementById('vat_miejscowosc').className = document.getElementById('vat_ulica').className = document.getElementById('vat_nip').className = 'disabled';
   }
  
   function enable()
    {
    document.getElementById('vat_firma').disabled = document.getElementById('vat_miejscowosc').disabled = document.getElementById('vat_ulica').disabled = document.getElementById('vat_nip').disabled = false;
   document.getElementById('vat_firma').className = document.getElementById('vat_miejscowosc').className = document.getElementById('vat_ulica').className = document.getElementById('vat_nip').className = '';
    }

</script>

<form>
<input type="text" id="vat_firma" name="vat_firma" disabled="disabled" />
<input type="text" id="vat_miejscowosc" name="vat_firma" disabled="disabled" />
<input type="text" id="vat_ulica" name="vat_firma" disabled="disabled" />
<input type="text" id="vat_nip" name="vat_firma" disabled="disabled" />
<input type="checkbox" name="nazwa" value="wartość" onclick="this.checked ? enable() : disable();" />
</form>


Masz, teraz sprawdzone. Mój błąd. Jak wrzucisz do htmla, to zobaczysz, że działa. Teraz możesz dostosować pod siebie.
lnn
31.01.2010, 18:41:13
w jQuery ostatnio robilem podobna funkcje
[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
  2. <head>
  3. <script language="text/javascript">
  4. $(document).ready(function(){ 
  5.    $('input[name=wyzywienie_on]').click(function() {
  6.    if (this.checked == true) $(".check").attr('disabled', false); else $(".check").attr('disabled', true); 
  7.  });
  8.  
  9. });</script>
  10.  </head>
  11. <body>
  12. <label for="wyzywienie_on">dostępne</label><input type="checkbox" name="wyzywienie_on" />
  13. <label for="nazwa">label</label><input id="input_text" class="check" type="text" name="nazwa" disabled="disabled"><br /></body>
[HTML] pobierz, plaintext
detter
31.01.2010, 18:46:26
ok, teraz załapałem smile.gif
Serdecznie dzięki za pomoc! smile.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.