🚀 go-pugleaf

W dniu 2010-02-23 19:22, Bool pisze:
> Projektuje właśnie urządzenie, które ma interfejs web. No i muszę dodać
> kilka prostych skryptów. Jestem elektronikiem i niestety na javascipt
> znam sie prawie tyle co nic. Dla was to pewnie będzie pestka.
>
> Mam dwa problemy z formularzem:
> 1) jak zmieniać tekst i kolor labela powiązanego z polem input?
>
> <input maxlength="12" size="13" name="pole" onchange="CheckSize();" >
> <label for="pole">To jest etykieta</label>
>
>
> function CheckSize()
> {
> if (document.config.pole.length < 12)
> {
> //label_value = 'ERR';
> //label_color = czerowny;
> }
> else
> {
> //label_value = 'OK';
> //label_color = zielony;
> }
> }
>
> Chciałbym aby tekst i kolor tego labela zmieniał się wraz z długością
> wprowadzanego tekstu.

Ja bym to zrobił tak:

<input maxlength="12" size="13" name="pole" id="pole" /><label 
for="pole">To jest etykieta</label>

var zmien = {

  init : function()
  {
    var elem = document.getElementById("pole");
    if(!elem)
    {
     return false;
    }
    elem.onchange = zmien.kolory;
  },

  kolory : function(event)
  {
    var elem;
    if(window.event)
    {
     elem = window.event.srcElement;
    }
    else if(event)
    {
     elem = event.target;
    }
    if(elem.nodeType == 3)
    {
     elem = elem.parentNode;
    }
    // Tutaj warunki zmiany kolorow
    if(elem.length > 12)
    {
      elem.style.color = "#cc330";
    }
    else
    {
      elem.style.color = "#033cc";
    }
  }

}

zmien.init();


> 2) Druga sprawa. Jak sprawdzić po kliknięciu submit czy jedno z pól ma
> odpowiednią ilość znaków i w zależności od tego wysłać dane formularza
> lub nie? Dodatkowo w przypadku gdy znaków jest za mało zaznaczyć to pole.

<form id="test" ... >
[...]


var sprawdz = {

  init : function()
  {
   var elem = document.getElementById("test");
   if(!elem)
   {
    return false;
   }
   elem.onsubmit = sprawdz.formularz;
  },

  formularz : function(event)
  {
    var elem;
    if(window.event)
    {
     elem = window.event.srcElement;
    }
    else if(event)
    {
     elem = event.target;
    }
    if(elem.nodeType == 3)
    {
     elem = elem.parentNode;
    }

    var i = elem.elements.length;
    while(i--)
    {
     if(elem.elements[i].nodeName.toLowerCase() == "input" && 
elem.elements[i].type == "text" && elem.elements[i].length < 10)
      {
        // Jesli jakikolwiek element typu input type="text" jest
        // mniejsze od 10 to formularz nie bedzie submit-owal sie
        return false;
      }
    }
  }

}

sprawdz.init();

Tak to mniej więcej bym zaprogramował. Pewnie można lepiej ;-)

-- 
Peter

Peter May pisze:
> W dniu 2010-02-23 19:22, Bool pisze:
>> Projektuje właśnie urządzenie, które ma interfejs web. No i muszę dodać
>> kilka prostych skryptów. Jestem elektronikiem i niestety na javascipt
>> znam sie prawie tyle co nic. Dla was to pewnie będzie pestka.
>>
>> Mam dwa problemy z formularzem:
>> 1) jak zmieniać tekst i kolor labela powiązanego z polem input?
>>
>> <input maxlength="12" size="13" name="pole" onchange="CheckSize();" >
>> <label for="pole">To jest etykieta</label>
>>
>>
>> function CheckSize()
>> {
>> if (document.config.pole.length < 12)
>> {
>> //label_value = 'ERR';
>> //label_color = czerowny;
>> }
>> else
>> {
>> //label_value = 'OK';
>> //label_color = zielony;
>> }
>> }
>>
>> Chciałbym aby tekst i kolor tego labela zmieniał się wraz z długością
>> wprowadzanego tekstu.
> 
> Ja bym to zrobił tak:
> 
> <input maxlength="12" size="13" name="pole" id="pole" /><label 
> for="pole">To jest etykieta</label>
> 
> var zmien = {
> 
>  init : function()
>  {
>    var elem = document.getElementById("pole");
>    if(!elem)
>    {
>     return false;
>    }
>    elem.onchange = zmien.kolory;
>  },
> 
>  kolory : function(event)
>  {
>    var elem;
>    if(window.event)
>    {
>     elem = window.event.srcElement;
>    }
>    else if(event)
>    {
>     elem = event.target;
>    }
>    if(elem.nodeType == 3)
>    {
>     elem = elem.parentNode;
>    }
>    // Tutaj warunki zmiany kolorow
>    if(elem.length > 12)
>    {
>      elem.style.color = "#cc330";
>    }
>    else
>    {
>      elem.style.color = "#033cc";
>    }
>  }
> 
> }
> 
> zmien.init();


