Insérer une ligne dans la base de données en utilisant HTML/PHP/AJAX

Question

J'ai un bouton qui peut être cliqué qui fera apparaître une boîte popup avec un champ de texte. Chaque fois que j'entre quelque chose et que je clique sur "Ajouter", je veux qu'il soit inséré dans ma base de données.

Actuellement, lorsque je clique sur "Ajouter", il va insérer dans le DB, mais il ne lira pas la valeur entrée. Par conséquent, une valeur nulle est simplement entrée. Je ne reçois aucune erreur que je peux voir, mais dans mon JavaScript, je fais un console.log(dict) et la sortie dans le journal est Object {} donc il ne semble pas que la valeur entrée est en cours de journalisation. Je reçois également un message d'insertion de ligne avec succès dans les journaux, donc je pense vraiment que c'est juste une question de pouvoir lire les valeurs. Donc, ma question est comment puis-je l'obtenir pour lire la valeur et entrer avec succès dans la base de données.

HTML bouton Ajouter:

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

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

    }); 

scénario insertion 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

Ma table 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

Votre valeur ne bonne Essayez de changer

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

Pour

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

Answer 2

Essayez de changer la fonction $.each-$tr.each. Je pense que vous devriez fournir quelque chose pour que cela se répande. Voici le link to .each() documentation.. Si vous voulez parcourir tout, vous devez ajouter td à jquery call.

Mon solution ressemblerait à ceci:

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