title: Permanently change HTML text using jQuery UI Modal Form
body: <p>I have a few tables on an HTML page in which I need to make the content inside the <code>&lt;td&gt;</code> tags editable using a jQuery UI Modal Form, meaning that using the jQuery UI Modal Form one should be able to <b>permanently</b> edit the content.</p>
  
  <p>For example:</p>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td id="name"&gt;John Doe&lt;/td&gt;
      &lt;td id="number"&gt;999 999 9999&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;button id="edit"&gt;Edit&lt;/button&gt;
  </code></pre>
  
  <p><b>The Modal Form:</b></p>
  
  <pre><code>&lt;div id="edit-form" title="Edit Info"&gt;
    &lt;form&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Contact Info&lt;/legend&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;Name&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="cName" id="cName" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Number&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="cNumber" id="cNumber" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>Javascript/jQuery</b></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(function () {
      var name = $("#cName"),
          number = $("#cNumber");
  
      $("#edit")
          .button()
          .click(function () {
              $("#edit-form").dialog("open");
  
      $("#edit-form").dialog({
          autoOpen: false,
          height: 'auto',
          width: 'auto',
          modal: true,
          buttons: {
              "Apply": function () {
                  document.getElementById('name').innerHTML = name.val();
                  document.getElementById('number').innerHTML = number.val();
                  $(this).dialog("close");
              },
              Cancel: function () { $(this).dialog("close"); }
          }
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>However, this only changes the HTML text <b>temporarily</b>. If I reload the page, the old text is back.</p>
  
  <p>How can I implement this so that the new text replaces the old text (i.e. it written to the file)? Any help is appreciated!</p>