Formular Daten unterhalb ausgeben lassen

[emin7]

Hallo Leute,

Ich bin noch sehr unerfahren in javascript und nach langem googlen, bin ich noch auf keine sinnvolle Lösung gekommen.

Also hier meine Frage:

Ich habe ein Formular erstellt (mittels HTML) und will mit JS eine Funktion schreiben, die mir die Daten vom Formular, immer nach dem Absenden des Formulars, unterbei (in einer Tabelle) ausgibt.

Meine Formulareingaben sind: Firmenname, Email, TelNummer, Datum, Uhrzeit.

nach jedem Klick auf den "Senden"-Button soll in der Tabelle (geordnet nach Datum) der neue Eintrag reingeschrieben werden.

Nachdem ich durch googlen nicht besonders viel verstanden habe und nichts wirklich sinnvolles gefunden habe, hoffe ich auf ein Glück in diesem Forum.

Ich bedanke mich im vorhinein schon!

Lg
Emin

 

[tombe]

Was passiert wenn du das Formular abschickst.
Sollen sie dann nur auf der Seite angezeigt werden oder werden sie zusätzlich noch in einer Datenbank o.ä. gespeichert?

Das Anzeigen/Ausgeben selber ist noch nicht einmal das Problem. Wenn die Angaben dann aber vorher noch nach Datum und Uhrzeit sortiert werden müssen, wird es schwieriger.

 

[emin7]

Hallo,

nein, muss nur ausgegeben werden .. bei jedem Button Klick soll ein neuer Eintrag in der Tabelle ausgegeben werden.

Für mich wärs schon mal ein riesenerfolg, wenn es so funktioniert, dass jeder Eintrag nach nem Klick untereinander ausgegeben wird

 

[tombe]

So auf die Schnelle zusammen mit jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#abschicken").click(function () {
		zeile = "<tr><td>" + $("#vorname").val() + "</td><td>" + $("#nachname").val() + "</td><td>" + $("#email").val() + "</td></tr>";
		$("#tabelle").append(zeile);
	});
});
</script>

<form name="form" action="test.html" method="get">
<input type="text" id="vorname" name="vorname" value="" size="20" />
<br />
<input type="text" id="nachname" name="nachname" value="" size="20" />
<br />
<input type="text" id="email" name="email" value="" size="20" />
<br />
<input type="button" id="abschicken" name="abschicken" value="Abschicken" />
</form>

<table id="tabelle">
	<tr>
		<td>Vorname</td><td>Nachname</td><td>Email</td>
	</tr>
</table>

Mit append wird nach dem Klicken auf dem Button einfach eine neue Zeile ans Ende der Tabelle angehängt und die Werte eingetragen.

 

[emin7]

Sehr nett !

Nur darf ich kein jquery verwenden (hab ich vergessen zu erwähnen tut mir leid) !

:/

 

[tombe]

Ok, dann mit "einfachem" Javascript:

<script language="javascript" type="text/javascript">
zeilen = 0;
function liste() {
	zeilen++;
	var table = document.getElementById("tabelle");
	var row = table.insertRow(zeilen);
	var cell1 = row.insertCell(0);
	var cell2 = row.insertCell(1);
	var cell3 = row.insertCell(2);
	cell1.innerHTML = document.getElementById("vorname").value;
	cell2.innerHTML = document.getElementById("nachname").value;
	cell3.innerHTML = document.getElementById("email").value;
}
</script>

<form name="form" action="test.html" method="get">
<input type="text" id="vorname" name="vorname" value="" size="20" />
<br />
<input type="text" id="nachname" name="nachname" value="" size="20" />
<br />
<input type="text" id="email" name="email" value="" size="20" />
<br />
<input type="button" id="abschicken" name="abschicken" value="Abschicken" onclick="liste()"/>
</form>

<table id="tabelle" border="1">
	<tr>
		<td>Vorname</td><td>Nachname</td><td>Email</td>
	</tr>
</table>

 

[emin7]

Danke sehr cool !

gibt es da noch ne Möglichkeit, dass die neuen Zeilen unterhalb erzeugt werden?
jetzt werden die Daten immer eine Reihe drüber reingeschrieben?

Ich bedanke mich von ganzen Herzen !

 

[tombe]

