Ajout d'une ligne à l'aide de PHP/JavaScript/AJAX à la base de données

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 qui a été 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(type + " : " + value); et il renvoie sku_group-0 : dans les journaux. Je fais également un console.log(dict) et la sortie dans le journal est Object {} donc il ne semble pas que la valeur entrée soit en train d'être enregistrée. Je reçois également un message row inserted réussi dans les journaux, donc il semble que c'est juste une question de pouvoir lire les valeurs pour qu'elles puissent ensuite être traitées dans le script insert-group.php.

Donc, ma question est comment puis-je l'obtenir pour lire la valeur dans le JavaScript afin qu'il puisse être entré avec succès dans la base de données?

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> 

HTML bouton Ajouter:

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

JavaScript:

$(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 td").eq(0).clone(); 
     var dict = {}; 
     var errors = ""; 
     $tr.each(function(){ 
     var type = $(this).attr('id'); 
     var value = $(this).html(); 
     console.log(type + " : " + value); 

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

?> 

Answer 1

REPLACE 
    "data: dict" 
    WITH 
    data:{ 'SKU_Group' : $('#group').val() } 

    AND 

    REPLACE 
    "$SKU_Group = $_POST['SKU Group'];" 
    WITH 
    $SKU_Group = $_POST['SKU_Group']; 

Answer 2

Vous devriez obtenir votre valeur d'entrée avec:

$('#group').val()