webForumDet fria alternativet

Fade:a formulärfält?

6 svar · 262 visningar · startad av dreas

dreasMedlem sedan jan. 2004140 inlägg
#1

Hej!
Jag håller på och trixar lite med ett formulär som ska fungera som en registrering av produkter (kundregister). Formuläret börjar med en drop-down meny där man ska välja aktuell produkt, därefter följer formuläret med textfält för inmatning av serienr, namn, adress osv..

Det jag märkt är att vissa registrerar sig bara för att få information från företaget, så jag hade tänkt lägga till ett "ingen produkt" val i dropdown menyn.
Det jag nu skulle vilja åstadkomma är att textfältet för serienumret fade:as, dvs. det går inte att mata in nåt i det fältet när just "ingen produkt" är vald.
Hur går jag tillväga för att lösa detta?

Kan tänka mig att jag kan skapa två lager i DHTML med 2 olika formulär, efter val i dropdown menyn. Ett alternativ.
Men är det nån som vet hur en sån "fade" funktion ser ut (om det nu finns någon sån???) så skulle jag vara ytterst tacksam för hjälp!!

Mvh
/Andreas

Peter SMedlem sedan dec. 20025 483 inlägg
#2

Om "Ingen produkt" är det första valet i dropdownelementet anger du disabled="disabled" i textfältet.

Sedan:

function func(obj) {
    obj.form.elements["[b]namn_på_textrutan[/b]"].disabled = (obj.options[obj.selectedIndex].text == "Ingen produkt");

    // Annan ev. JavaScript-kod 
}

<select onchange="func(this)"...

:)

dreasMedlem sedan jan. 2004140 inlägg
#3

Grymt!
Tack Peter för lösningen som fungerar ypperligt!
Dock en liten följdfråga - kan man ändra färgen på textfältet, så att det verkligen framgår att den är "disabled"? Jag kör nämligen stylesheets på formuläret, går det att välja färg genom css?

Peter SMedlem sedan dec. 20025 483 inlägg
#4

Då kan du göra så här:

function func(obj) {
    var elm = obj.form.elements["[b]namn_på_textrutan[/b]"];

    if (obj.options[obj.selectedIndex].text == "Ingen produkt") {
	elm.disabled = true;
	elm.style.color = "#77c";
    }
    else {
	elm.disabled = false;
	elm.style.color = "#000";
    }

    // Annan ev. JavaScript-kod
}

:)

dreasMedlem sedan jan. 2004140 inlägg
#5

Hm..
Får det inte riktigt att fungera. Bytte till den andra koden, och själva funktionen fungerar - dock utan färgbyte. Testade att ta bort css koden utan något resultat.

Jag har skrivit följande:

<script language="JavaScript">
function func(obj) {
    var elm = obj.form.elements["serial"];

    if (obj.options[obj.selectedIndex].text == "None") {
	elm.disabled = true;
	elm.style.color = "#999999";
    }
    else {
	elm.disabled = false;
	elm.style.color = "E1DDC2";
    }
}
</script>

Och sen för select formuläret:

select onchange="func(this)" name="product"

Något förslag?

Mvh
/Andreas

Peter SMedlem sedan dec. 20025 483 inlägg
#6

Jag missförstod dig angående färgbytet. Här kommer en fungerande lösning:

<script language="JavaScript">
function func(obj) {
    var elm = obj.form.elements["serial"];

    if (obj.options[obj.selectedIndex].text == "None") {
	elm.disabled = true;
	elm.style.backgroundColor = "#999";
    }
    else {
	elm.disabled = false;
	elm.style.backgroundColor = "#e1ddc2";
    }
}
</script>

<form>
    <select onchange="func(this)" name="product">
	<option>None</option>
	<option>Foo</option>
    </select>
    <input type="text" name="serial" disabled="disabled" style="background-color: #999">
</form>

:)

dreasMedlem sedan jan. 2004140 inlägg
#7

GRYMT!!!
Tusen tack Peter!!!!

:)

/Andreas som är väldigt nöjd o glad

131 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)