Utilisation de JavaScript/AJAX pour insérer une ligne dans 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 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:

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

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:

$(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

Modifier la déclaration

sku_group = $("#group") 

avec

sku_group = $("#group").val(); 

Cela devrait résoudre votre problème.

Modifier pour sauver TxtValue dans la base de données ...

$(function() { 
     var TxtValue = $("#group").val(); 

     $("#submit").click(function (e) { 

       e.preventDefault(); 
      if(!TxtValue){ 
       $.ajax({ 
        type: "POST", 
        url: "insert-group.php", 
        data: {[agrumentName]: TxtValue}, 
        success: function(e){ 
         console.log(e); 
         console.log("Row Insrerted"); 
        } 
       }); 
      } 
      else{ 
       console.log("Cannot Insert Null Value"); 
      } 
     }) 
    }) 

REMPLACER [agrumentName] avec votre argument de la fonction de serveur.

Espérons que cela aide :)