Ankündigung

Einklappen
Keine Ankündigung bisher.

Ajax dynamische input fields

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ajax dynamische input fields

    Hallo zusammen,

    ich habe ein Formular, welches sich dynamisch erstellt aus einer Datenbankabfrage.

    Die input Felder benenne ich nach dem Schema:
    PHP-Code:
    id="input{{ $test->id }}" name="input{{ $test->id }}" 
    Jetzt gibt es beispielsweise 3 Input felder mit den IDs
    - input4711
    - input159
    - input635

    ich habe nun eine ajax Funktion geschrieben, die prüft ob das Formular verändert wurde.
    Mein Ziel ist es jedoch nur die Daten weiterzugeben, die verändert wurden.

    Sofern als im input635 eine änderung durchgeführt wird, dann soll nur dieser wert übertragen werden.
    so sieht meine Funktion aktuell aus:
    Code:
            $("#test_form").change(function(){
                $.ajax({
                        url: "/ajax/check",  // 
                        type:"POST",
                        data:{
                            input1:$("#input4711").val(),
                            input2:$("#input159").val(),
                            input3:$("#input635").val()
                        },
                success: function(response){
                        alert('A');
                        $html = "<p>" + response.help[0].solution + "</p>";
                        $("#anzeige").append($html);
    
                        }
                });
            });
    das funktioniert soweit auch, nur bekomme ich in jedem formular input felder mit anderen id`s.
    Ich weiss leider nicht wie ich dies dynamisch in der Ajax Funktion umsetzen kann.

    Habt Ihr einen kleinen Denkanstoß für mich?

    Vielen Dank

  • #2
    Weiß nicht wie sinnvoll es noch ist, irgendwas mit jQuery zu machen. Aber eine Lösung, bzw. ein Denkanstoß könnte so aussehen: https://jsfiddle.net/sdLar8jp/1/

    Kommentar


    • #3
      Hallo,
      Also bevor ich anfange mich in alten Stoff einzuarbeiten kannst du mir gerne auch noch EINEN Denkanstoß in eine moderneren Technologie geben?
      Wie würdest du sowas sonst lösen?
      Danke für deine Rückmeldung

      Kommentar


      • #4
        Zitat von tobias159 Beitrag anzeigen
        Also bevor ich anfange mich in alten Stoff einzuarbeiten kannst du mir gerne auch noch EINEN Denkanstoß in eine moderneren Technologie geben?
        Das was rkr da gepostet hat *ist* moderne Technologie (für Ajax-Requests existiert Fetch API), jQuery ist der alte Stoff - vergiss es. Zum Auslesen aller Formularelemente klingt FormData ganz hilfreich, ansonsten sollte ein querySelectorAll('input, select') auch alle input- und select-Elemente finden.

        Kommentar


        • #5
          Mich würde mal interessieren, warum hier so schlecht über Jquery geredet wird. Könnt ihr euch damit persönlich nicht anfreunden oder gibt es tatsächlich irgendwelche Nachteile damit beim Programmieren? Oder ist es nur auf Ajax bezogen?

          Kommentar


          • #6
            Zitat von Anormal Beitrag anzeigen
            Mich würde mal interessieren, warum hier so schlecht über Jquery geredet wird. Könnt ihr euch damit persönlich nicht anfreunden oder gibt es tatsächlich irgendwelche Nachteile damit beim Programmieren? Oder ist es nur auf Ajax bezogen?
            Nein, jQuery ist generell nicht mehr nötig und kann durch VanillaJS ersetzt werden.

            Kommentar


            • #7
              Code:
              <input is="" name="" onblur="blur( this)" onchange="change( this)" ...>
              
              function blur( self){     // input verliert Focus
                    alert( self.name + ", " + self.value);
              }               
              
              function change( self){   // input wurde geändert ( bei jedem Buchstaben )
                    alert( self.name + ", " + self.value);
              }
              Jetzt haste Namen und Value und kannst es per Ajax zum Server senden.

              Kommentar

              Lädt...
              X