動的に作成されたフィールドから値を取得し、Ajax経由でPHPに送信します

Question

私はテキストフィールドField nameと2つのボタン(Insert field, Show fields)を持つページを持っています。

ユーザーは、新しいフィールドの名前になる最初のテキストフィールド内に値を挿入します。 Insert fieldをクリックすると、その値がデータベースに送信され、TBL_FIELDSという表に挿入されます。

そしてShow fieldsをユーザーがクリックすると、ページがロードさTBL_FIELDSからのすべてのフィールド名とロードされた名前を含むそれのプレースホルダとNテキストフィールドを作成します。

これらのフィールドは別のボタンInsert valuesを含む.fieldList divの内部に表示され、ユーザーがクリックすると、これらの動的に作成されたフィールドとそのプレースホルダーからすべての値を取得し、別のデータベーステーブルTBL_VALUESと呼ばれるこのテーブルには、フィールドの名前（プレースホルダ）を表すID,FIELD_NAME、フィールドの値を表すFIELD_VALUEの3つのカラムがあります。

私の質問は、これらの動的に作成されたすべてのフィールドから値とプレースホルダを取得し、Ajax経由で.phpファイルに送信するにはどうすればいいですか？私は.val()を使用して値を取得し、プレースホルダを取得するには.attr('placeholder')を使用することができますが、それは正確に私の問題ではない、私の問題は、どのくらいのフィールドがあるか、どのように私はそれらにアクセスすることができますかわからない$_POST。

これは私がこれまでのところ、ここで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 
    }); 
}); 

してください、私は私のためにこれを行うには誰も求めていないよということに気づく、私は私がのために任意のコードを提供していないよ知っています$("#insertValues").click()フィールドからすべての値を取得してphpに送信し、それを受け取るPHPコードがありません。私はちょうど立ち往生して、何をやるべきかわからないので、これを解決する方法を私に導く助けが必要です。

私のHTML、insertField.php、selectField.php、多分私のSQLスクリプトを表示する必要がある場合は、私に知らせてください。

Answer 1

すべての入力に名前属性を付け、バックエンドに送信できるようにします。

Ajaxを経由せず、Ajax関数のdata属性として$('#formId').serialize()が指定されているかのように、フォーム全体を送信できます。