✔ Hilfe bei Abfrage dynamisch erzeugter inputfelder

H

Hunting4u

Grünschnabel
hallo zusammen,
ich bastel an einem kleinem script zu r erstellung einer rechnung, indem inputfelder auf klick erstellt werden, was soweit auch klappt (Anzahl_1 usw.), nun will ich die values der betreffenden felder in ein popup geben um die vorher eingegebenen daten durckfreundlich bekommen und da haperts, denn ich will ja vermeiden das ich für jedes feld den index von hand eintragen muss, ansonsten klappt es.

hier erstmal der code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <title>Rechnung</title>

  <script type="text/javascript">

  var nummer = 1;

  function createItem()
  {
    var item = document.createElement('li');

    item.innerHTML =
       '<input type="text" name="Anzahl_'+nummer+'" id="Anzahl['+nummer+']" size="8" />\n' 
      +'<input type="text" name="Artikel_'+nummer+'" id="Artikel['+nummer+']" size="20" />\n'
	   
      +'<button type="button" onclick="deleteItem(this)" title="Zeile l&ouml;schen">-<\/button>\n'
      +'<button type="button" onclick="insertItem(this)" title="Zeile hier einf&uuml;gen">+<\/button>\n\n';
      
    nummer++;  // sichert eindeutige Namen (und IDs); anderer Weg? Array?
      
    return item;         // ein Node-Objekt züruckgeben
  }
  
  function insertItem(obj)
  {
    document.getElementById('artikelliste').insertBefore(createItem(), obj.parentNode.nextSibling);
  }
  
  function deleteItem(obj)
  {
    document.getElementById('artikelliste').removeChild(obj.parentNode);  // li entfernen
  }

  function appendItem()
  {
    document.getElementById('artikelliste').appendChild(createItem());    // li anhängen
  }

  </script>

</head>

<body onload="appendItem();">
<form action="rechnung.html" method="post" name="Rechnung" id="kundenrechnung">

<table width="650" border="1" align="center">
<tr>
<td colspan="6">
      <ol id="head">
        <li  class="head">          
          <label class="Anzahl"><b>Anzahl</b></label>
          <label class="Dan"><b>DAN</b></label>
          <label class="Artikel"><b>Artikel</b></label>
          <label class="Stpreis"><b>St&uuml;ckpreis</b></label>
          <label ><b>Gesamt</b></label>
          
          <label class="-">&nbsp;</label>
          <label class="+">&nbsp;</label>
        </li>
      </ol>   
      <ol id="artikelliste" name="liste">
      </ol>

</td>
</tr>
<tr>
  <td colspan="3"><button type="button" onclick="appendItem()" title="Zeile unten anf&uuml;gen">Zeile anh&auml;ngen</button></td>
  <td colspan="3"><input type="button" onClick="printview();" value="Druckansicht"/></td>
</tr>
</table></form>
<script>

function printview() {
				
		var breite = screen.width;
		var hoehe = screen.height;
		var fensterbreite = 700; // Hier die gewünschte Breite des PopUp-Fensters eingeben.
		var fensterhoehe = 900; // Hier die gewünschte Höhe des PopUp-Fensters eingeben.
		var pos_x = (breite/2)-(fensterbreite/2);
		var pos_y = (hoehe/2)-(fensterhoehe/2);
						
		var popupWindow=window.open("", "","width="+fensterbreite+",height="+fensterhoehe+",left="+pos_x+",top="+pos_y+"");
		popupWindow.focus();
		
		popupWindow.document.write('<table border="1"><tr><td width="150">');
		
		popupWindow.document.write(document.Rechnung.Anzahl_1.value +'</td><td width="150">' + document.Rechnung.Artikel_1.value);
		
		popupWindow.document.write('</td></tr></table>');
		
}


  </script>
  

</body>
</html>

ich hoffe ich war verständlich genug und jemand hat den passenden tipp für mich

schon mal dank an euch
 
Hi,

Du könntest eine Schleife über alle Formularelemente machen und darin prüfen, ob der Name des aktuellen Elementes mit "Anzahl" oder "Artikel" anfängt. Wenn ja, machst Du halt die Ausgabe.

Und achte in Deinen Beiträgen bitte auf die Rechtschreibung, wie es in unserer Netiquette, Punkt 15 steht. Durchgängig klein geschriebene Beiträge sind hier nicht erwünscht. Danke.

LG
 
Moin,

Dank des DOMs benötigst du eigentlich überhaupt keine Namen, um auf die Inputs zuzugreifen. Folgende Infos sind ausreichend:

  • ID des <ol>
    um per getElementById() darauf zuzugreifen
  • jedes <input>-Paar befindet sich in einem <li> dieser <ol>
    ...auf die <li> kannst du zugreifen per getElementsByTagName()
  • die Inputs sind jeweils das 1+2 <input> des <li>
    ....auch da Zugriff wieder per getElementsByTagName()

Hier mal nen Beispielcode
Code: 
popupWindow.document.open();
		  popupWindow.document.write('<html><head><title>Druckvorschau</title></head><body></body></html>');
		  popupWindow.document.close();
		  
		  var tbl=popupWindow.document.createElement('table');
		  tbl.setAttribute('border','1');
		  var items=document.getElementById('artikelliste').getElementsByTagName('LI');
		  for(var i=0;i<items.length;++i)
		  {
		    var tr=tbl.insertRow(tbl.rows.length);
		    tr.insertCell(0).appendChild(popupWindow.document.createTextNode(items[i].getElementsByTagName('INPUT')[0].value));
		    tr.insertCell(1).appendChild(popupWindow.document.createTextNode(items[i].getElementsByTagName('INPUT')[1].value));
		  }
		  popupWindow.document.getElementsByTagName('body')[0].appendChild(tbl);

