Zur Navigation

Variable aus HTML-Formular an JavaScript übergeben

1 Andreas

Ich habe ein HTML-Dokument erstellt, in dem ein JavaScript eine Eingabe weiterverarbeiten soll. Im Moment hänge ich (nur noch) an der Stelle, dem Nutzer eine gute Möglichkeit zur Eingabe der Daten zu geben. Dazu nutze ich im Moment prompt(), was jedoch nicht wirklich schön ist.

Ganz nett fände ich eine Möglichkeit, über <form></form> die Eingabe abzufordern und die Daten an das JavaScript zu übergeben, welches dann auf einer neuen Seite das Ergebnis präsentiert. Ich habe allerdings den Eindruck, dass man den Inhalt eines <input>-Felds nicht einer JavaScript-Variable zuweisen kann.

Optimal wäre dabei, wenn man für die Eingabe einen "Datei öffnen"-Dialog hätte, da es sich bei den Daten typischerweise um Dateien handelt, die von den Skript interpretiert werden.

26.06.2007 21:38

2 Jörg Kruse

Hallo Andreas,

Ich habe allerdings den Eindruck, dass man den Inhalt eines <input>-Felds nicht einer JavaScript-Variable zuweisen kann.

Das funktioniert schon, siehe dieses Beispiel:

<script type="text/javascript">
function alertInputValue()
{
bla = document.getElementById('blubb').value;
alert(bla);
}
</script>

<form>
<input type="text" name="blubb" id="blubb" />
<button type="button" onclick="alertInputValue()">Los!</button>
</form>

Optimal wäre dabei, wenn man für die Eingabe einen "Datei öffnen"-Dialog hätte, da es sich bei den Daten typischerweise um Dateien handelt, die von den Skript interpretiert werden.

Ich bin mir noch nicht ganz sicher, ob ich dich richtig verstanden habe: möchtest du die Formular-Felder für den Dateiupload integrieren oder etwas aufbauen, was so ausschaut?

26.06.2007 21:59

3 Andreas

Ja prima - das mit der Übernahme des Wertes aus dem <input>-Feld in eine JavaScrip-Variable hat geklappt. Danke für deine Mühe :-)

BTW: Der Hinweis auf den Dialog zum Dateiupload ist schon genau das, was ich gesucht habe, jedoch kannte ich das schon. Ich wollte nach Möglichkeit ohne ein CGI-Skript den Inhalt der Datei weiterverarbeiten. Das geht mit der erwähnten Variante jedoch nicht.

Im Grunde möchte ich das <input>-Feld, in dem der Inhalt der Datei eingegeben (oder kopiert) wird durch ein Dialog ersetzen, in dem der User einfach den Pfad sowie den Namen der Datei eingeben kann und die Datei sowie dessen Inhalt eingelesen werden.

27.06.2007 21:50

4 Andreas

Ich habe noch mal eine Frage zu diesem Thema - ich möchte diesmal mehrere Variablen aus einem HTML-Formular an ein JavaScript übergeben. Leider habe ich wohl einen Denkfehler gemacht:

HTML-Formular
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="stauraum.js"></script>
</head>

<body>
<form>
<input name="PaketL" type="text" value="0" size="5" maxlength="5" id="PaketL">
<input name="PaketB" type="text" value="0" size="5" maxlength="5" id="PaketB">
<input name="PaketH" type="text" value="0" size="5" maxlength="5" id="PaketH">
<br><br>
<select name="Raum" size="1" id="Raum">
	<option value="0"> Bitte auswaehlen </option>
	<option value="1"> A </option>
	<option value="2"> B </option>
</select>
<br><br>
<input type="button" value="OK" onclick="Stauraum()">
<input type="reset" value="Loeschen">
</form>
</body>
</html>

Javascript
function Stauraum() {
var PaketL = document.getElementById('PaketL').value;
var PaketB = document.getElementById('PaketB').value;
var PaketH = document.getElementById('PaketH').value;
var Raum = document.getElementById('Raum').value;

document.charset = "UTF-8";
document.open("text/html");
document.write("<html>");
document.write("<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><\/head>");
document.write("<body>");
document.write(PaketL + PaketB + PaketH + Raum);
document.write("<\/body><\/html>");
document.close();
}

