Per JS dynamische<ipnput> Felder per $_POST Abfragen!?

U

UserNeo

Grünschnabel
Hi,

ich habe ein einfaches Formular, welches aus statischen Felder und per JavaScript dynamisch generierten Feldern besteht. Je nach Auswahl, werden verschiedene neue Felder (input, select, textarea etc.) hinzugefügt.

Mein Problem ist nun das ich, nachdem ich das Formular abgeschickt habe, nicht per $_POST auf die dynamisch generierten Felder zugreifen kann :( .

Kennt Ihr dieses "Problem" ? Habt Ihr eine Lösung dparat :) ?

cu
UserNeo
 
Moin,

es wäre sinnvoll, wenn du zeigst, wie du diese dynamischen Felder erzeugst...sonst ist es unmöglich zu Sagen, warum sie nicht übermittelt werden.
 
Hi,

kein Problem, das Script besteht aus 2 Teilen. Dieser HTML Code steht statisch in der PHP Datei:

formular.html
HTML: 
<div class="valueCard" id="product">
<table>
<tr>
<td>Produktwahl: *</td>
<td><select size="1" id="customer_product1" name="customer_product[]" onChange="loadArticleForm(this, 'customer_script');" onFocus="loadArticles();"></select></td>
</tr>
<tr>                
<td colspan="2"><div id="customer_script"></div></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="button" value="Add" onclick="addInput('product')"; ></td>
</tr>
</table>
</div>

Kurze Erklärung, beim fokusieren des SELECT Objektes wird dieses mit Inhalten gefüllt. Beim auswählen wird das Formular geladen und in den DIV Container "customer_script" geladen. Der Button Add fügt ein neues Produkt Auswahlfeld.

JS welches per Ajax eine PHP Datei aufruft, welche reinen HTML Code zurückgibt

ajax.js
HTML: 
function loadArticleForm(articleID, divID) {

    if (articleID.value > 0) {

        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById(divID).value = xmlhttp.responseText;
            }
        }

        xmlhttp.open('GET', 'index.php?tpl=ajax_loadarticleform&q=' + articleID.value, true);
        xmlhttp.send();
    }
}

Als Ergebnis erhält man diesen HTML Quellcode

createForm.php
PHP: 
<?php 
echo '<table>
<tr>
<td>Vorname:</td>
<td><input type="text" name="TEXT_0" id="TEXT_0" /></td>
</tr>
<tr>
<td>Nachname:</td>
<td><input type="text" name="TEXT_1" id="TEXT_1" /></td>
</tr>
</table>';
?>

Wobei der Name automatisch hochgezählt wird.

Und nun das JS Script, welches ein weiteres Auswahlfeld hinzufügt:

addNewForma.js
HTML: 
var counter = 1;
var limit = 20;
function addInput(divName) {
    if (counter == limit) {
        alert('Sie können nicht mehr als 20 Produkte auf einmal eingeben.');
    }
    else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = '<table><tr><td>Produktwahl: *</td><td><select size="1" id="customer_product' + (counter + 1) + '" name="customer_product[]" onChange="loadArticleForm(this, \'customer_script' + counter + '\');" onFocus="loadArticles(document.getElementById(\'customer_master\').value, this);""></select></td></tr><tr><td colspan="2" align="left"><div id="customer_script' + counter + '"></div></td></tr><tr><td></td><td align="left"><input type="button" value="Produkt hinzufügen" onclick="addInput(\'product\')"; ></td></tr></table>';
        document.getElementById(divName).appendChild(newdiv);
        window.scrollTo('99999', '99999');
        counter++;
    }
}

Und nun dachte ich, das wenn man das Formular abschickt so eine $_POST Struktur erhält:
PHP: 
$_POST = Array
{
  [customer_product] = Array
  {
    [0] => "Produkt 1";
    [1] => "Produkt 2";
  }
  [TEXT_0] => "Vorname";
  [TEXT_1] => "Nachname";
}

Leider klappt das nicht :( . Bei weiteren Fragen einfach los :D
 
Zuletzt bearbeitet:
Ich sehe dort nirgends das Formular, bist du sicher, dass die Felder auch dort hineingepackt wurden?

Poste mal, nachdem du diese dynamischen Felder eingefügt hast, den Quelltext des ganzen.

Den erhältst du im Firefox per [STRG+A]->Kontextmenu->Auswahl-Quelltext anzeigen.
 
Du übermittelst die Daten ja auch mit GET.
PHP: 
        xmlhttp.open('GET', 'index.php?tpl=ajax_loadarticleform&q=' + articleID.value, true);
        xmlhttp.send();
 
@Sven
Also der User ruft die Datei formular.html auf, in der Datei befindet sich ein Auswahlmenü wählt man nun etwas aus, wird loadArticleForm(); aus der Datei ajax.js aufgerufen. Diese wiederum ruft die PHP Datei createForm.php auf und gibt dessen Rückgabe in <div id="customer_script"></div> in der Datei formular.html aus.

Das bedeutet ich habe wenn ich mir den Quelltext meiner Seite anzeigen lasse keinerlei Code vom Formular, da dieses ja erst zur Laufzeit hinzugefügt wird.

@wod2008
Stimmt, ich habe es auf "POST" geändert, jedoch konnte ich weder mit $_GET noch mit $_POST auf die Formularfelder zugreifen.


Ich glaube ich muss per Javascript jedes einzelne Feld beim verlassen zwischenspeichern, in ein Cookie oder Session. Sonst komme ich nicht an die Daten ran :( .

cu
UserNeo
 
UserNeo hat gesagt.:
Das bedeutet ich habe wenn ich mir den Quelltext meiner Seite anzeigen lasse keinerlei Code vom Formular, da dieses ja erst zur Laufzeit hinzugefügt wird.
Zum Vergrößern anklicken....

Probiere doch mal das, was ich beschrieben habe:)
Wenn du dir im FF nicht normal den Quelltext anzeigen lässt, sondern wie beschrieben das, was dich interessiert markierst und dir davon per Kontext-Menu den "Auswahl-Quelltext" anzeigen lässt, bekommst du den aktuellen Stand inklusive der zwischenzeitlichen Manipulationen.
 
HTML: 
<div style="display: block;" class="valueCard" id="product">
<table>
<tbody>
<tr>
<td>Produktwahl: *</td>
<td><select size="1" id="customer_product1" name="customer_product[]" onchange="loadArticleForm(this, 'customer_script');" onfocus="loadArticles(document.getElementById('customer_master').value, this);"><option value="4">Test (Nr. 1001)</option></select></td>
</tr>
<tr>                
<td colspan="2">

<div id="customer_script">
<table>
<tbody>
<tr>
<td>Vorname:</td>
<td><input name="TEXT_1" id="TEXT_1" value="" size="40" maxlength="100" type="text">
</td>
</tr>
<tr>
<td>Nachname:</td>
<td><input name="TEXT_2" id="TEXT_2" value="" size="40" maxlength="100" type="text">
</td>
</tr>
</tbody>
</table>
</div>

</td>
</tr>
<tr>
<td></td>
<td align="left"><input value="Produkt hinzufügen" onclick="addInput('product')" ;="" type="button"></td>
</tr>
</tbody>
</table>
<div>
 
Da es noch weitere Felder gibt habe jetzt nicht das komplette Formular gepostet sondern nur den dynamischen Teil.

HTML: 
<form name="newcustomer" id="newcustomer" action="index.php?tpl=new_customer" method="post">
....
</form>

Umschliesst das komplett Formular.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück