Werte aus dynamisch erstellten Feldern erhalten und über Ajax an PHP senden

Question

Ich habe eine Seite mit einem Textfeld Field name und zwei Tasten (Insert field, Show fields).

Der Benutzer fügt einen Wert innerhalb des ersten Textfelds ein, das ein neuer Feldname sein wird. Wenn er auf Insert field klickt, wird dieser Wert an meine Datenbank gesendet und in eine Tabelle namens TBL_FIELDS eingefügt.

Und wenn der Benutzer klickt auf Show fields, die Seite geladen wird, alle Feldnamen aus TBL_FIELDS und erstellt N Textfelder mit ihm Platzhalter ist, die Namen enthalten, die geladen wurden.

Diese Felder sind innerhalb eines .fieldList div gezeigt, dass eine andere Taste enthält Insert values und wenn der Benutzer darauf klickt, ich will auch aus diesen dynamisch erzeugten Felder alle Werte erhalten, wie es Platzhalter ist und sie in eine andere Datenbank-Tabelle einfügen Diese Tabelle hat TBL_VALUES drei Spalten, ID, FIELD_NAME, die den Namen (Platzhalter) des Feldes und FIELD_VALUE darstellt, die den Wert des Feldes darstellt.

Also meine Frage ist, wie kann ich die Werte und Platzhalter aus all diesen dynamisch erstellten Feldern und sende sie an meine. PHP-Datei über Ajax? Ich weiß, dass ich .val() verwenden kann, um seinen Wert zu erhalten, und .attr('placeholder'), um den Platzhalter zu bekommen, aber das ist nicht genau mein Punkt, mein Problem ist, dass ich nicht weiß, wie viele Felder es gibt und wie kann ich auf sie mit $_POST zugreifen.

Das ist, was ich bisher habe, ist hier script.js:

$(document).ready(function(){ 

    var fieldCount = 0; 

    $("#btnFieldSend").click(function(){ 

     if($("#txtFieldName").val()) { 

      $.ajax({ 

       type: 'post', 
       dataType: 'json', 
       url: 'insertField.php', 
       data: { txtFieldName: $("#txtFieldName").val() } 
      }).done(function(data){ 

       if(data.ok) { 

        $("#txtFieldName").val(''); 
        alert(data.ok); 
       } 
       else 
        alert(data.err); 
      }) 
     } 
    }); 

    $("#btnFields").click(function(){ 

     if($(".fieldList").is(":hidden")) { 

      $.ajax({ 

       dataType: 'json', 
       url: 'selectField.php' 
      }).done(function(data){ 

       if(data.ok) { 

        fieldCount = data.fieldCount; 

        for(var i = 0; i < fieldCount; i++) 
         $(".appField").append('<input id="' + i + '" type="text" placeholder="' + data.fieldName[i][0] + '">'); 

        $(".fieldList").show(); 
       } 
       else 
        alert(data.err); 
      }); 
     } 
    }); 

    $("#insertValues").click(function(){ 

     // send values 
    }); 
}); 

Bitte beachten Sie, dass ich das für mich nicht, dass jemand fragen zu tun, ich weiß, ich bin für keinen Code bereitstellt $("#insertValues").click() das wird alle Werte aus den Feldern bekommen und sie an PHP senden, und es fehlt auch der PHP-Code, der es erhalten wird. Ich stecke einfach fest und weiß nicht, was ich tun soll oder wie ich vorgehen soll. Ich brauche nur Hilfe, um mich zu einer Lösung zu führen.

Wenn Sie mich brauchen, um meine HTML, insertField.php, selectField.php oder vielleicht mein SQL-Skript zu zeigen, lassen Sie es mich wissen.

Answer 1

Geben Sie allen Eingängen ein Namensattribut, damit sie an Ihr Back-End gesendet werden können.

Sie können ein Formular als Ganzes senden, als wäre es nicht über Ajax mit $('#formId').serialize(), das als das Attribut data Ihrer Ajax-Funktion angegeben wurde.