Question

我有一个可以点击的按钮，它会打开一个带有一个文本字段的弹出框。每当我输入内容并单击“添加”时，我希望将其插入到我的数据库中。

目前，当我点击“添加”时，它会插入到数据库中，但它不会读取输入的值。因此，只需输入空值。我没有收到任何可以看到的错误，但是在我的JavaScript中我执行console.log(type + " : " + value);并在日志中返回sku_group-0 :。我也做console.log(dict)，日志中的输出是Object {}，因此看起来输入的值不会被记录。我也在日志中收到一条成功的row inserted消息，所以我肯定认为这只是能够读取值的问题。

所以我的问题是如何让它读取值并成功将其输入数据库。

添加按钮的HTML：

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

弹出框的HTML：

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

  });

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

修改声明

sku_group = $( "#group" )

与

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

这应该可以解决您的问题。

编辑以将TxtValue保存到数据库中...

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

用服务器函数参数替换[agrumentName]。

希望这会有所帮助：）

使用JavaScript / AJAX将行插入数据库

1 个答案: