Вставка строки в базу данных с помощью HTML/PHP/AJAX

Question

У меня есть кнопка, которую можно щелкнуть, которая откроет всплывающее окно с одним текстовым полем. Всякий раз, когда я ввожу что-то и нажимаю «Добавить», я хочу, чтобы он был вставлен в мою базу данных.

В настоящее время, когда я нажимаю «Добавить», он будет вставляться в БД, но он не будет считывать введенное значение. Поэтому нулевое значение просто вводится. Я не вижу ошибок, которые я вижу, однако в моем JavaScript я делаю console.log(dict), а вывод в журнале - Object {}, поэтому он не выглядит так, как записывается введенное значение. Я также получаю сообщение с успешной строкой в ​​логах, поэтому я определенно думаю, что это просто вопрос, чтобы получить значения, которые нужно читать.

Так что мой вопрос в том, как я могу заставить его прочитать значение и успешно ввести его в базу данных.

HTML СДВ кнопки:

<td><button class="create-user" id="insertButton">Add Group</button></td> 

HTML выскакивающих Box:

<div id="dialog-form" title="Add Group"> 
    <p class="validateTips">Please Add a Group</p> 

<!-- Dialog box displayed after add row button is clicked --> 
    <form> 
    <fieldset>   

     <label for="sku_group">SKU Group</label> 
     <input type="text" name="group" id="group" class="text ui-widget-content ui-corner-all"> 


     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 
    </form> 
</div> 

JavaScript:

// ----- Dialog Box for adding a row ----- 

$(function() { 

    var dialog, form, 

     sku_group = $("#group"), 
     allFields = $([]).add(sku_group), 
     tips = $(".validateTips"); 
    console.log(allFields); 

    function updateTips(t) { 
     tips 
     .text(t) 
     .addClass("ui-state-highlight"); 
     setTimeout(function() { 
     tips.removeClass("ui-state-highlight", 1500); 
     }, 500); 
    } 

    function checkRegexp(o, regexp, n) { 
     if (!(regexp.test(o.val()))) { 
     o.addClass("ui-state-error"); 
     updateTips(n); 
     return false; 
     } else { 
     return true; 
     } 
    } 


    function addGroup() { 

     var valid = true; 
     allFields.removeClass("ui-state-error"); 
// ----- Validation for each input in add row dialog box ----- 
     valid = valid && checkRegexp(sku_group, /^[a-z]([0-9a-z_\s])+$/i, "Please enter a valid SKU Group name"); 
     console.log(allFields); 
     if (valid) { 
     var $tr = $("#skuTable tbody tr").eq(0).clone(); 
     var dict = {}; 
     var errors = ""; 
     $.each(function(){ 
      $tr.find('.' + $(this).attr('id')).html($(this).val()+"-"+sku_group); 
      var type = $(this).attr('id'); 
      var value = $(this).val(); 
      console.log(type + " : " + value); 
      // ----- Switch statement that provides validation for each table cell ----- 
      switch (type) { 
      case "group": 
       dict["SKU Group"] = value; 
      break; 
      } 
     }); 
     $("#skuTable tbody").append($tr); 
     dialog.dialog("close"); 
     console.log(dict); 


     var request = $.ajax({ 
      type: "POST", 
      url: "insert-group.php", 
      data: dict 
     }); 

     request.done(function (response, textStatus, jqXHR){ 
      if(JSON.parse(response) == true){ 
      console.log("row inserted"); 
      } else { 
      console.log("row failed to insert"); 
      console.log(response); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 

     }); 

} 

     return valid; 
    } 

    var dialog = $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 400, 
     width: 350, 
     modal: true, 
     buttons: { 
     "Add Group": addGroup, 
     Cancel: function() { 
      dialog.dialog("close"); 
     } 
     }, 
     close: function() { 
     form[ 0 ].reset(); 
     } 
    }); 

    form = dialog.find("form").on("submit", function(event) { 
     event.preventDefault(); 
     addGroup(); 
    }); 

    $(".create-user").button().on("click", function() { 
     dialog.dialog({ 
      show: 'blind', 
      hide: 'blind' 
     }); 
     dialog.dialog("open"); 
    }); 

    }); 

вставка-group.php сценарий:

<?php 

    $SKU_Group = $_POST['SKU Group']; 

    $host="xxxxxxxxxxx"; 
    $dbName="xxxxxxx"; 
    $dbUser="xxxx"; 
    $dbPass="xxxxxxxxxxxxxx"; 

    $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass); 

    $sql = "INSERT INTO SKU_Group_Dim ([SKU Group]) VALUES (?)"; 

    $stmt = $pdo->prepare($sql); 
    $result = $stmt->execute(array($SKU_Group)); 
    echo json_encode($result); 

?> 

EDIT

Мой HTML таблице:

<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content"> 
    <thead> 
     <tr class="ui-widget-header"> 
      <th class="skuRow">SKU Group</th> 
      <th class="skuRow">Group ID</th> 
      <th class="skuRow">Edit</th> 
      <th class="skuRow">Delete</th> 
     </tr> 
    </thead> 
    <tbody> 

     <?php foreach ($dbh->query($sql_table) as $rows) { ?> 

     <tr> 
      <td class="sku_group" id="sku_group-<?php echo intval ($rows['SKU Group'])?>"><?php echo $rows['SKU Group']?></td> 
      <td class="group_id" align="center" id="group_id-<?php echo intval ($rows['Group_ID'])?>"><?php echo $rows['Group_ID']?></td> 
      <td><button type="button" class="edit" name="edit">Edit</button></td> 
      <td><button type="button" class="delete" onclick="deleteRow(this)">Delete</button></td> 
     </tr> 
    <?php 
     } 
    ?> 
    </tbody> 
</table> 

Answer 1

Ваше значение не хорошо Попробуйте изменить

var value = $(this).val(); 

Для

var value = $(this).find('input[type=text]').val(); 

Answer 2

Попробуйте изменить $.each функцию $tr.each. Я думаю, вы должны предоставить что-то для этого, чтобы перебрать. Вот link to .each() documentation.. Если вы хотите перебрать все, вам нужно добавить td в jquery call.

Мой фикс будет выглядеть следующим образом:

var $tr = $("#skuTable tbody tr td").eq(0).clone(); //get all td of sku-table 
    var dict = {}; 
    $tr.each(function(){ 
     var type = $(this).attr('id'); // get value of current tr 
     var value = $(this).html();  // get html content inside of tr 

     switch (type) { 
     case "group": 
      dict["SKU Group"] = value; 
      break; 
     } 
    }); 

    $('#group').val(dict['SKU Group']); // set value of the input field