Zeile in Datenbank einfügen mit HTML/PHP/AJAX

Question

Ich habe eine Schaltfläche, die angeklickt werden kann, die ein Popup-Feld mit einem Textfeld öffnet. Immer wenn ich etwas eingebe und auf "Hinzufügen" klicke, möchte ich es in meine Datenbank einfügen.

Momentan, wenn ich auf "Add" klicke, wird es in die DB eingefügt, aber es liest den eingegebenen Wert nicht. Daher wird einfach ein Nullwert eingegeben. Ich bekomme keine Fehler, die ich sehen kann, aber in meinem JavaScript mache ich eine console.log(dict) und die Ausgabe im Protokoll ist Object {}, also sieht es nicht so aus, als ob der eingegebene Wert protokolliert wird. Ich bekomme auch eine erfolgreiche Zeileneinfügemeldung in den Protokollen, also würde ich definitiv denken, dass es nur darum geht, dass die Werte gelesen werden können.

Also meine Frage ist, wie kann ich es bekommen, um den Wert zu lesen und erfolgreich in die Datenbank eingeben.

HTML button:

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

HTML von Popup-Fensters:

<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"); 
    }); 

    }); 

Insert-group.php Skript:

<?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

Meine HTML-Tabelle:

<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

Ihr Wert nicht gut Try

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

Um

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

Answer 2

Versuchen Sie, ändern Sie Ihre $.each Funktion $tr.each ändern. Ich denke, du solltest etwas dafür bereitstellen, um darüber zu iterieren. Hier ist die link to .each() documentation.. Wenn Sie über alle 's iterieren wollen, müssen Sie td zum jquery Aufruf hinzufügen.

Mein fix würde wie folgt aussehen:

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