6 svar · 264 visningar · startad av dreas
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
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)"...
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?
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
}
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
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>