06.04.2008 11:57

5 Jörg Kruse

Die Variablen werden aber problemlos übergeben?

Falls du die Werte addieren statt zusammenfügen möchtest, musst du diese vorher in Integer umwandeln:

var PaketL = parseInt(document.getElementById('PaketL').value);
var PaketB = parseInt(document.getElementById('PaketB').value);
var PaketH = parseInt(document.getElementById('PaketH').value);
var Raum = parseInt(document.getElementById('Raum').value);

Oder liegt das Problem noch woanders?

06.04.2008 15:06

6 Andreas

Tja, nun frage mich wo das Problem lag - ich weiß es nicht. Bei mir funktioniert es jetzt auch :-)

Trotzdem danke für deine Mühe.

06.04.2008 15:34

... 1 Jahr und 7 Monate später ...

7 Andreas

Ich wärme mal das alte Thema auf: Diesmal möchte ich via <textarea> in einem HTML-Dokument einen Text einlesen, der XML ist. Ich glaube es liegt aber gar nicht an dem XML sondern viel mehr an der Art und Weise, wie ich eine Prüfung nach dem Browser mache:

if (document.implementation.createDocument) {
	xmlDokument = document.implementation.createDocument("", "", null);
	xmlDokument.onload = xmlAnalyse;
}
else if(window.ActiveXObject) {
	xmlDokument = new ActiveXObject("Microsoft.XMLDOM");
	xmlDokument.onreadystatechange = function () {
		if (xmlDokument.readyState == 4) xmlAnalyse()
		};
}

else {
	return;
}
xmlDokument.load("beispiel.xml");

Bislang habe ich mir damit beholfen die Datei via "XML-Daten.load("beispiel.xml");" zu laden. Die "document.getElementById('Textfeld-ID').value"-Methode funktioniert irgendwie nicht. Und, ja, es reicht natürlich nicht die letzte Zeile zu ersetzen ;-)

Irgendwie bin ich mir jedoch nicht sicher, wie ich die o.g. Prüfung dahingehend modifiziere, dass ich statt einer Datei den Inhalt des Textfeldes übernehme.

22.11.2009 17:58

8 Jörg Kruse

Ich glaube es liegt aber gar nicht an dem XML sondern viel mehr an der Art und Weise, wie ich eine Prüfung nach dem Browser mache

Das kannst du ja überprüfen:

if (document.implementation.createDocument) {
	alert('OK');
}

Irgendwie bin ich mir jedoch nicht sicher, wie ich die o.g. Prüfung dahingehend modifiziere, dass ich statt einer Datei den Inhalt des Textfeldes übernehme.

Das sollte wie im Beispiel in Beitrag 2 für die Input Felder auch so analog für Textareas funktionieren. Nur das "value" sich dann darauf bezieht, was zwischen <textarea> und </textarea> steht.

22.11.2009 20:10

9 Andreas

Hm ... das bringt mich noch nicht weiter.

Die o.g. Funktion ist darauf ausgelegt, eine Datei in Abhängigkeit der Fähigkeit des Browsers zu laden. Ich wollte eigentlich wissen, wie ich die Funktion anpassen muss, wenn ich anstatt einer Datei den Inhalt eines Textareas laden möchte. Das vielleicht einige Teile der Funktion (z.B. die Prüfung des Ladestatus der Datei) überflüssig sind, ist klar.

22.11.2009 20:30

10 Jörg Kruse

Die "document.getElementById('Textfeld-ID').value"-Methode funktioniert irgendwie nicht.

Bei mir funktioniert sie:

<script type="text/javascript">
function alertInputValue()
{
bla = document.getElementById('blubb').value;
alert(bla);
}
</script>

<form>
<textarea name="blubb" id="blubb"></textarea>
<button type="button" onclick="alertInputValue()">Los!</button>
</form>

22.11.2009 20:54