Javascript 用户编辑页面后保存页面

我想在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++;
    }
}

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">

4.
3.
2.
1.
1A。计划课程和活动，以满足不同学生的技能水平、学习风格和发展需要。
1B。评估和选择资源和课程材料，确保学生参与课程。
1C。设计课程，激励学生与他们的学习相联系。
1D。组织和准备学生进行独立和小组工作，允许所有个人通过各种交流方式充分和多样地参与。
1E。通过获取适当的服务、策略或资源，并将课程与先前的知识、经验和/或文化背景联系起来，为学生的各种学习需求制定教学计划。
1F。跨内容连接的计划。
标准1：该领域的可能证据来源（除了直接观察）。
评估
学生作业
文档
相关数据
学生档案
专业发展资料与思考
期刊销售
其他，请说明。。。
标准1：评论：


查看标准2量规
2A量规
2B量规
2C量规
二维量规
2E量规
2F量规
2G量规
2H量规
2I量规

---

等等。

您需要一个PHP文件从表单中获取post数据并创建HTML页面。之后，您可以使用PHP“File Create/Write”函数将文件内容保存到服务器上。您可以在此处找到一些有用的信息：

如果其他用户再次编辑该页面，您以前对该页面所做的更改将丢失？用户必须登录才能编辑该页面。该页面将保存在“username.html”下，因此每次同一用户编辑时都会覆盖其文件。使用PHP创建html页面将花费大量时间，您甚至会怎么做？使用xpath？不需要xpath。自定义编写，如下所示：$html=“此处有一些html代码”；这是我一开始想做的，但是很多$html字符串通常是用Javascript编辑的。我正在提取一个JSON字符串并将其解析为复选框。你能发布一些代码吗？我帮不了你的忙。

<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">