nex: Formular mit <input type="text"> erweitern bzw. entfernen

SELF-Forum

Formular mit <input type="text"> erweitern bzw. entfernen

nex
– Informationen zu den Bewertungsregeln

Hallo,

nach Stunden suchen bei Google, habe ich die Hoffnung aufgegeben eine Lösung für mein Problem zu finden!
Ich hoffe Ihr könnt mir weiterhelfen!

Das ist mein Formular:

<form action="...">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%">Artikelnummer</td>
    <td width="25%">Menge</td>
    <td width="25%">&nbsp;</td>
  </tr>
</table>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%"><input name="art_nr" type="text" size="20"></td>
    <td width="25%"><input name="art_menge" type="text" size="10"></td>
    <td width="25%"><input type="button" value="L&ouml;schen"></td>
  </tr>
</table>
<br>
<input type="submit" name="Submit" value="neues Feld hinzuf&uuml;gen">
<br>
<br>
<input type="submit" name="Submit2" value="Bestellung abschicken">
</form>

Nun möchte ich per klick auf "neues Feld hinzufügen" ein weiteres Feld direkt unter das andere hinzufügen bzw. klick auf "Löschen" das Feld wieder entfernen.
Wenn ich dann nun auf "Bestellung abschicken" klicke, möchte ich das Formular per array Funktion auf der nächsten Seite mit PHP auswerten.

Ich habe leider nichts passendes im Netz gefunden.
Danke für Ihre Hilfe!

mfg nex

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Formular mit <input type="text"> erweitern bzw. entfernen

    plan_B
    – Informationen zu den Bewertungsregeln

    hallo,

    weil ich mich auch gerade mit Tabellen beschäftige, darf ich den Vorschlag machen, zunächst ein plausibles HTML zu erstellen.

    vielleicht so:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
<title>table tour</title>  
  
<style type="text/css">  
  
#tbl1 {  
 width:300px;  
 border:0;  
 }  
  
#tbl1 th {background-color:beige;}  
  
#tbl1 td {padding:5px;}  
  
</style>  
<script type="text/javascript">  
  
function new_tr(elem) {  
 alert("du hast >"+elem.value +"< geclickt, später mehr");  
 return;  
 }  
  
function del_tr(elem) {  
 alert("du hast >"+elem.value +"< geclickt, später mehr");  
 return;  
 }  
  
</script>  
  
</head>  
<body>  
  
  
<form action="..." onsubmit="return false">  
<table id="tbl1">  
<thead>  
  <tr>  
    <th width="50%">Artikelnummer</td>  
    <th width="25%">Menge</td>  
    <td width="25%"></td>  
  </tr>  
</thead>  
<tbody>  
  <tr>  
    <td ><input name="art_nr" type="text" size="20"></td>  
    <td ><input name="art_menge" type="text" size="10"></td>  
    <td ><input type="button" value="L&ouml;schen" onclick="del_tr(this)"></td>  
  </tr>  
</tbody>  
<tfoot>  
 <tr>  
  <td colspan=3>  
   <input type="button" name="neu" onclick="new_tr(this)"  
     value="weiteres Feld"> <input type="submit"  
  name="Submit2" value="Bestellung abschicken">  
  </td>  
 </tr>  
</tfoot>  
</table>  
</form>  
  
</body>  
</html>

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Formular mit <input type="text"> erweitern bzw. entfernen

      plan_B
      – Informationen zu den Bewertungsregeln

      Nachtrag,

      vergessen habe ich noch, wie's weitergeht. Auf dieser Seite findest du speziell für Tabellen die Methoden und Eigenschaft:

      http://de.selfhtml.org/javascript/objekte/htmlelemente.htm@title=Htmlelemente für table,tbody,tr,td

      Gruß plan_B

      --
           *®*´¯`·.¸¸.·
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln