fORMULÄR

[Lindacharlotta]

Jag har ett formulär med en massa fält som ska skickas via mail. Använder mig inte utav en databas, allting sparas i

upload.form(namnpåfält)

 

Nu ska jag ha två select fält där den andras värde är beroende av den vad man väljer i den första och efter det ska man även kunna skriva in antal... En knapp ska finnas "Lägg till"

Vad man valt ska då visas i text nedanför. Man ska kunna lägga till hur många fält man vill....

 

När man är klar med hela formuläret trycker man på skicka o allt skickas iväg...

 

Någon som kan förklara hur jag bäst går till väga här? Ska jag göra ett formulär i formuläret eller...?

 

Väldigt tacksam för hjälp!

 

/ Linda

 

[Cluster]

Har inte läst igenom hela denna tråd men där tycks Micke ta upp hur man (mha javascript) lägger till formulärfält dynamiskt.

//eforum.idg.se/viewmsg.asp?EntriesId=890266

 

/Cluster

------------------------------------------------------------

Ditt vetande är värdelöst om inte andra vet att du vet

-----------> http://eforum.kicks-ass.net <------------

 

[Lindacharlotta]

Det var inte riktigt som jag hafe tänkt mig...

 

Just nu har jag suttit och testat att skriva till en textfil och sedan läsa in det igen.. Men då laddas ju sidan om och resten av formuläret får inte påverkas...

Någon som har en bra ide hur jag kan lösa det?

 

/ LInda

 

[zzzimon]

Hej, nu vet jag inte om jag förstått allt utan bara slänger ut lite..

 

För att ändra den andra selecten när användaren väljer i den första kan du använda onChange:

<select id=sel1 onchange="updateSelect2()">

 

För att skapa nytt innehåll i den andra select-

boxen kan du skriva:[log]

