Fylla i ett formulär, spottar ut värdet i en 'text area'

11 svar · 623 visningar · startad av flowerpot 13 juni 2011

flowerpotMedlem sedan nov. 20048 inlägg

Frågan13 juni 2011 08:50#1

Hej hallå!

Behöver lite hjälp med detta.
Jag håller på att skapar ett formulär som jag vill ska spotta ut värdet i en text area.

Just nu ser det ut så här

<form name="exempel" action="#" onsubmit="output(); return false"> 
			<fieldset> 
				<legend> 
					<b>Ruta 1</b>
					<br>
				</legend> 
				<label> 
					Ruta 2
					<input id="ruta2" name="Ruta2" type="text" size="25"> 
				</label> 
				<label> 
					Ruta 3
					<input id="ruta 3" name="ruta 3" type="text" size="25" maxlength="20" size="25"> 
				</label> 
				<label>
				Fråga ? 
				<input type="radio" name="fraga" value="Ja" /> Yes<input type="radio" name="fraga" value="Nej" checked/> No
</label>
			</fieldset> 
		<input type="submit" value="Send" />
		</form>

Trycker man på skicka-knappen så öppnas personens defaulta mejlprogram där allting är redan förifyllt.

Istället för att öppna mejlkienten vill jag att allting ska hamna i en textarea

<TEXTAREA NAME="output" COLS=40 ROWS=6></TEXTAREA>

Så att personen kan själv kopiera informationen och själv styra var man vill klistra in det.

Jag är verkligen amatör på javascript, men förstår att man hookar på cllick, hämtar fält i formen, printar ut i textarean. Google ger mig inte så mycket hjälp, och skulle vara jättetacksam om någon skulle vilja hjälpa mig!

Tack på förhand!

voigtann1Medlem sedan juni 20019 519 inlägg

13 juni 2011 09:01#2

Kan du redigera HTML koden? i så fall sätt ett ID på ditt formulär och gärna på din textarea också, känns som det är rätt enkelt med jquery, få man fråga varför du vill göra på detta sätt?

flowerpotMedlem sedan nov. 20048 inlägg

13 juni 2011 09:09#3

voigtann1 skrev:

Kan du redigera HTML koden? i så fall sätt ett ID på ditt formulär och gärna på din textarea också, känns som det är rätt enkelt med jquery, få man fråga varför du vill göra på detta sätt?

Det är koden ovan jag måste få denna funktion på.
Jag vill ha det så här bara för att personen som fyller i ska kunna välja själv vart det skall klistras in. Vet inte hur jag ska förklara, men det är absolut bästa lösningen :)

Har dock noll koll kokosboll på hur jag ska fixa till detta :/
Googlar som en tok efter kod jag kan kopiera, men lyckas inte hitta något.

flowerpotMedlem sedan nov. 20048 inlägg

13 juni 2011 09:12#4

Har redigerat första inlägget nu.
Så att formuläret har <form name="exempel" action="#" onsubmit="output(); return false">
Som då ska hamna i
<TEXTAREA ID="output" COLS=40 ROWS=6></TEXTAREA>

Det är allt där emellan som jag har noll koll kokosboll på...

The_HulkMedlem sedan juni 20031 837 inlägg

13 juni 2011 10:55#5

Observera att det är skillnad på attributen "name" och "id".
Värdet på "id" måste vara unikt medan flera element kan ha samma värde på attributet "name".

Så ändra

<TEXTAREA NAME="output" COLS=40 ROWS=6>

till

<TEXTAREA NAME="output" id="output" COLS=40 ROWS=6>

flowerpotMedlem sedan nov. 20048 inlägg

13 juni 2011 11:23#6

Blir tokig på detta problem.
Googlat om det hela dagen och får inte till en lösning.

Någon som vill hjälpa mig? Eller är det rätt så bökigt att fixa en sån här lösning?

voigtann1Medlem sedan juni 20019 519 inlägg

13 juni 2011 11:31#7

Nej, det är inte bökigt att lösa:
1. Hur skall output bli?
2. Var är output-textarean är den i formuläret?

Varför gör du detta? Skickar du output till en server så ser jag inte alls varför du skall göra detta med Javascript om du postar det till ett formulär ändå.

Har du möjlighet att ändra HTML innehållet så bli det ännu lättare, därav min fråga.

