Formulär med dolda fält

16 januari, 2007

Jag skulle vilja att i mitt formulär så visas ett dolt fält först när man fyllt i ett visst fält i formuläret. Har man fyllt i detta fält +ett ytterligare fält så ska ett annat dolt fält bli synligt.

Någon, förslag på kod mottages tacksamt : )

16 januari, 2007

<html>
<head>
<script type="text/javascript">
function showMethod() {
 if ((document.getElementById("txt1").value != "") && (document.getElementById("txt2").value != "")) {
   document.getElementById("txt3").style.visibility="visible";
 } else {
   document.getElementById("txt3").style.visibility="hidden";
 }
}
function load() {
 document.getElementById("txt3").style.visibility="hidden";
}
</script>
</head>
<body onLoad="load()">
<form id="myForm">
<input type="text" id="txt1" size="20" onChange="showMethod()" /><br />
<input type="text" id="txt2" size="20" onChange="showMethod()" /><br />
<input type="text" id="txt3" size="20" /><br />
</form>
</body>
</html>

Det ser ju knasigt ut, indenteringen har försvunnit och radbrytningar lite varstans. Men men det funkade för mig iaf...

[inlägget ändrat 2007-01-16 15:11:51 av tjoppas]

16 januari, 2007

Som jag förstått det hela så vill du visa ett dolt fält(y1) om du fyllt i ett värde i ett visst fält(x1).

Men om du har fyllt i det fältet(x1) samt fyllt i ett annat(x2) så vill du dölja fältet(y1) igen och istället visa ett annat dolt fält(y2).

Så dem bägga dolda fälten ska inte visas samtidigt!?

Vad är det för sorts fält?

16 januari, 2007

Stämmer precis dvs de dolda fälten ska inte visas samtidigt, det är vanliga text-fält

[inlägget ändrat 2007-01-16 15:55:20 av inka6]

16 januari, 2007

Återkommer lite senare med förslag.

Måste fixa lite ärenden.

16 januari, 2007

Då bommade jag ju lite med mitt förslag, men det är ju inte så svårt att ändra, det som man behöver kodmässigt finns ju med. Bara att utöka så det gäller de textfält man vill.

Sen kan det vara så att man vill ändra onChange till onKeyUp, det beror på hur man vill ha det.

16 januari, 2007

Tack; tjoppas. Eftersom jag inte är en hejjare på javascript så undrar jag exakt hur man kan skriva?

Och, Micke, tar tacksamt emot även ditt förslag på kod : )

Thanx!

16 januari, 2007

Här kommer ett morgonförslag

Förslaget gör dem olika fälten aktiva/avaktiva men du kan lätt ändra det till att istället visa/dölja fälten.

[log]

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function DisFlt() {
var x1 = document.getElementById("x1");
var x2 = document.getElementById("x2");
var y1 = document.getElementById("y1");
var y2 = document.getElementById("y2");
if(x1.value.length>0&&x2.value.length>0){
y2.disabled=false;
y1.disabled=true;
}
else if(x1.value.length>0&&x2.value.length==0) {
y2.disabled=true;
y1.disabled=false;
}
else {
y2.disabled=true;
y1.disabled=true;
}
}
</script>
</head>

<body>

<input type="Text" id="x1" onkeypress="return DisFlt();"> <input type="Text" id="x2" onkeypress="return DisFlt();"><br />
<input type="Text" id="y1" disabled="disabled"> <input type="Text" id="y2" disabled="disabled">

</body>
</html>

[/log]

[inlägget ändrat 2007-01-17 06:21:05 av Micke_skane]

17 januari, 2007

Tyvärr så får jag det inte att fungera när jag försöker ändra till hidden och visible fält, men tack ändå

17 januari, 2007

Det är inte så att du har bommat style. Notera skillnaden nedan. Jag och Micke använder ju inte samma metoder för skapa funktionen du vill ha.

document.getElementById("txt").style.visibility="hidden";

document.getElementById("txt").disabled=true;

17 januari, 2007

Tyvärr så får jag det inte att fungera när jag försöker ändra till hidden och visible fält, men tack ändå

Som tjoppas skrev skiljer sig tillvägagångssättet en aning då man vill jobba med hidden.