function updateSelect2() {
 var sel1 = document.getElementById(''''sel1'''');
 var sel2 = document.getElementById(''''sel2'''');
 sel2.options.length=0; // tömmer listan
 if (sel1.value=="val 1") {
   sel2.options[0]=new Option("val 1,1","val 1,1");
   sel2.options[1]=new Option("val 1,2","val 1,2");
   sel2.options[2]=new Option("val 1,3","val 1,3");
 }
 if (sel1.value=="val 2") {
   sel2.options[0]=new Option("val 2,1","val 2,1");
   sel2.options[1]=new Option("val 2,2","val 2,2");
   sel2.options[2]=new Option("val 2,3","val 2,3");
 }
 // .. eller generera ovanstående med nån serverscript
}

[/log]

 

När användaren trycker på "Lägg till" så ska informationen sugas upp från formuläret och läggas till i nån div kanske.

Om du har namngett din div med t.ex. idt "box"

så borde du kunna skriva nåt i stil med:[log]

function lagg_till() {
 var sel1 = document.getElementById(''''sel1'''');
 var sel2 = document.getElementById(''''sel2'''');
 var antal = document.getElementById(''''antal'''');
 var str = antal+" "+sel1.value+" "+sel2.value+"<br>";
 document.getElementById(''''box'''') += str;
}

<input type=button onClick="lagg_till()">

[/log]

 

 

mvh Simon

 

 

RED: Oj såg inte att du vill skicka iväg allt också.

Du kan ju ha ett hidden-fält där du tillfogar nya valda saker hela tiden. Du kan separera sakerna med något tecken, t.ex. # och sedan på serversidan så kan du använda någon split-funktion och splitta dels efter #-separatorn, och sedan på nästa nivå efter mellanslag-separatorn för att få ut antal, värde 1 och värde 2.[log]

<input type=hidden name="valda_saker" value="">

function lagg_till() {
 var sel1 = document.getElementById(''''sel1'''');
 var sel2 = document.getElementById(''''sel2'''');
 var antal = document.getElementById(''''antal'''');
 var str = antal+" "+sel1.value+" "+sel2.value;  
 document.getElementById(''''valda_saker'''') += str+"#";
 document.getElementById(''''box'''') += str+"<br>";
}

[/log]

 

Inte helt korrekt kanske, men nåt i den stilen

[inlägget ändrat 2008-01-29 17:10:37 av zzzimon]

 

KOD- och LOG-taggar tillagda av moderator

 

[inlägget ändrat 2008-01-30 18:59:40 av Cluster]

[Lindacharlotta]

Tack för din hjälp...

 

Jag kan inte få DIV-taggen att skriva ut ngt.

Jag får select att fungerar, men när jag trycker på div, så skrivs ingenting ut...

vad kan vara fel?

 

/ Linda

 

[Micke_skane]

men när jag trycker på div, så skrivs ingenting ut...

Vad menar du? På vilket sätt "trycker" du på en div?

 

[Lindacharlotta]

oj, det blev fel..

Jag menade när jag trycker på knappen, så syns inte in div....:-)

Så här ser min kod ut:

Hur o var skriver jag div-taggen...?

Kan jag bara skriva <div id="box">IE klagar på denna raden

document.getElementById('box') += str;

 

 

<select name="countries" id="countries" size="1" onChange="updatecities(this.selectedIndex)" style="width: 150px">
										<option selected>Select A City</option>
										<option value="usa">USA</option>
										<option value="canada">Canada</option>
										<option value="uk">United Kingdom</option>
									</select>

									<select name="cities" size="1" style="width: 150px">
									</select>

									Antal:<input type="text" name="antal" id="antal">
									<input type="button" value="lägg till" onClick="lagg_till()">

									<SCRIPT LANGUAGE="JavaScript">
										<!--

										var countrieslist=document.form.countries
										var citieslist=document.form.cities

										var cities=new Array()
										cities[0]=""
										cities[1]=["New York", "Los Angeles", "Chicago", "Houston", "Austin"]
										cities[2]=["Vancouver", "Tonronto", "Montreal", "Calgary"]
										cities[3]=["London", "Glasgo", "Manchester", "Edinburgh", "Birmingham"]

										function updatecities(selectedcitygroup){
										citieslist.options.length=0
										if (selectedcitygroup>0){
										for (i=0; i<cities[selectedcitygroup].length; i++)
										citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
										}
										}


										function lagg_till() {
										var countries = document.getElementById('countries');
										var cities = document.getElementById('cities');
										var antal = document.getElementById('antal');
										var str = antal+" "+countries.value+" "+cities.value+"<br>";
										document.getElementById('box') += str;
										}
										//-->
									</SCRIPT>

/ Linda

 

[inlägget ändrat 2008-01-30 11:24:58 av Lindacharlotta]

[Jonas__B]

Vilken knapp?

Och "in div", vad är det?

 

Har du en sida du kan visa upp?

 

 

[Micke_skane]

Är det en div bör det vara:

document.getElementById('box').innerHTML += str;

 

Satte mig inte in i hela koden.

 

O ja, det är bara att skapa en div så som du visade

<div id="box"></div>

 

[inlägget ändrat 2008-01-30 11:37:20 av Micke_skane]

[Lindacharlotta]

Får felmeddelande...

Fel antal argument eller felaktig egenskapstilldelning

Felmeddelande denna rad:

document.getElementById('box') += str;

 

Jag lade

<div id="box"></div> efter javascriptet, eftersom jag vill att informationen skall skrivas ut där...

 

/ Linda

 

[zzzimon]

Aj, ja jag missade lite där.

Som sagt det ska alltså vara

 

document.getElementById('box').innerHTML += str+"<br>";

 

[Micke_skane]

Felmeddelande denna rad:

document.getElementById('box') += str;

Såg du inte hela mitt inlägg

 

efter javascriptet, eftersom jag vill att informationen skall skrivas ut där...

Javascriptet-delen kan(ska) ligga mellan head-taggarna. Formuläret läggs som vanligt inom body-taggarna.

 

JS-filen kan även ligga som en egen fil som man länkar in. Detta rekommenderar jag!

 

[inlägget ändrat 2008-01-30 13:23:37 av Micke_skane]

[Lindacharlotta]

Tack för er hjälp...

Nu har lagt in all javascript i en egen fil:

var countrieslist=document.form.countries
										var citieslist=document.form.cities

										var cities=new Array()
										cities[0]=""
										cities[1]=["New York", "Los Angeles", "Chicago", "Houston", "Austin"]
										cities[2]=["Vancouver", "Tonronto", "Montreal", "Calgary"]
										cities[3]=["London", "Glasgo", "Manchester", "Edinburgh", "Birmingham"]

										function updatecities(selectedcitygroup){
										citieslist.options.length=0
										if (selectedcitygroup>0){
										for (i=0; i<cities[selectedcitygroup].length; i++)
										citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
										}
										}


										function lagg_till() {
										var countries = document.getElementById('countries');
										var cities = document.getElementById('cities');
										var antal = document.getElementById('antal');
										var str = antal+" "+countries.value+" "+cities.value+"<br>";											
										document.getElementById('box').innerHTML += str+"<br>";

										}

 

Så fort jag flyttat javascriptet från body slutar select(kommer inte upp några val i sub) att fungera...

Har jag javascript i body-taggen (fungerar select)och trycker på lägg till:

så kommer [object] land-det man valt...suck.. :-)

<select name="countries" id="countries" size="1" onChange="updatecities(this.selectedIndex)" style="width: 150px">
										<option selected>Select A City</option>
										<option value="usa">USA</option>
										<option value="canada">Canada</option>
										<option value="uk">United Kingdom</option>
									</select>

									<select name="cities" size="1" style="width: 150px">
									</select>

									Antal:<input type="text" name="antal" id="antal">
									<input type="button" value="lägg till" onClick="lagg_till()">


									<div id="box"></div>

Varför går det inte när jag flyttar javascriptet?

/ Linda

 

[inlägget ändrat 2008-01-30 14:02:34 av Lindacharlotta]

[Micke_skane]

Har du länkat in js-filen?

Ex:

<script type="text/javascript" src="dinjsfil.js"></script>

 

Har inte tid just nu men kan kolla ikväll på din kod(om jag kommer ihåg det).

 

[inlägget ändrat 2008-01-30 14:10:17 av Micke_skane]

[Lindacharlotta]

Japp... :-)

 

Detta felmeddelande finns på sidan:

'citieslist options' är null eller inte ett objekt!

[inlägget ändrat 2008-01-30 14:13:11 av Lindacharlotta]

[Micke_skane]

Det jag snabbt tror se är att du får ladda in värdena i arrayerna med en funktion som du anropar med onload.

 

Ska iväg nu men kan kolla mer sen om ingen annan hunnit kolla.

 

[zzzimon]

Hej, såg en till bugg i min kod dessvärre, som gör

att det skrivs ut [object] istället för antalet.

Det ska stå

 

var str = antal.value+ " " + countries.value +" "+cities.value+"<br>";

 

Hur är det med städerna? Skrivs de inte ut?

Jag tror de kan bero på när cities select box uppdateras:

 

new Option(cities[selectedcitygroup].split("|")[0], cities[selectedcitygroup].split("|")[1])

 

Konstruktorn new Option ska ta två argument, där det första

är namnet som ska visas i select-boxen, och det andra är

desss motsvarande value.

Som jag ser det är gjort nu så splittas staden på | tecknet

men vad jag ser finns inget | tecken i dina städer. Jag vet

inte riktigt hur det är tänkt men om du skriver så här istället

borde det fungera:

 

new Option(cities[selectedcitygroup], cities[selectedcitygroup])

 

 

Varför det inte funkar att ha scriptet egen fil vet jag däremot

inte :-/

 

mvh Simon

 

[Anjuna Moon]

Lägg följande två rader i en funktion istället

function Init() {
var countrieslist=document.form.countries
var citieslist=document.form.cities
}

och lägg till ett anrop i BODY

<body onload="Init();">

Anledningen till att det inte fungerar annars är att formuläret inte har hunnit skapas ännu när javascriptet körs och därför tilldelas inga giltiga värden i ovanstående två rader.

 

[Lindacharlotta]

Japp, nu fungerar det... :-)

 

Hjälpte med

<body onload="Init();">

 

Tackar för hjälpen...!

 

Jag skulle behöva få in en delete-knapp på var beställningsrad med....

Ifall man skriver fel eller ångrar sig...

 

Går det att lösa med tanke på att alla val man gör sparas i <input type=hidden name="valda_saker" value="">

Då måste man kunna ta bort där med ju...

 

 

/ Linda

 

[inlägget ändrat 2008-01-30 16:13:19 av Lindacharlotta]

[inlägget ändrat 2008-01-30 21:40:54 av Lindacharlotta]

[inlägget ändrat 2008-01-30 21:43:08 av Lindacharlotta]

[Lindacharlotta]

Jag kan inte få värdena i boxa att följa med i mailet..

Jag har lagt ut:

<input type=hidden name="valda_saker" value="">

 

Och även lagt in:

document.getElementById('valda_saker') += str+"#";

i function lagg_till()

 

Men det kommer inga värde med i mailet...

Något jag saknar?

 

/ Linda

 

 

 

[Micke_skane]

På väg ut men lite korta saker.

 

Är värdena med in i hidden-fältet?

Skiv ut värdet för att kolla.

 

Följer värdena med upp till "skicka-sidan"?

Skriv ut värdena för att kolla.

 

 

[zzzimon]

Hej

Det är dessvärre min kod igen som spökar..

 

Det ska vara:

 

document.getElementsByName('valda_saker')[0] += str+"#";

 

eftersom koden använder name-attributet i input-taggen

och inte id.

 

I värsta fall om inte ovan fungerar av någon anledning, återställ den ursprungliga raden, och lägg in ett id='valda_saker' vid sidan om name='valda_saker' i input-taggen.

 

 

[Lindacharlotta]

Jag har hela tiden haft ett id="valda_saker... har ändå inte gått...

När jag ändrar till din kodrad så går det inte....

 

Efter jag tryckt på lägg till knappen, syns i vänstra härnet av webbläsaren ett felmeddelande..

 

Objektet stödjer inte egenskapen eller metoden...

 

/ LInda

 

[Anjuna Moon]

Är du säker på att du inte bara gjort något versal/gemen-fel i dina javascript? Svårt att hjälpa utan tillgång till hela den befintliga koden.

 

[zzzimon]

Det är möjligt att man måste använda name="valda_saker"

och inte id="valda_saker" i input-taggarna eftersom webb-läsaren

kanske inte submittar namn-lösa formulärfält.

 

<input type=hidden name="valda_saker" value="">

 

Använd därtill alltså min förslagna rad:

 

document.getElementsByName('valda_saker')[0] += str+"#";

 

Du kanske dock redan provet detta.