Dzięki Peter.
Niestety ten kod nie chce mi działać. Pewnie coś robię źle.
Deklarację zmien i całą resztę mam w pliku plik.js, który dołączam do html:
<script type="text/javascript" src="plik.js">
...
<input maxlength="12" size="13" name="pole" id="pole" /><label for="pole">To jest etykieta</label>

On 23 Lut, 20:02, Peter May <peter....@poczta.fm> wrote:
>
> Tak to mniej wi cej bym zaprogramowa . Pewnie mo na lepiej ;-)
>
Pewnie że można :) Po co to wyciąganie elementu ze zdarzenia?
Łatwiej tak:

elem.onsubmit = function(){
sprawdz.formularz(this);
}
...
formularz : function(elem)
{
...

On 23 Lut, 19:22, Bool <nos...@nospam.com> wrote:
> Projektuje w a nie urz dzenie, kt re ma interfejs web. No i musz doda kilka prostych skrypt w.
> Jestem elektronikiem i niestety na javascipt znam sie prawie tyle co nic. Dla was to pewnie b dzie
> pestka.
>
> Mam dwa problemy z formularzem:
> 1) jak zmienia tekst i kolor labela powi zanego z polem input?
>
> <input maxlength="12" size="13" name="pole" onchange="CheckSize();" >
> <label for="pole">To jest etykieta</label>
>
> function CheckSize()
> {
> if (document.config.pole.length < 12)
>     {
>     //label_value = 'ERR';
>     //label_color = czerowny;
>     }
>     else
>     {
>     //label_value = 'OK';
>     //label_color = zielony;
>     }
>
> }
>
> Chcia bym aby tekst i kolor tego labela zmienia si wraz z d ugo ci wprowadzanego tekstu.
>
> 2) Druga sprawa. Jak sprawdzi po klikni ciu submit czy jedno z p l ma odpowiedni ilo znak w i w
> zale no ci od tego wys a dane formularza lub nie? Dodatkowo w przypadku gdy znak w jest za ma o
> zaznaczy to pole.

Ładniej będzie, jeśli funkcję sprawdzającą ilość znaków podepniesz
również do onkeyup - wtedy zadziała po każdorazowym naciśnięciu
klawisza.

<script language="javascript" type="text/javascript">
function checkSize(input)
{
var label = document.getElementById('label');
if (input.value.length < 12)
    {
    label.innerHTML = 'ERR';
    label.style.color = 'red';
    }
    else
    {
    label.innerHTML = 'OK';
    label.style.color = 'green';
    }

}

function checkForm(form){
	if (form.elements['pole'].value.length < 12){
		alert('Pole musi mieć 12 znaków');
		form.elements['pole'].focus();
		return false
	}
	return true;
}
</script>

<form onsubmit="return checkForm(this);">
<input maxlength="12" size="13" name="pole"
onchange="checkSize(this);" onkeyup="checkSize(this);" >
<label id="label" for="pole">To jest etykieta</label>
<input type="submit"/>
</form>


Pozdrawiam,
Paweł Arciszewski

W dniu 2010-02-23 22:32, Bool pisze:
> Peter May pisze:
>> W dniu 2010-02-23 19:22, Bool pisze:
>>> Projektuje właśnie urządzenie, które ma interfejs web. No i muszę dodać
>>> kilka prostych skryptów. Jestem elektronikiem i niestety na javascipt
>>> znam sie prawie tyle co nic. Dla was to pewnie będzie pestka.
>>>
>>> Mam dwa problemy z formularzem:
>>> 1) jak zmieniać tekst i kolor labela powiązanego z polem input?
>>>
>>> <input maxlength="12" size="13" name="pole" onchange="CheckSize();" >
>>> <label for="pole">To jest etykieta</label>
>>>
>>>
>>> function CheckSize()
>>> {
>>> if (document.config.pole.length < 12)
>>> {
>>> //label_value = 'ERR';
>>> //label_color = czerowny;
>>> }
>>> else
>>> {
>>> //label_value = 'OK';
>>> //label_color = zielony;
>>> }
>>> }
>>>
>>> Chciałbym aby tekst i kolor tego labela zmieniał się wraz z długością
>>> wprowadzanego tekstu.
>>
>> Ja bym to zrobił tak:
>>
>> <input maxlength="12" size="13" name="pole" id="pole" /><label
>> for="pole">To jest etykieta</label>
>>
>> var zmien = {
>>
>> init : function()
>> {
>> var elem = document.getElementById("pole");
>> if(!elem)
>> {
>> return false;
>> }
>> elem.onchange = zmien.kolory;
>> },
>>
>> kolory : function(event)
>> {
>> var elem;
>> if(window.event)
>> {
>> elem = window.event.srcElement;
>> }
>> else if(event)
>> {
>> elem = event.target;
>> }
>> if(elem.nodeType == 3)
>> {
>> elem = elem.parentNode;
>> }
>> // Tutaj warunki zmiany kolorow
>> if(elem.length > 12)
>> {
>> elem.style.color = "#cc330";
>> }
>> else
>> {
>> elem.style.color = "#033cc";
>> }
>> }
>>
>> }
>>
>> zmien.init();
>
>
> Dzięki Peter.
> Niestety ten kod nie chce mi działać. Pewnie coś robię źle.
> Deklarację zmien i całą resztę mam w pliku plik.js, który dołączam do html:
> <script type="text/javascript" src="plik.js">
> ...
> <input maxlength="12" size="13" name="pole" id="pole" /><label
> for="pole">To jest etykieta</label>

