title: How to save edited data from a table back to the database with jquery
body: <p>I have a table where users can click on the row and then edit the row. I want to now be able to save it back to the database. How can I do this? I'm just not sure how to create the ajax call to run it. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// overlay functions
  function openOverlay(){
    document.getElementById("pageOverlay").style.visibility = "visible";
  }
  function closeOverlay(){
    document.getElementById("pageOverlay").style.visibility = "hidden";
  }
  // show row data to be edited or view single row
  $(".rowEditData").click(function() {
       html = "&lt;div id='editableTableDiv'&gt;&lt;label class='editRowLabel'&gt;Shape Name:&lt;/label&gt; &lt;input type='text' class='mdl-textfield__input' name='shapeName' value="+ $(this).find('td').eq(0).html() + "&gt;&lt;br&gt;&lt;label class='editRowLabel'&gt;Number Edges:&lt;/label&gt; &lt;input type='text' class='mdl-textfield__input' name='numberEdges' value="+ $(this).find('td').eq(1).html() + "&gt;&lt;br&gt;&lt;label class='editRowLabel'&gt;Sum of Interior Angles:&lt;/label&gt; &lt;input type='text' class='mdl-textfield__input' name='sumAngles' value="+ $(this).find('td').eq(2).html() + "&gt;&lt;br&gt;&lt;br&gt;&lt;input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Save' onclick='saveNewRowData()'&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Close' onclick='closeOverlay()'&gt;&lt;/div&gt;";
    $("#pageOverlay").html(html).show();
    openOverlay();
  });
  
  function saveNewRowData(){
      shapeName = $("input[name=shapeName]").val();
      numberEdges = $("input[name=numberEdges]").val();
      sumAngles = $("input[name=sumAngles]").val();
      $.ajax({
          url: "someURLhere.php",
          data: data,
          type: "post"
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pageOverlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 99;
  }
  #pageOverlay div {
    padding: 1%;
    width: 30%;
    height: 80%;
    margin: 100px;
    margin-left: 35%;
    background-color: rgb(255, 255, 255);
  }
  .editRowLabel {
    font-weight:bold; 
    font-size:16px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="pageOverlay"&gt;&lt;/div&gt;
  &lt;table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp dataTable no-footer" role="grid"&gt;
    &lt;thead&gt;
      &lt;tr role="row"&gt;
        &lt;th class="mdl-data-table__cell--non-numeric sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Shape Name: activate to sort column descending" style="width: 401px;"&gt;Shape Name&lt;/th&gt;
        &lt;th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Number Edges: activate to sort column ascending" style="width: 436px;"&gt;Number Edges&lt;/th&gt;
        &lt;th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Sum of Interior Angles: activate to sort column ascending" style="width: 638px;"&gt;Sum of Interior Angles&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="rowEditData odd" value="7924" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;Hexagon&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;6&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7923" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;6&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7930" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;3&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;180&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7931" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;4&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;360&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7932" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;5&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;540&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7933" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;6&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;120&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7934" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;10&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;1440&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7925" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;Octagon&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;8&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7922" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;pentagon&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7926" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;Pentagon&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7920" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;square&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;4&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7927" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;Square&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7928" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;Square&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;4&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7921" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;trapezoid&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;4&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7919" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;triangle&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;3&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7929" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric sorting_1"&gt;Triangle&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;3&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>