flowerpotMedlem sedan nov. 20048 inlägg

13 juni 2011 11:49#8

Här är hela koden. Slängde även upp den här
http://dl.dropbox.com/u/8579636/exempel.html
Output ska bli exakt som det blir att stå om du trycker på "send"-knappen, det som blir ifyllt i mejlprogrammet.

Jag gör det mest för mig själv, för att jag har massa grejer att fylla i ibland, så behöver jag en enhetlig mall som jag kan använda. Det är rätt så bökigt att öppna mejlklienten varje gång, sen kopiera klistra därifrån.

<html>
<head><title>Mall</title>
<style type="text/css">
body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }
</style>
</head>
<body>
<h1>Mall</h1>

<br><br>
		<form action="mailto:this@is.for.testing.purpose.only?subject=Och jag vill inte att man ska behöva mejla in detta! Utan det som kommer i mejlet, vill jag ha i en text area." method="post" enctype="text/plain"> 
			<fieldset> 
				<legend> 
					<b>Nytt</b>
					<br>
				</legend> 
				<label> 
					X
					<input id="X" name="X" type="text" size="25" /> 
				</label> 
				<label> 
					Y
					<input id="Y" name="Y" type="text" size="25" /> 
				</label> 
				<label> 
					Z
					<input id="Z" name="Z" type="text" size="25" maxlength="20" size="25" /> 
				</label> 
			</fieldset> 
			<fieldset> 
				<legend> 
					<b>Nytt 2</b>
				</legend> 
				<label> 
					XX
					<input id="XX" name="XX" type="text" size="25" /> 
				</label> 
				<label> 
					YY
					<input id="YY" name="YY" type="text" maxlength="20" size="25" /> 
				</label> 
			</fieldset> 
			<fieldset>
			<legend>
			<b>Inställningar</b>
			</legend>
			
			Fråga 1? <input type="radio" name="fraga1" value="Ja" /> Yes<input type="radio" name="fraga1" value="Nej" checked/> No
			<br>
			Fråga 2? <form><input type="radio" name="fraga2" value="Ja" /> Yes<input type="radio" name="fraga2" value="Nej" checked/> No
			<br>
			Fråga 3? <input type="radio" name="fraga3" value="Ja" /> Yes<input type="radio" name="fraga3" value="Nej" checked/> No
			<br>
			</fieldset>
			
			<fieldset>
			<legend>
			<b>Inställningar 2</b>
			</legend>
			Fråga 1.1? <input type="radio" name="fraga11" value="Ja" /> Yes<input type="radio" name="fraga11" value="Nej" checked/> No
			</fieldset>
		<input type="submit" value="Send" />
		<br><br>
		<textarea rows="20" cols="40">Skulle vara askalas om allting hamnade här när man trycker på knappen. Vill inte att mejlprogrammet skall öppnas.</textarea>
		</form> 
		</body>
		</html>

voigtann1Medlem sedan juni 20019 519 inlägg

13 juni 2011 12:00#9

Jag tar det för givet att du KAN redigera din HTML:

http://jsbin.com/uyesi4/edit

så bli det med tillsammans med jquery.

voigtann1Medlem sedan juni 20019 519 inlägg

13 juni 2011 12:13#10

Eller utan jquery fast du få binda onsubmit:

<form action="mailto:this@is.for.testing.purpose.only?subject=Och jag vill inte att man ska behöva mejla in detta! Utan det som kommer i mejlet, vill jag ha i en text area." method="post" enctype="text/plain" onsubmit="return output(this);">

och kör JS koden:

var output = function(el) {
	var inputs = el.getElementsByTagName("input"),
		result = document.getElementById("result"),
		str = "";
	
	for(var i=0,l=inputs.length;i<l;i++) {
		var input = inputs[i];
		if(input.type !== "submit") {
			str+= input.name + "=" + input.value + "\n";
		}
	}
	
	result.value = str;
	return false;

};

flowerpotMedlem sedan nov. 20048 inlägg

13 juni 2011 13:27#11

Guld värt!
Du är en klippa!
Tack så mycket för hjälpen!

voigtann1Medlem sedan juni 20019 519 inlägg

13 juni 2011 13:34#12

Var så lite så ;)

Glöm inte att sätta tråden som löst.