[jQuery / javascript] Mehrdimensionale INPUT Arrays übermitteln

Dieses Thema im Forum "Programmieren" wurde erstellt von martin, 10 August 2011.

  1. martin

    martin Member

    Registriert seit:
    9 April 2004
    Beiträge:
    769
    Moin

    mal wieder stehe ich auf dem Schlauch. Eigentlich sollte mein Vorhaben nur 'ne Kleinigkeit sein, ich will doch lediglich ein paar Input Felder per Ajax an eine PHP Seite schicken....
    Aber der Reihe nach. Hier mal etwas Code:

    Die Werte folgender INPUT Felder (HTML) möchte ich gerne übermitteln
    PHP:

    <input name=test_l[1][1value=l-11>
    <
    input name=test_l[1][2value=l-12>
    <
    input name=test_l[2][1value=l-21>
    <
    input name=test_l[2][2value=l-22>

    <
    input type='button' onclick=test()>
    auf meiner "Zielseite", test.php möchte ich dann diese Werte mit json_decode($_POST['values']) wieder einlesen.

    mein Versuch:
    PHP:
    function test(){

        
    values =  document.getElementsByName("test_l").toJSON();
        
            $.
    ajax({
                
    type"POST",
                
    url"test.php",
                
    data: {values values},
                
    success: function(data){
                }
            });
    }
    Das Ganze klappt natürlich nicht wie gewünscht! Kann mir jemand helfen? Übrigends...das Ganze ist absichtlich ohne FORM gemacht, da der PHP Seite noch weitere Parameter übergeben werden, die nicht im Formular angegeben sind!

    Danke

    P.S. jQuery ist eingebunden und funktioniert! Versuche ich die Seite ohne den JSON Teil zu übermittlen, klappt das wunderbar!
  2. oxy

    oxy Staatl. gepr. Destroyer

    Registriert seit:
    21 August 2006
    Beiträge:
    131
    Hi,

    Ich kann deinen Code gerade nicht testen, aber für Form-Submissions per Ajax ist eigentlich serialize beit jQuery gedacht.
    Ich denke, wenn du den passenden Selector hast, sollte das auch ohne Form-Element gehen.

    http://api.jquery.com/serialize/

    Kannst du einmal mit Firebug etc. schauen was tatsächlich übertragen wird? Und hier posten?

    Gruß
    oxy
  3. martin

    martin Member

    Registriert seit:
    9 April 2004
    Beiträge:
    769
    Moin oxy

    das Problem bei der ganzen Sache ist, dass meine INPUT Elemente nicht als Array erkannt werden. Wenn ich z.B. document.getelementsbyname['test_l'] mit firebug ausgeben lasse, erhalte ich [ ], also ein leeres Array.
    Zunächst suche ich also nach einer Lösung wie ich auf diese INPUT Elemente zugreifen kann und zwar dynamisch, weil sich die Anzahlen ändern.

    Deinen Vorschlag mit der serialize() Funktion habe ich schon ausprobiert, leider ist diese nur verfügbar innerhalb der .submit Funktion. Ich brauche das Ganze ohne das Formular, deshalb habe ich versucht das Ergebnis von serialize innerhalb der .submit funktion abzufangen, leider klappt das auch nicht. :mad:

    Wie gesagt, eigentlich sollte es kein allzugroßes Problem sein in Javascript ein Array zu erhalten, das genau so aussieht, wie meine Bsp. Input Felder, der Rest sollte dann machbar sein, aber ich bekomme es einfach nicht hin.
  4. oxy

    oxy Staatl. gepr. Destroyer

    Registriert seit:
    21 August 2006
    Beiträge:
    131
    Hi

    Für den Browser/JavaScript ist das auch kein Array, sondern es sind einfach Elemente, die den Namen z.B. "test_l[2][2]" haben. Dass PHP das serverseitig als Array interpretiert - ist dem Browser egal.

    Ich würde dafür dann auch mit den Selektoren von JQuery arbeiten, z.B.:
    $('input[name^="test_l"]').

    Und dann könntest du mal testen ob

    Code:
    $('input[name^="test_l"]').serializeArray()
    
    dir serverseitig was liefert was du brauchst.
  5. martin

    martin Member

    Registriert seit:
    9 April 2004
    Beiträge:
    769
    Danke für deine Hilfe oxy, einen kleinen Teilerfolg kann ich vermelden, mit
    PHP:
    values = $('input[name^="test_l"]').serializeArray();
    erhalte ich jetzt auf dem Server mit var_dump($_POST['values']) folgendes:
    PHP:
    ["values"]=> array(4) { 
    [
    0]=> array(2) { ["name"]=> string(12"test_l[1][1]" ["value"]=> string(4"l-11" 
    [
    1]=> array(2) { ["name"]=> string(12"test_l[1][2]" ["value"]=> string(4"l-12" 
    [
    2]=> array(2) { ["name"]=> string(12"test_l[2][1]" ["value"]=> string(4"l-21" 
    [
    3]=> array(2) { ["name"]=> string(12"test_l[2][2]" ["value"]=> string(4"l-22" 
    }
    D.h. auch mit dem jquery Selektor werden alle Elemente in ein eindimensionales Array mit 4 Einträgen geworfen, anstatt 2 Arrays mit 2 Elementen zu erzeugen :(
  6. KobRheTilla

    KobRheTilla used register

    Registriert seit:
    20 Januar 2011
    Beiträge:
    378
    So wie oxy bereits anmerkte: Es gibt in HTML keine Arrays - HTML ist keine Programmiersprache. Alles, was du als Namen für ein Element angibst (name="foo"), ist der Name, da wird nicht automagisch über [] ein Array qualifiziert.

    Rob
  7. martin

    martin Member

    Registriert seit:
    9 April 2004
    Beiträge:
    769
    Danke euch. Ich hab jetzt die Namen umgeändert in test_l_1_1 usw. und dann den String in php mit explode zu einem Array gemacht. Ist zwar wahrscheinlich nicht die eleganteste Lösung, aber es klappt. DAnke jedenfalls!

    gruß
  8. oxy

    oxy Staatl. gepr. Destroyer

    Registriert seit:
    21 August 2006
    Beiträge:
    131
    Hi,

    Du denkst etwas zu komplex glaube ich. Du willst einfach ein Post machen. Das heißt, du musst einfach Key-Value Werte schicken, wobei der Key der Name eines Input Elements ist, und Value ist eben der Value des Elements.
    Dann stellt PHP dir serverseitig das als POST und ggf Array bereit (wenn die Values am Ende eckige Klammern haben). Wenn du jetzt aber serialisiert als JSON was rumschickst, kann PHP da dir kein Array mehr draus basteln. Ich hab da mal was vorbereitet ;)

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Formtest</title>
        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            function testInputs() {
                
                // Key/Value Map der Formelemente erzeugen
                var map = {};
                $('input[name^="test_l"]').each(function(index, element) {
                    map[$(element).attr('name')] = $(element).val();
                });
    
                // damit einen schlichten Post (und Ergebnis anzeigen)
                $.post('postecho.php',
                        map,
                        function(data, status) {
                            $("#result").empty().append(data);
                        }
                );
            }
    
            $(document).ready(function() {
                $('input[type="button"]').click(testInputs);
            });
            
        </script>
    </head>
    <body>
    <div>
         <input name=test_l[1][1] value=l-11 />
        <input name=test_l[1][2] value=l-12 />
        <input name=test_l[2][1] value=l-21 />
        <input name=test_l[2][2] value=l-22 />
    
    <input type='button' value="Click me!" />
    </div>
    <pre id="result"></pre>
    
    </body>
    </html>
    
    Die postecho.php ist simpel:

    Code:
    <?php print_r($_POST);
    
    Eine Sache noch zu dem serializeArray(): Wenn du die Elemente in eine Form packst, dann kannst du das was ich oben in die Variable "map" geschrieben habe einfach durch:

    Code:
    $("form").serializeArray(); 
    
    erzeugen, und wenn du das als Post absendest, ist das genau das, was passiert, wenn der Browser das Posten eines Formulars selber macht.

    SerializeArray() macht es aber eben nur auf Formelement angewendet genau so. Ansonsten gibt's JSON ;).

    Somit kann man serializeArray() super verwenden, um eine Form sowohl "normal" submitbar zu machen, als auch par Ajax/JavaScript.