Klar geht das, dazu musst du einfach die Variable zeilen löschen und bei insertRow fest den Wert 1 eintragen

<script language="javascript" type="text/javascript">
function liste() {
    var table = document.getElementById("tabelle");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = document.getElementById("vorname").value;
    cell2.innerHTML = document.getElementById("nachname").value;
    cell3.innerHTML = document.getElementById("email").value;
}
</script>

 

[emin7]

cool

Eine letzte Frage habe ich noch, danach verschone ich dich )

und zwar: Ich will dass in meiner Tabelle auch die Auswahl der Checkbox ausgegebn wird.

sieht bei mir jetzt so aus:

Javascript:
//.....
var table = document.getElementById('anfragetabelle');
var row = table.insertRow(zeilen);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = document.getElementById('name').value;
cell2.innerHTML = document.getElementById('email').value;
cell3.innerHTML = document.getElementById('tel').value;

if(document.getElementById('auswahl1').value){
cell4.innerHTML = document.getElementById('auswahl1').value;
}else if(document.getElementById('auswahl2').value){
cell4.innerHTML = document.getElementById('auswahl2').value;
}else if(document.getElementById('auswahl3').value){
cell4.innerHTML = document.getElementById('auswahl3').value;
}else if(document.getElementById('auswahl4').value){
cell4.innerHTML = document.getElementById('auswahl4').value;
}

cell5.innerHTML = tag +'.'+monat + '.'+jahr ;
cell6.innerHTML = document.getElementById('time').value;

html:
/....
<label>Auswahl der angefragten Leistungen</label><br>

<input type="radio" id="auswahl1" name="fensterreinigung" value="fensterreinigung"> Fensterreinigung<br>

<input type="radio" id="auswahl2" name="Hausbetreuung" value="Hausbetreuung"> Hausbetreuung<br>

<input type="radio" id="auswahl3" name="Teppichreinigung" value="Teppichreinigung"> Teppichreinigung<br>

<input type="radio" id="auswahl4" name="Schwimmbadreinigung" value="Schwimmbadreinigung"> Schwimmbadreinigung<br>

<input type="radio" id="auswahl5" name="Dachreinigung" value="Dachreinigung"> Dachreinigung<br>
//.....


Mein Problem:

Egal welches ich auswähle beim AnfrageFormular, es wird immer die "auswahl1" (in dem Fall fensterreinigung) ausgegeben ...

kann ich das so irgendwie noch lösen oder ist das nicht besonders klug gerade was ich versuche?

Lg
Emin

 

[tombe]

Ist doch klar warum du immer diesen Wert bekommst. Du prüfst ob die Value-Eigenschaft einen Wert hat, nicht ob es ausgewählt ist oder nicht!

Außerdem haben bei dir alle Radiobuttons unterschiedliche Namen und das bedeutet das du nicht nur einen sondern mehrere auswählen kannst (aber nicht mehr abwählen). Sie müssen alle den gleichen Namen aber eine unterschiedliche ID haben, dann klappt es mit folgendem Code:

if (document.getElementById("auswahl1").checked == true) {
	cell4.innerHTML = document.getElementById("auswahl1").value;
	document.getElementById("auswahl1").checked = false;
} else if (document.getElementById("auswahl2").checked == true) {
	cell4.innerHTML = document.getElementById("auswahl2").value;
	document.getElementById("auswahl2").checked = false;
} else if (document.getElementById("auswahl3").checked == true) {
	cell4.innerHTML = document.getElementById("auswahl3").value;
	document.getElementById("auswahl3").checked = false;
} else if (document.getElementById("auswahl4").checked == true) {
	cell4.innerHTML = document.getElementById("auswahl4").value;
	document.getElementById("auswahl4").checked = false;
} else if (document.getElementById("auswahl5").checked == true) {
	cell4.innerHTML = document.getElementById("auswahl5").value;
	document.getElementById("auswahl5").checked = false;
} else {
	cell4.innerHTML = "Keine Auswahl";
}

Hier wird geprüft was ausgewählt wurde und dieser Wert wird dann in die Tabelle eingetragen und die Auswahl wieder aufgehoben.

Falls du noch weitere Fragen oder Probleme hast dann darfst du dich genre wieder melden, nur eine Bitte. Wenn du Code einstellst, dann formatiere ihn entsprechend damit er auch lesbar ist.