A w którym miejscu dołączasz skrypt? Bo powinieneś na końcu kodu, tuż 
przed zamknięciem </body>.

-- 
Peter

W dniu 2010-02-24 02:51, Paweł Arciszewski pisze:
> On 23 Lut, 20:02, Peter May<peter....@poczta.fm>  wrote:
>>
>> Tak to mniej wi cej bym zaprogramowa . Pewnie mo na lepiej ;-)
>>
> Pewnie że można :) Po co to wyciąganie elementu ze zdarzenia?

Aby znaleźć źródło zdarzenia.

> Łatwiej tak:
>
> elem.onsubmit = function(){
> sprawdz.formularz(this);

A this na co będzie wskazywać? Bo wywołane w tym kontekście nie jestem 
pewien, czy będzie wskazywać na źródło zdarzenia.

> }
> ...
> formularz : function(elem)
> {
> ...

-- 
Peter

Dzięki Panowie już wszystko działa.

On 24 Lut, 09:50, Peter May <peter....@poczta.fm> wrote:
> W dniu 2010-02-24 02:51, Pawe Arciszewski pisze:
>
> > On 23 Lut, 20:02, Peter May<peter....@poczta.fm>  wrote:
>
> >> Tak to mniej wi cej bym zaprogramowa . Pewnie mo na lepiej ;-)
>
> > Pewnie e mo na :) Po co to wyci ganie elementu ze zdarzenia?
>
> Aby znale r d o zdarzenia.
>

Takie praktyki są użyteczne gdy przechwytujesz zdarzenie bardziej
globalnie, np dla window. Wtedy sprawdzając źródło, możesz np
powstrzymać propagację zdarzenia. Przy takich konkretnych podpięciach
handler'ów nie ma to sensu.

>
> A this na co b dzie wskazywa ? Bo wywo ane w tym kontek cie nie jestem
> pewien, czy b dzie wskazywa na r d o zdarzenia.
>

A ja jestem pewien: this wskazuje na element, ponieważ spod jego
kontekstu podpiąłeś funkcję.


Pozdrawiam,
Paweł Arciszewski

W dniu 2010-02-25 12:48, Paweł Arciszewski pisze:
> On 24 Lut, 09:50, Peter May<peter....@poczta.fm>  wrote:
>> W dniu 2010-02-24 02:51, Pawe Arciszewski pisze:
>>
>>> On 23 Lut, 20:02, Peter May<peter....@poczta.fm>    wrote:
>>
>>>> Tak to mniej wi cej bym zaprogramowa . Pewnie mo na lepiej ;-)
>>
>>> Pewnie e mo na :) Po co to wyci ganie elementu ze zdarzenia?
>>
>> Aby znale r d o zdarzenia.
>>
>
> Takie praktyki są użyteczne gdy przechwytujesz zdarzenie bardziej
> globalnie, np dla window. Wtedy sprawdzając źródło, możesz np
> powstrzymać propagację zdarzenia. Przy takich konkretnych podpięciach
> handler'ów nie ma to sensu.

Efekt końcowy jest w sumie taki sam, ale faktycznie można i przez this, 
które wskazuje na źródło zdarzenia.

>> A this na co b dzie wskazywa ? Bo wywo ane w tym kontek cie nie jestem
>> pewien, czy b dzie wskazywa na r d o zdarzenia.
>>
>
> A ja jestem pewien: this wskazuje na element, ponieważ spod jego
> kontekstu podpiąłeś funkcję.

Teraz to ja też :-)

-- 
Peter