Methode appendData() [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
Methode appendData()

JohnWorksCooper

26-02-2010, 19:28

:hallo:

Leider bin ich in JavaSkript nicht so bewandert und habe eigentlich vor ein DB-Übung zu veranstalten (http://www.php-resource.de/forum/php-developer-forum/98926-warenkorb-problem.html). Hierzu brauche ein wenig JS. Ich habe ein Formular in dem alle Daten erfasst werden, nun tüfftel ich grad an einer Möglichkeit mehre CDs zum absenden hinzuzufügen.

Aus der DropDown Box soll die CD ausgewählt. Die Menge soll in das Input-Feld eingeben werden.

Die Werte sollen dann in der DIV Box als weitere Zeile ausgeben werden.

<select name="cd">
<option value="1">Fettes Brot - Strom und Drang</option>
</select>
<input name="menge" type="text" />
<input name="Submit" type="submit" value="Hinzufügen" />

<hr>

<div id="ausgabe">
<table>
<tr>
<td>Album</td>
<td>Menge</td>
<td>Löschen</td>
</tr>

</table>

</div>

AmicaNoctis

26-02-2010, 19:38

und wie lautet jetzt die Frage? :confused:

JohnWorksCooper

26-02-2010, 19:45

Die Frage ist wie ich das in JavaScript umsetze :p ob das überhaupt mit appendData() geht?

AmicaNoctis

26-02-2010, 19:53

Mit appendData in diesem Falle eher nicht, aber mit DOM-Manipulation im Allgmeinen schon. Informiere dich über DOCUMENT.createElement, DOCUMENT.createTextNode, NODE.appendChild und die rows-Collection von HTMLTableElement.

Ein JS-Tutorial ist vielleicht auch eine gute Idee.

Mehr gibt es dazu nicht zu sagen, das ist ein Hilfeforum und keine Volkshochschule. ;)

Gruß,

Amica

Kropff

26-02-2010, 21:27

Habe heute meinen Gutmütigen. Daher mal auf die Schnelle und nur zur Anschauung:

<script type="text/javascript">
function setAlbum()
{
var ele = document.bla.cd;
var index = ele.selectedIndex;
var album = ele.options[index].firstChild.data;
document.getElementById('album').firstChild.data += album;
}
function setNum()
{
if (!isNaN(document.bla.menge.value))
{
document.getElementById('menge').firstChild.data += document.bla.menge.value;
}
}
</script>
<form name="bla">
<select name="cd" onchange="setAlbum();">
<option value="0">----</option>
<option value="1">bla</option>
<option value="2">blubb</option>
<option value="3">blubber</option>
</select>
<input name="menge" type="text" onkeyup="setNum();" />
</form>
<hr>

<table>
<tr>
<td id="album">Album: </td>
<td id="menge">Menge: </td>
<td>Löschen</td>
</tr>
</table>

Ansonsten empfehle ich dir diese Einführung (http://www.peterkropff.de/site/javascript/dom_manipulation.htm) und die entsprechenden Tutorials (http://www.peterkropff.de/site/tutorials/javascript_dom.htm).

Peter

JohnWorksCooper

04-03-2010, 17:12

DIE FINALE LÖSUNG!

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Album</title>
<script type="text/javascript" src="settings/jquery.js"></script>

<script type="text/javascript">

var i = 1;

function addProduct() {
cd = $('#cd option:selected').text()
menge = $('#menge').val();

$('#ausgabe').append('<tr id="ausgabenzeile_'+i+'"><td>'+cd+'</td>
<td>'+menge+'</td><td><input name="Submit" type="submit"
value="Löschen" onclick="removeProduct('+i+')" /></td></tr>');

i++;

}

function removeProduct(id) {
$('#ausgabenzeile_'+id).fadeOut('slow',function(){
$(this).remove();
});
}

</script>

</head>

<body>

<select name="cd" id="cd">
<option value="1">Fettes Brot - Strom und Drang</option>
<option value="1">Fettes Brot - Fettes</option>
<option value="1">Fettes Brot - Brot</option>

</select>

<input name="menge" id="menge" type="text" />
<input name="Submit" type="submit" value="Hinzufügen" onclick="addProduct()" />

<hr>

<div >
<table id="ausgabe">
<tr>
<td>Album</td>
<td>Menge</td>
<td>Löschen</td>
</tr>

</table>
</div>

</body>

</html>

Kropff

04-03-2010, 17:19

DIE FINALE LÖSUNG!
Da haben wir mal wieder ein schönes Beispiel dafür, dass man für eine Kleinigkeit sofort ein monstermäßiges JavaScript-Framework braucht. Aber jedem das Seine. :)

Peter

AmicaNoctis

04-03-2010, 17:25

Da haben wir mal wieder ein schönes Beispiel dafür, dass man für eine Kleinigkeit sofort ein monstermäßiges JavaScript-Framework braucht. Aber jedem das Seine. :)

:) Das dachte ich mir auch, aber das ist halt der Geist der Zeit: Es muss ja auch das neueste 4-Kern-Prozessor-, 8GB-RAM-, 1,5-TB-HDD-, Ultra-WXGA-Doppelplus-Notebook sein, damit die kleine Sophia-Dörte Schmidt abends zwei Stunden mailen und chatten kann ;)

unset

04-03-2010, 17:30

Und das "Monster-Framework" läuft selbst auf meinem Pissels-Smartphone ohne Probleme ;)

Kropff

04-03-2010, 17:45

Und beim nächsten kleinen Problem kommt noch ein Framework und noch eins und noch eins. :)

Außerdem bin ich der Meinung, dass man mit JavaScript-Frameworks erst dann arbeiten sollte, wenn die Sprache auch richtig beherrscht.

Peter

JohnWorksCooper

04-03-2010, 20:50

Da haben wir mal wieder ein schönes Beispiel dafür, dass man für eine Kleinigkeit sofort ein monstermäßiges JavaScript-Framework braucht. Aber jedem das Seine. :)

Peter

Jaaaa... das war dann nachdem ich die Tuts durchgemacht hab und mich mal an ein Framework rangetraut habe! Klar geht es auch OHNE Framework!

:rocks:

Kropff

04-03-2010, 22:05

Jaaaa... das war dann nachdem ich die Tuts durchgemacht hab

Und wozu dann ein Framework? :)

Klar geht es auch OHNE Framework!
Und warum hast du es nicht gemacht? :)

Verstehst du? Es gibt in Punkto JavaScript noch etliche Probleme, die auf dich zukommen werden. Und die auch von Frameworks nicht immer abgefangen werden. Dann musst per Hand eingreifen. Und wenn du dann JavaScript nicht entsprechend beherrschst, ist wieder hängen im Schacht. Ein Bekannter hat das mit jQuery schon erlebt.

Peter