Wie du vielleicht erkennst, erzeuge ich da per write() nur das HTML-Gerüst...die Tabelle selbst inkl. Inhalt wird als DOM-Knoten erstellt und am Ende in den <body> eingehängt.

Grund dafür ist, dass der Benutzer auch HTML-Code in die Felder eingeben könnte, welcher die Druckvorschau zerbröselt...wenn man aus den Benutzereingaben Textknoten erstellt und diese einhängt, besteht das Problem nicht.:)
 
Dank euch
Und zugleich darf ich mich wohl zweimal schämen, zum eien da ich sehr wohl auch die Groß- und Kleinschrift hätte nutzen können ;)
und zum Anderen jetzt wo ich es Lese frage ich mich selbst wrum ich nicht direkt über die Tag's gegangen bin den dass das geht war mir schon bekannt :confused:

nochmal DANKE

@Sven Mintel

evtl. hast du noch nen kleinen Wink mit nem Zaunpfahl für mich, da ich ne Tabelle bisher immer in HTML geschriebenhabe,
wie ändere ich hier die Zellenbreite usw. ?
 
Zuletzt bearbeitet:
Hi,

wenn die Tabelle bereits im HTML vorhanden ist, kannst du sie mit einer ID auszeichnen. Damit ist sie jederzeit ansprechbar.

Die Spalten kannst du über die Kollektion cells erreichen, die Zeilen über rows.

Die Eigenschaften sind über das Objekt style und den entsprechenden Eigenschaften änderbar.

Beispiel: Grössenänderung der ersten Spalte auf 300 Pixel
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function cellWidth(intIndex, intWidth, strID){
  var objTable = document.getElementById(strID);

  objTable.rows[0].cells[intIndex].style.width = intWidth + "px";
}
 //-->
</script>
</head>
<body>
<button onclick="cellWidth(0, 300, 'myTable');">Spalte 1 (300)</button>
<table id="myTable" border="1">
  <tr><td>1.1</td><td>1.2</td></tr>
  <tr><td>2.1</td><td>2.2</td></tr>
</table>
</form>
</body>
</html>

Der Funktion werden drei Parameter übergeben:
- intIndex: Index der zu ändernden Spalte (beginnend bei Null)
- intWidth: neue Breite
- strID: ID der Tabelle

Ciao
Quaese
 
meine frage ging eher an diese struktur
Code: 
		  var tbl=popupWindow.document.createElement('table');
		  tbl.setAttribute('border','1');
		  var items=document.getElementById('artikelliste').getElementsByTagName('LI');
		  for(var i=0;i<items.length;++i)
		  {
		    var tr=tbl.insertRow(tbl.rows.length);
		    tr.insertCell(0).appendChild(popupWindow.document.createTextNode(items[i].getElementsByTagName('INPUT')[0].value));
		    tr.insertCell(1).appendChild(popupWindow.document.createTextNode(items[i].getElementsByTagName('INPUT')[1].value));
		  }
		  popupWindow.document.getElementsByTagName('body')[0].appendChild(tbl);

da ich so noch keine Tabellen erstellt habe, hier bekomme ich es nicht hin die Breite der Spalten bzw. Cellen zu ändern.
 
Hi,

übergib beim Erstellen einer neuen Zelle die zurückgegebene Referenz auf das Zellenobjekt an eine Variable. Hierüber kannst du auf die style-Eigenschaft zugreifen.
Code: 
var objCell = tr.insertCell(0);
objCell.appendChild(popupWindow.document.createTextNode(items[i].getElementsByTagName('INPUT')[0].value));
objCell.style.width = "300px";

Ciao
Quaese
 
Ohhh man ich werde noch verrückt,
hab schon wieder ein kleines Problem:
Code: 
function rechne()
{
  for (i=1;i>=1;i++)
  {
  document.getElementById('Preis_'+i).value = document.getElementById('Anzahl_'+i).value * document.getElementById('Stpreis_'+i).value;
  document.getElementById('Summe').value = ?;
  }
}
Ich bekomme es einfach nicht hin das alle Preisfelder addiert werden und in Summe Feld Geschrieben werden.

Hoffe ihr würdet nocheinmal so nett sein
 
Zuletzt bearbeitet:
Du kannst in JavaScript keine Strings miteinander addieren. Du musst erst einmal alle Inhalte in einen numerischen Wert umwandeln. Dazu gibt es folgende Möglichkeit:
Javascript: 
string = '1234';
number = new Number(string);
// Jetzt hat "number" den Wert von "string" ist aber keine Zeichenkette mehr
 
Sorry, aber um zu verstehen was ich da machen soll bzw. wie das geht, wenn die Felder dynamisch erstellt werden reicht mir das als info nicht. Das ganze Formular ist fölliges Neuland für mich, normalerweise schlag ich mich überall imt php und datenbanken durch nur ist dies dort wo ich diese Rechnung brauche nicht möglich und Javascript nutzte ich bisher nur für statische Formulare.
also es wäre super wenn du mir für das Konkrete Bsp. ne step by step info geben könntest.

als anhang mal die datei falls jemand Lust und Laune hat sich das mal anzusehen
Anhang anzeigen Rechnung1.zip
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück