ダイナミックフィールドデータをDBに挿入するには？

Question

私は動的に作成されたフィールドを持っていますが、これは完全に機能します。私は現在、ダイナミックフィールドに入力されたデータをdbに挿入しようとしています。 しかし、情報はdbに挿入されません。つまり、送信ボタンが送信していません。

jQueryとPHPのフォームをテストファイルにコピーして貼り付け、必要に応じてjQueryとフォームの挿入を削除しました。

私のダイナミックフィールドはjqueryを使って作成しています。私はデータベースにphpを使ってデータを挿入しようとしていますが、jqueryとPHPは手を合わせていますか？どんな提案やアドバイスも大歓迎です。

ダイナミックフィールド

$(document).ready(function() { 
      var max_fields = 100; //maximum input boxes allowed 
      var wrapper = $(".input_fields"); //Fields wrapper 
      var add_button = $(".add_field"); //Add button ID 

      var x = 1; //initlal text box count 
      $(add_button).click(function(e) { //on add input button click 
       e.preventDefault(); 
       if (x < max_fields) { 
        x++; //text box increment 
        $(wrapper).prepend('<div id="new_blue">\n\ 
          <div id="inline" class="div">\n\\n\ 
          <form id="form" class="Form" method="POST" action="" accept-charset="utf-8">\n\ 
          <p id="option" class="text">Option name\n\ 
          <input type="text" id="option_nme" name="option_nme[]" class="option_field"></p>\n\ 
          </div>\n\ 
          \n\ 
          <div id="inl" class="div">\n\ 
          <p id="customer" class="text">Allow customer to pick ..\n\ 
          <select class="optionType" name="optionType" value=""disabled="disabled" >\n\ 
          <option value="Option Type" disabled="disabled">Option Type</option>\n\ 
          </select>\n\ 
          </div>\n\ 
          </p>\n\ 
          <hr id="hoz_line">\n\ 
          <p id="para">You can add add-ons after creating this option...\n\ 
          </p>\n\ 
          <input type="submit" id="dynamic_submit" name="dynamic_submit" value="Submit">\n\ 
          <a href="#" class="remove_field">Remove</a>\n\\n\ 
          </form></div>'); //add input box 
       } 
      }); 

      $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
       e.preventDefault(); 
       $(this).parent('div').remove(); 
       x--; 
      }) 
     }); 

INSERTクエリ

$dbc = new mysqli("localhost", "root", "root", "One_Delivery"); 
    $dbc->set_charset("utf8mb4"); 

    $sel_sql = "SELECT Add_On_ID FROM Add_On"; 
    $sel_result = $dbc->query($sel_sql); 

    if ($sel_result->num_rows > 0) { 
     // output data of each row 
     while ($sell_row = $sel_result->fetch_assoc()) { 
      $ao_id = $sell_row['Add_On_ID']; 
     } 

     //insert dynamic field(s) into add-on 
     if (isset($_POST['dynamic_submit'])) { 
      $df_option_name = $_POST['option_nme']; 

      // option name validation 
      if (empty($_POST['option_nme'])) { 
       $add_product_errors['option_nme'] = "Oops! i cannot be empty"; 
      } 

      $ao_query = "INSERT INTO Add_on(Add_On_OpName) VALUES (?) 
     ON DUPLICATE KEY 
     UPDATE 
     Add_On_OpName = ?"; //on duplicate input update row 
      //var_dump($databaseObject); 
      $ao_run_query = $dbc->prepare($ao_query); 

      $ao_run_query->bind_param('ss', $df_option_name, $df_option_name); 
      // THIS now executes the above transaction, returns TRUE if successful - issdissd duplicate update 
      if (!$ao_run_query->execute()) { 
       $insertError = "There was an error inserting data: " . $ao_run_query->error; 
      } 

      print "affected rows:" . $ao_run_query->affected_rows; //how many records affected? 
      $ao_run_query->free_result(); // Frees memory on completion 
      $ao_run_query->close(); //closes this action 


     } 

Answer 1

がいくつかあります：

は、AJAXを介して出力ボタンですか？あなたがそうのように聞く必要があると思いますもしそうなら：あなたはまた、効果を有することができる.add_fieldこれに二回$()を使用している

$(document).on('click', '.add_field', function(e) { 
    // do stuff 
}); 

、代わりに実行します。

$('.add_field').on('click', function(e) { 
    // do stuff 
}); 

または

$('.add_field').click(function(e) { 
    // do stuff 
});