Dynamisches Formular

T

trame

Grünschnabel
Hallo,

ich sitze gerade an einem dynamischen Formular, welches die Eingabe von Rezepten vereinfachen soll. Einzugeben sind unter anderem der Name des Gerichts und die Zubereitung. Jetzt benötige ich noch eine Möglichkeit für die Eingabe von Zutaten. Da die Anzahl variiert, muss dieser Bereich dynamisch erweiterbar sein. Dafür habe ich eine JavaScript-Methode geschrieben, die auf Knopfdruck weitere Eingabefelder anzeigt. Das funktioniert auch alles einwandfrei. Wenn ich jetzt allerdings auf abschicken gehe, sollen die Eingaben von einem php-Script veranrbeitet werden. Im IE funktioniert da auch so wie es soll. Im Firefox und Opera werden die Werte der neu hinzugefügten Felder aber nicht übernommen.

JavaScript:
HTML: 
function ZeileErzeugen(Index)
{
   // hole bisherige Ahnzahl Zutaten
   var index = document.getElementById("count").value;
   
   var indexNext = parseInt(index) +1;
   document.getElementById("count").setAttribute("value", indexNext);
   
  var TR = document.getElementById("ingredients").insertRow(indexNext);
  TR.setAttribute('class', 'header02b');
  TR.setAttribute('height', '24');
  TR.setAttribute('valign', 'middle');
  
  var TD1 = document.createElement("td");
  var TD1Element = document.createElement('input');
  
  var TD2 = document.createElement("td");
  
  var TD3 = document.createElement("td");
  
  var TD3Element = document.createElement('select');
  var TD3Option1 = document.createElement('option');
  
  var TD4 = document.createElement("td");
    
  var TD5 = document.createElement("td");
  var TD5Element = document.createElement('input');
  
    
  TD1Element.type = 'text'; 
  TD1Element.name = 'mass_'+indexNext;
  TD1Element.setAttribute('class', 'login');
  TD1Element.setAttribute('className', 'login');
  TD1Element.style.width = "40px";
   
  TD3Element.name = 'unit_'+indexNext;
  TD3Element.setAttribute('class', 'pulldown_mass');
  TD3Element.setAttribute('className', 'pulldown_mass');
  
  TD5Element.type = 'text'; 
  TD5Element.name = 'ingredient_'+indexNext;
  TD5Element.setAttribute('class', 'login');
  TD5Element.setAttribute('className', 'login');
  TD5Element.style.width = "280px";
  
  TD1.appendChild(TD1Element);
  TD3.appendChild(TD3Element);
  TD5.appendChild(TD5Element);
  
  TD3Option1.setAttribute('value', 1);
  TD3Element.appendChild(TD3Option1);
  
  TR.appendChild(TD1);
  TR.appendChild(TD2);
  TR.appendChild(TD3);
  TR.appendChild(TD4);
  TR.appendChild(TD5);
}

HTML-Code (Formular):
HTML: 
<table bgcolor="#cbccd0" border="0" cellpadding="1" cellspacing="0" width="440">
<form action="index.php?php=login.recipes.new" method="post">
     <input id="count" type="hidden" name="count" value="0">
     <tbody><tr> 
      <td width="440">
        <table bgcolor="#ffffff" border="0" cellpadding="1" cellspacing="0" width="100%">
          <tbody><tr> 
            <td valign="top" width="100%">
<table class="header02b" align="center" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr>
    <td width="100%"><img src="templates/images/spacer.gif" height="6" width="1"><br>
<div class="headline1"><img src="templates/images/kochmuetze_rot.gif" height="18" width="20"> {TITLE}</div>

<table class="header02b" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="8" valign="middle">
    <td><img src="templates/images/spacer.gif" height="8" width="1"><br></td>
  </tr>
  <tr>
    <td background="templates/images/linie_quer.gif" height="1"><img src="templates/images/spacer.gif" height="1" width="1"></td>
  </tr>
  <tr height="8" valign="middle">
    <td><img src="templates/images/spacer.gif" height="8" width="1"><br></td>
  </tr>
</tbody></table>

<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">Titel:
    </td>
    <td align="left" width="300">
<input name="title" size="5" style="width: 280px;" class="login" type="text">
    </td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="5" width="1"><br>

<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">Kategorie:
    </td>
    <td align="left" width="300">
