用户编辑页面后保存页面

我想在javascript和用户编辑后保存页面的HTML文件。该页面由复选框和输入框组成，我希望该页面以.html格式保存到我的服务器上（最好使用php）。我可以使用任何类型的javascript或html库。

改变DOM的Javascript代码：

function init(){
document.getElementById("evalueeid").value = <?php echo changeNameToId($_POST['nEvaluee'], "evaluees");?>;
document.getElementById("evaluatorid").value = <?php echo changeNameToId($_POST['nEvaluator'],"evaluators");?>;
var JSONObservation = <?php echo $observation; ?>;
var counter =1;
if(JSONObservation!=0){
    while(document.getElementsByName("q"+counter).length!=0){
        if(JSONObservation["q"+counter]!=null){
            document.getElementsByName("q"+counter)[JSONObservation["q"+counter]].checked=true;
        }
        counter++;
    }
    var counter=1;
    while(document.getElementsByName("qc"+counter).length!=0){
        for(var i=0; i<JSONObservation["qc"+counter].length;i++){
            document.getElementsByName("qc"+counter)[JSONObservation["qc"+counter][i]].checked=true;
        }
        counter++;
    }
    var counter=1;
    while(document.getElementsByName("qi"+counter).length!=0){
        document.getElementsByName("qi"+counter)[0].value=JSONObservation["qi"+counter];
        counter++;
    }
}

}

观察是一个JSON字符串，格式为：

{"q1":0,"q2":1,"q3":0,"q4":1,"q5":2,"q6":1,"q7":1,"q8":1,"q9":1,"q10":2,"q11":1,"q12":0,"q13":0,"q14":1,"q15":1,"q16":1,"q17":0,"q18":0,"q19":1,"q20":1,"q21":1,"q22":0,"q23":0,"qc1":[3,5,6,7],"qc2":[6],"qi1":"Good","qi2":"Bad","qi3":"Funny","qi4":"Hello"}

HTML如下所示：

<div class="question">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th class="first"></th>
                <th>4</th>
                <th>3</th>
                <th>2</th>
                <th>1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1A. Plans lessons and activities that meet the variety of students' skill levels, learning styles and is developmentally appropriate.</td>
                <td><input type="radio" name="q1" value="1A4" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q1" value="1A3" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q1" value="1A2" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q1" value="1A1" style="display:block; margin:auto;"></td>
            </tr>
            <tr>
                <td>1B. Evaluates and selects resources and curricular materials that ensure students engage with the curriculum.</td>
                <td><input type="radio" name="q2" value="1B4" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q2" value="1B3" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q2" value="1B2" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q2" value="1B1" style="display:block; margin:auto;"></td>
            </tr>
            <tr>
                <td>1C. Designs lessons that motivate students to connect to their learning.</td>
                <td><input type="radio" name="q3" value="1C4" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q3" value="1C3" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q3" value="1C2" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q3" value="1C1" style="display:block; margin:auto;"></td>
            </tr>
            <tr>
                <td>1D. Organizes and prepares students for independent and group work that allows for full and varied participation of all individuals through various modes of communication.</td>
                <td><input type="radio" name="q4" value="1D4" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q4" value="1D3" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q4" value="1D2" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q4" value="1D1" style="display:block; margin:auto;"></td>
            </tr>
            <tr>
                <td>1E. Plans instruction for the full spectrum of students' learning needs by accessing appropriate services, strategies, or resources and by linking curriculum with prior knowledge, experience, and/or cultural contexts.</td>
                <td><input type="radio" name="q5" value="1E4" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q5" value="1E3" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q5" value="1E2" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q5" value="1E1" style="display:block; margin:auto;"></td>
            </tr>
            <tr>
                <td>1F. Plans for cross-content connections.</td>
                <td><input type="radio" name="q6" value="1F4" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q6" value="1F3" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q6" value="1F2" style="display:block; margin:auto;"></td>
                <td><input type="radio" name="q6" value="1F1" style="display:block; margin:auto;"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="question">
    <div class="question-header">
        <h2 class="question-title">Standard 1: Possible sources of evidence for this domain (in addition to direct observation).</h2>
    </div>
    <div class="question-body">
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="0"> Assessments &nbsp;</span>
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="1"> Student Work &nbsp;</span>  
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="2"> Documentation &nbsp;</span> 
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="3"> Relevant Data &nbsp;</span> 
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="4"> Student Records &nbsp;</span>   
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="5"> Professional Development Materials and Reflections &nbsp;</span>    
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="6"> Journals &nbsp;</span>  
        <span style="white-space: nowrap;"><input type="checkbox" name="qc1" value="7"> Other, please specify... &nbsp; 
        <input type="text" name="q8"></span>
    </div>
    <div class="question-header">
        <h2 class="question-title">Standard 1: Comments:</h2>
    </div>
    <textarea cols="50" name="qi1" rows="2"></textarea>
    <br>
</div>
<div class="question">
    <div class="question-header">
        <h2 class="question-title">View Standard 2 Rubrics</h2>
    </div>
    <div class="question-body">
        <input type="radio" name="SR2" value="2A" onclick="showRubric(this);"> 2A Rubric &nbsp; 
        <input type="radio" name="SR2" value="2B" onclick="showRubric(this);"> 2B Rubric &nbsp; 
        <input type="radio" name="SR2" value="2C" onclick="showRubric(this);"> 2C Rubric &nbsp; 
        <input type="radio" name="SR2" value="2D" onclick="showRubric(this);"> 2D Rubric &nbsp; 
        <input type="radio" name="SR2" value="2E" onclick="showRubric(this);"> 2E Rubric &nbsp; 
        <input type="radio" name="SR2" value="2F" onclick="showRubric(this);"> 2F Rubric &nbsp; 
        <input type="radio" name="SR2" value="2G" onclick="showRubric(this);"> 2G Rubric &nbsp; 
        <input type="radio" name="SR2" value="2H" onclick="showRubric(this);"> 2H Rubric &nbsp; 
        <input type="radio" name="SR2" value="2I" onclick="showRubric(this);"> 2I Rubric &nbsp; 
    </div>
</div>
<div class="question">
    <img id="img2A" src="./rubrics/imgt2A.jpg" style="display:none" />
    <img id="img2B" src="./rubrics/imgt2B.jpg" style="display:none" />
    <img id="img2C" src="./rubrics/imgt2C.jpg" style="display:none" />
    <img id="img2D" src="./rubrics/imgt2D.jpg" style="display:none" />
    <img id="img2E" src="./rubrics/imgt2E.jpg" style="display:none" />
    <img id="img2F" src="./rubrics/imgt2F.jpg" style="display:none" />
    <img id="img2G" src="./rubrics/imgt2G.jpg" style="display:none" />
    <img id="img2H" src="./rubrics/imgt2H.jpg" style="display:none" />
    <img id="img2I" src="./rubrics/imgt2I.jpg" style="display:none" />
</div>
<div class="question">

等等。等等