title: Editing an HTML Table Row and Update to Database
body: <p>I have an edit button that can be clicked in each row of the my HTML table that I currently have.</p>
  
  <p>Currently, when I click "Edit", I can edit the cells in the corresponding rows and columns, but when I click the button again, which is then a save button, it will not read the value entered. I get no errors that I can see, however in my JavaScript I do a <code>console.log(type)</code> and the output is <code>delete</code> which has me very confused. It should be whatever the <code>case</code> value is in my switch statement, so in this case it should be <code>group_id</code> and <code>sku_group</code>. I then do another <code>console.log(dict)</code> and the output in the log is <code>Object {}</code> so it doesn't look like the row values are being logged. I also am getting a successful row updated message in the logs too so I would definitely think that it is just a matter of being able to get the values in the row to be read.</p>
  
  <p>So my question is how can I get it to read the values and successfully update the info in the database.</p>
  
  <p>HTML/PHP Table:</p>
  
  <pre><code>&lt;table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content"&gt;
      &lt;thead&gt;
          &lt;tr class="ui-widget-header"&gt;
              &lt;th class="skuRow"&gt;SKU Group&lt;/th&gt;
              &lt;th class="skuRow"&gt;Group ID&lt;/th&gt;
              &lt;th class="skuRow"&gt;Edit&lt;/th&gt;
              &lt;th class="skuRow"&gt;Delete&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
          &lt;?php foreach ($dbh-&gt;query($sql_table) as $rows) { ?&gt;
  
          &lt;tr&gt;
              &lt;td class="sku_group" id="sku_group-&lt;?=intval ($rows['SKU Group'])?&gt;"&gt;&lt;?php echo $rows['SKU Group']?&gt;&lt;/td&gt;
              &lt;td class="group_id" align="center" id="group_id-&lt;?=intval ($rows['Group_ID'])?&gt;"&gt;&lt;?php echo $rows['Group_ID']?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="edit" name="edit" value="Edit"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="delete" value="Delete" onclick="deleteRow(this)"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;?php
          }
      ?&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript for Edit function:</p>
  
  <pre><code>// ----- Edit Row -----
  
  $(document).on("click", "#skuTable .edit", function () {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function () {
      return $(this).find('.edit').length === 0;
    });
    if ($this.val() === 'Edit') {
      $this.val('Save');
     if($this.id !== '.sku_group') {
          tds.prop('contenteditable', true);
     }
    } else {
      var isValid = true;
      var errors = '';
      $('#myDialogBox').empty();
      var elements = tds;
      if (tds.find('input').length &gt; 0) {
        elements = tds.find('input');
      }
      var dict = {}; 
      elements.each(function (index, element) {
        var type = $(this).attr('class');
        var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text();
        console.log(type);
        // ----- Switch statement that provides validation for each table cell -----
        switch (type) {
          case "group_id":
                dict["Group_ID"] = value;
            break;
          case "sku_group":
                dict["SKU Group"] = value;
            break;
        }
      })
      if (isValid) {
          console.log(dict);
        $this.val('Edit');
        tds.prop('contenteditable', false);
        var request = $.ajax({
            type: "POST",
            url: "update.php",
            data: dict
          });
  
          request.done(function (response, textStatus, jqXHR){
            if(JSON.parse(response) == true){
              console.log("row updated");
            } else {
              console.log("row failed to updated");
              console.log(response);
              console.log(textStatus);
              console.log(jqXHR);
            }
          });
  
          // Callback handler that will be called on failure
          request.fail(function (jqXHR, textStatus, errorThrown){
              // Log the error to the console
              console.log(textStatus);
              console.log(jqXHR);
              console.error(
                  "The following error occurred: "+
                  textStatus, errorThrown
              );
          });
  
          // Callback handler that will be called regardless
          // if the request failed or succeeded
          request.always(function () {
  
          });
      } else {
        alert(errors);
      }
    }
  });
  </code></pre>
  
  <p>Update.php script:</p>
  
  <pre><code>&lt;?php
  
    $SKU = $_POST['SKU Group'];
    $Group_ID = $_POST['Group_ID'];
  
    $host="xxxxxxxxxx"; 
    $dbName="xxxxx"; 
    $dbUser="xxxxxxxxxxxxxx"; 
    $dbPass="xxxxxxxxxxxx";
  
    $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);
  
    $sql = "UPDATE SKU_Group_Dim SET [SKU Group] = '$SKU' WHERE Group_ID = '$Group_ID'";
  
    $stmt = $pdo-&gt;prepare($sql);
    //$stmt-&gt;bindValue('[:SKU Group]', $SKU);
    //$stmt-&gt;bindValue(':Group_ID', $Group_ID)  
    $result = $stmt-&gt;execute();
    echo json_encode($result);
    if(!$result) {
        echo json_encode(sqlsrv_errors());
    }
  
  ?&gt;
  </code></pre>