Dels så behåller elementen sina ursprungliga platser fast dem inte är synliga. Vill du inte att dem ska behålla sina platser i dolt läge får du jobba med display-egenskapen.

Nedan följer en modifierad variant med hidden-egenskapen:

[log]

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function DisFlt() {
var x1 = document.getElementById("x1");
var x2 = document.getElementById("x2");
var y1 = document.getElementById("y1");
var y2 = document.getElementById("y2");
if(x1.value.length>0&&x2.value.length>0){
y1.style.visibility='hidden';
y2.style.visibility='';
}
else if(x1.value.length>0&&x2.value.length==0) {
y1.style.visibility='';
y2.style.visibility='hidden';
}
else {
y1.style.visibility='hidden';
y2.style.visibility='hidden';
}
}
</script>
</head>

<body>

<input type="Text" id="x1" onkeyup="return DisFlt();" onkeypress="return DisFlt();"> <input type="Text" id="x2" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
<input type="Text" id="y1" style="visibility:hidden" value="Y1"> <input type="Text" id="y2" style="visibility:hidden" value="Y2">

<div 
</body>
</html>

[/log]

Märk även att jag anropar funktionen med både onkeyup och onkeypress.

Allt för att det ska fungera pedagogiskt, enligt mig

Om du vill att värdena ska tömmas i fälten(y1) i dolt läge får du helt enkelt använda:

y1.value="";

Se bara till så att det hamnar inom rätt if-sats

[inlägget ändrat 2007-01-17 13:22:37 av Micke_skane]

17 januari, 2007

Tack snälla båda två!

Sorry, har ytterligare en nybörjarfråga, om jag skulle vilja modifiera den sista koden för att anpassa den till detta:

Det finns totalt 7 fält (fält1, fält2 osv), när fält 1, fält3, fält4, fält5, fält6 är ifyllda så ska fältet Y1 visas, är ngt av de övriga fälten ifyllda så ska istället Y2 visas och är alla fälten ifyllda så ska enbart Y1 visas.

En annan fråga, om man vill ha text ovanför fältet Y1 resp. Y2 och som bara ska synas när fältet blir synligt, hur gör man då?

17 januari, 2007

Tjena!

Jag har tyvärr inte tid att hjälpa dig. Men jag är absolut inte något proffs på javascript. Det lilla jag kan har jag lärt mig på http://www.w3schools.com så kolla lite där så ska du se att det löser sig.

17 januari, 2007

Ett förslag där man skapar olika räknare och av deras värden bestämma vad som ska visas.

Skapade även div för text+textfälten!

[log]

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function DisFlt() {
var arrFltX = new Array("x1","x3","x4","x5","x6");
var arrFltY = new Array("x2","x7");
var y1 = document.getElementById("y1");
var y2 = document.getElementById("y2");
var CounterX = "";
var CounterY = "";
for(x in arrFltX) {
 var FltX = document.getElementById(arrFltX[x]);
 if(FltX.value.length>0){
   CounterX ++;
 }
}
for(y in arrFltY) {
 var FltY = document.getElementById(arrFltY[y]);
 if(FltY.value.length>0){
   CounterY ++;
 }
}
if((CounterX==5&&CounterY==2)||(CounterX>0&&CounterY==0)){
y1.style.visibility='';
y2.style.visibility='hidden';
}
else if(CounterX>0&&CounterY>0) {
y1.style.visibility='hidden';
y2.style.visibility='';
}
else {
y1.style.visibility='hidden';
y2.style.visibility='hidden';
}
}
</script>
</head>

<body>

1<input type="Text" id="x1" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
2<input type="Text" id="x2" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
3<input type="Text" id="x3" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
4<input type="Text" id="x4" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
5<input type="Text" id="x5" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
6<input type="Text" id="x6" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
7<input type="Text" id="x7" onkeyup="return DisFlt();" onkeypress="return DisFlt();"><br />
<div id="y1" style="visibility:hidden">Fält 1<br /><input type="Text" value="Y1"></div>
<div id="y2" style="visibility:hidden">Fält 2<br /> <input type="Text" value="Y2"></div>

</body>
</html>

[/log]

[inlägget ändrat 2007-01-17 17:10:10 av Micke_skane]

18 januari, 2007

Tack, en liten justering bara : ) märkte att min förklaring av vad jag önskade var lite dålig...

Det ska vara så här:

Det finns totalt 7 fält (fält1, fält2 osv), när fält 1, fält3, fält4, fält5, eller fält6 är ifyllda så ska fältet Y1 visas, [FET]om ENDAST något av de övriga två fälten (fält2 eller 7) är ifyllda så ska istället Y2 visas och är fält 1, fält3, fält4, fält5, eller fält6 och även ngt av de övriga fälten ifyllda så ska enbart Y1 visas.[/FET] Så Y2 visas bara om något av fälten 2 och 7 är valda och övriga fält tomma.

18 januari, 2007

Okej

Tror jag förstod...

Ändra till denna:

[log]

if(CounterX>0&&CounterY>=0)
{
y1.style.visibility='';
y2.style.visibility='hidden';
}
else if(CounterX==0&&CounterY>0) {
y1.style.visibility='hidden';
y2.style.visibility='';
}
else {
y1.style.visibility='hidden';
y2.style.visibility='hidden';
}

[/log]

22 januari, 2007

Tack snälla : )

22 januari, 2007

Tack själv för poängen!

22 januari, 2007

En sista fråga,

kan man lätt koda om detta så att vilkoret blir: Y2 ska visas bara om något av fälten 2 och 7 är valda OCH fält 1 och fält 5 är i fyllda . I alla övriga val (dvs att fält 2 och 7 är tomma eller ifall fält 2 och 7 är ifyllda i kombination med att även fält 3,4,6 är ifyllda)så ska det vara Y1. Yi ska även visa när sidan laddas.

[inlägget ändrat 2007-01-22 16:01:02 av inka6]

22 januari, 2007

kan man lätt koda om detta så att vilkoret blir:

Driver du med mig?

Om nu 3,4 eller 6 är valt ska/får då 1 och 5 också vara valda?

Ska iväg nu och byta till vinterdäck(kul) men jag kollar senare ikväll om du svarat.

[inlägget ändrat 2007-01-22 16:15:57 av Micke_skane]

22 januari, 2007

Glöm mitt "svammel", har fixat till det och jag driver inte med dig, är bara urkass på javascript : )

Tack i varje fall!

22 januari, 2007

Bra att det löste sig!

Lite ironiskt undrade jag om du drev med mig angående att det ändrade sig igen. Så att jag fick göra om det igen

Din kunskap inom javascript skulle jag inte kommentera.

23 januari, 2007

: )

Jag får dock inte detta att fungera på radiobuttons och checkbuttons.

Är det ngn skillnad om man applicera denna funktion på en dropdown?

Behöver koden skrivas om då?

23 januari, 2007

Är det radiobuttons och/eller kryssrutor det handlar om behöver man skriva om koden.

Det går att lägga funktionsanropet på en dropdown-meny.

Visa/Berätta gärna i detalj hur det är tänkt att vara, för jag tog det för givit att det bara handlade om textrutor.

24 januari, 2007

Det är jag som är otydlig igen, sorry!

Skillnaden är att det förutom att anropet ska ligga på textfält och dropdowner även ska finnas på radio och checkbuttons, dvs om man gör ett val i radio eller checkbuttons så ska enbart Y1 visas, dvs vilkoret ska vara på samma sätt som tidigare dvs att:

Det finns totalt 7 fält (fält1, fält2 osv), när fält 1, fält3, fält4, fält5, eller fält6 är ifyllda så ska fältet Y1 visas, om ENDAST något av de övriga två fälten (fält2 eller 7) är ifyllda så ska istället Y2 visas och är fält 1, fält3, fält4, fält5, eller fält6 och även ngt av de övriga fälten ifyllda så ska enbart Y1 visas. Så Y2 visas bara om något av fälten 2 och 7 är valda och övriga fält tomma.

Krånglar detta til koden mycket?

Formulär med dolda fält

Rekommendera Poster

inka6

Länk till kommentar

Dela på andra webbplatser

tjoppas

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

tjoppas

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

tjoppas

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

tjoppas

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Micke_skane

Länk till kommentar

Dela på andra webbplatser

inka6

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 1 Medlem, 0 anonym, 44 gäster (Visa hela listan)

Populära medlemmar