<select name="category" size="1" class="pulldown_eingabe">
<option value="0">Rezepte -&gt; Auflauf</option>
<option value="1">Rezepte -&gt; Backen</option>
<option value="2">Rezepte -&gt; Dessert</option>
<option value="3">Rezepte -&gt; Eier &amp; Mehl</option>
<option value="4">Rezepte -&gt; Eintopf</option>
<option value="5">Rezepte -&gt; Fisch</option>
<option value="6">Rezepte -&gt; Fleisch</option>
<option value="7">Rezepte -&gt; Geflügel</option>
<option value="8">Rezepte -&gt; Gemüse</option>
<option value="9">Rezepte -&gt; Kartoffeln</option>
<option value="10">Rezepte -&gt; Käse</option>
<option value="11">Rezepte -&gt; Nudeln</option>
<option value="12">Rezepte -&gt; Pizza</option>
<option value="13">Rezepte -&gt; Reis</option>
<option value="14">Rezepte -&gt; Salat</option>
<option value="15">Rezepte -&gt; Snacks &amp; Dips</option>
<option value="16">Rezepte -&gt; Suppe</option>
<option value="17">Rezepte -&gt; Vorspeise</option>
<option value="18">Drinks</option>
<option value="19">Styling</option>
</select>
    </td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="5" width="1"><br>

<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">Zutaten für:
    </td>
    <td align="left" width="300">
<select name="persons" size="1" class="pulldown" target="_self">
<option value="1">1 Person</option>
<option value="2">2 Personen</option>
<option value="3">3 Personen</option>
<option value="4">4 Personen</option>
<option value="5">5 Personen</option>
<option value="6">6 Personen</option>
<option value="7">7 Personen</option>
<option value="8">8 Personen</option>
</select>
    </td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="5" width="1"><br>

<div class="navi01">Zutaten-Eingabe:<br><img src="templates/images/spacer.gif" height="5" width="1"><br>

<table id="ingredients" class="header02" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr class="navi02" bgcolor="#9dc42d" height="16" valign="middle"> 
    <td align="left" width="50">Menge
    </td>
    <td><img src="templates/images/spacer.gif" height="1" width="10"><br></td>
    <td align="left" width="50">Maß
    </td>
    <td><img src="templates/images/spacer.gif" height="1" width="10"><br></td>
    <td align="left" width="300">Zutat
    </td>
  </tr>
</tbody></table>
<div class="header02b"><a href="#" onclick="javascript:ZeileErzeugen(1)">mehr Zutatenfelder notwendig! (JavaScript erforderlich)</a></div><br>


<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">Schwierigkeit:
    </td>
    <td align="left" width="300">
<select name="difficulty" size="1" class="pulldown">
<option value="0">leicht</option>
<option value="1">unkompliziert</option>
<option value="2">schwierig</option>
</select>
    </td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="5" width="1"><br>

<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">Preis:
    </td>
    <td align="left" width="300">
<select name="price" size="1" class="pulldown">
<option value="0">günstig</option>
<option value="1">erschwinglich</option>
<option value="2">teuer</option>
</select>
    </td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="5" width="1"><br>

<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">vegetarisch:
    </td>
    <td align="left" width="300">
<input name="vegetarian" value="1" type="checkbox">
    </td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="5" width="1"><br>

<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">diätgeeignet:
    </td>
    <td align="left" width="300">
<input name="diet" value="1" type="checkbox">
    </td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="10" width="1"><br>

So wirds gemacht:<br><img src="templates/images/spacer.gif" height="5" width="1"><br>
<textarea class="field" name="preparation" style="width: 400px;"></textarea>
<br><img src="templates/images/spacer.gif" height="10" width="1"><br>

<table class="navi01" border="0" cellpadding="0" cellspacing="0" width="420">
  <tbody><tr height="30" valign="middle"> 
    <td align="left" width="120">
    </td>
    <td align="left" width="300">
<div class="header02b"><input name="agb" value="1" checked="checked" type="checkbox"> Mit dem Absenden akzeptiere ich die <a href="http://www.studikoch.de/test/agb.php" target="_blank">AGB</a>.</div>
<input name="sendNewRecipe" class="smallbutton" value="absenden" type="submit"> <input value="reset" class="smallbutton" type="reset">
    </td>
  </tr>
  </form>
</tbody></table>

    </div></td>
  </tr>
</tbody></table><img src="templates/images/spacer.gif" height="10" width="1"><br>
            </td>
              </tr>
              </tbody></table>
              </td>
            </tr>

          </tbody></table><img src="templates/images/spacer.gif" height="20" width="1"><br>

Es werden 2 Eingabefelder und eine Auswahlliste eingeblendet. Im DOM werde diese auch aufgelistet. Das versteckte Feld mit der id 'count' gibt die Anzahl der Zutaten an, so dass ich im PHP-Code anschließend mit einer for-Schleife die Felder abfragen kann.

Ich hffe, mir kann jemand helfen. Ich sehe einfach nicht, wo der Fehler liegt.

Gruß
Marcel
 
Hi,

das FORM- und INPUT-Tag (hidden) sind dort, wo sie derzeit stehen, nicht erlaubt. Ziehe Sie mal vor bzw.
nach die TABLE-Tags.
Code: 
<form action="index.php?php=login.recipes.new" method="post">
  <input id="count" type="hidden" name="count" value="0">
  <table bgcolor="#cbccd0" border="0" cellpadding="1" cellspacing="0" width="440">
    <tbody>
...
    </tbody>
  </table>
</form>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück