防止保存html内容的多个副本

Question

I have been working on part of a program that saves the html of the currently displayed page to another file upon pressing button. My problem is that it works just fine if you pause in between button presses a few seconds but if you press the button more than once quickly it will save the file but the html in the file is not correct. It basically looks like it is saving multiple copies of the original html contents to the file.

Below is the code I am using:

HTML:

<form method="POST" action="app/savePage.php" id="file-options-form" name="file-options-form">

    <!--used to store content before it is saved-->
    <input type="hidden" value="" name="content" id="tm-content">

    <!--used to store scripts before it is saved-->
    <input type="hidden" value="" name="scripts" id="tm-scripts">

    <!--used to store styles before it is saved-->
    <input type="hidden" value="" name="styles" id="tm-styles">

    <span id="file-button-container">
        <input type="button" name="new-page-button" value="New Theme" id="new-page-button">
        <input type="submit" name="save-button" value="Save Theme" id="save-button">
        <label for="theme-name">Theme Name:</label>
        <input type="text" value="" name="theme-name" id="theme-name">
    </span>

</form>

Javascript/JQuery:

$("#file-options-form").submit(function(e){//begin function

 //stop form from submitting
 e.preventDefault(); 

 //the content to save
 var contentToSave = [];

 //add the html of the file to the contentToSave array
 contentToSave.push($("html")[0].outerHTML);

 //store the content in the #tm-content hidden input box
 $("#tm-content").val(contentToSave.join(""));

 //url for saveTheme.php file
 var url = "/thememaker/app/saveTheme.php";

 //begin ajax function
 $.ajax({//begin ajax function
    type:"POST",
    url: url,
    data:$(this).serialize(),
     success:function(data){//begin success function

     },//end success function
     error:function(e){

        alert(e);

     }

 //todo: fix multiple button press problem
 });//end ajax function

});//end function

Attempted fixes:

1. I have tried disabling the button on click and then enabling it on the ajax success function

2. I have tried hiding the button on click and then enabling on the ajax success function

Answer 1

This was the real solution to my problem. I was not clearing the contents of the #tm-content input box after submitting the form successfully.

       $("#file-options-form").submit(function(e){//begin function

             //stop form from submitting
             e.preventDefault(); 

            //the content to save
            var contentToSave = [];

           //add the html of the file to the contentToSave array
           contentToSave.push($("html")[0].outerHTML);

          //store the content in the #tm-content hidden input box
          $("#tm-content").val(contentToSave.join(""));

          //url for saveTheme.php file
          var url = "/thememaker/app/saveTheme.php";

         //begin ajax function
         $.ajax({//begin ajax function
                type:"POST",
                 url: url,
                 data:$(this).serialize(),
                 success:function(data){//begin success function


           //clear the content when it is submitted successfully
           $("#tm-content").val(""); //<------code that fixed the problem

         },//end success function
            error:function(e){

             alert(e);

         }


         });//end ajax function