Javascript创建动态html输入，在表单提交后不保留

这是我的密码

<form action="" method ="get">
    <script type="text/javascript">
            function showDateInputs(timeValue){
                
                var oldDiv = document.getElementById("newDiv");
                //alert(timeValue);
                if (oldDiv != null){
                        oldDiv.parentNode.removeChild(oldDiv);
                }
                
                var newDiv = document.createElement('div');
                newDiv.setAttribute("id", "newDiv");
                newDiv.setAttribute("style", "display: inline;");
                if (timeValue == 1){
                    //alert("no way");
                    newDiv.innerHTML = "Start Date <input type='date' name='start' id='start' value='<?php echo date('Y-m-d', strtotime('-1 year')); ?>' min='2018-01-02' max='<?php echo date('Y-m-d'); ?>'> End Date <input type='date' name='end' id='end' value='<?php echo date('Y-m-d'); ?>' min='2018-01-03' max='<?php echo date('Y-m-d'); ?>'>";
                    document.getElementById('timeInputs').appendChild(newDiv);
                }
                else if (timeValue == 2){
                    //alert("yes way");
                    newDiv.innerHTML = "Select Week <input type='week' name='start' id='start' value='<?php echo date('Y').'-W'.date('W'); ?>' min='2018-W01' max='<?php echo date('Y').'-W'.date('W'); ?>'>";
                    document.getElementById('timeInputs').appendChild(newDiv);
                }
            }
    </script>
    <script type="text/javascript">
        function showDateInputsWeek(timeValue){
            if (timeValue == 2) {
                var oldDiv = document.getElementById("newDiv");
                //alert(timeValue);
                if (oldDiv != null){
                        oldDiv.parentNode.removeChild(oldDiv);
                }

                var newDiv = document.createElement('div');
                newDiv.setAttribute("id", "newDiv");
                newDiv.setAttribute("style", "display: inline;");

                //alert("yes way");
                newDiv.innerHTML = "Select Week <input type='week' name='start' id='start' value='<?php echo $_GET['start']; ?>' min='2018-W01' max='<?php echo date('Y').'-W'.date('W'); ?>'>";
                document.getElementById('timeInputs').appendChild(newDiv);
            }               
        }

    </script>
    <script type="text/javascript">
        function showDateInputsRange(timeValue){
            if (timeValue == 1) {
                var oldDiv = document.getElementById("newDiv");
                //alert(timeValue);
                if (oldDiv != null){
                        oldDiv.parentNode.removeChild(oldDiv);
                }

                var newDiv = document.createElement('div');
                newDiv.setAttribute("id", "newDiv");
                newDiv.setAttribute("style", "display: inline;");

                //alert("no way");
                newDiv.innerHTML = "Start Date <input type='date' name='start' id='start' value='<?php echo $_GET['start']; ?>' min='2018-01-02' max='<?php echo date('Y-m-d'); ?>'> End Date <input type='date' name='end' id='end' value='<?php echo $_GET['end']; ?>' min='2018-01-03' max='<?php echo date('Y-m-d'); ?>'>";
                document.getElementById('timeInputs').appendChild(newDiv);
            }           
        }
    </script>
    

    <label for="timePeriod">Utilization Hours:</label>
    <div id="timeInputs" style="display: inline">
        <select name="timePeriod"  id="timePeriod" onchange="showDateInputs(value)">
            <option value="4">past 4 Hours</option>
            <option value="8">past 8 Hours</option>
            <option value="16">past 16 Hours</option>
            <option selected value="24" >past 24 Hours</option>
            <option value="1">select range</option>
            <option value="2">select week</option>
        </select>
    
    </div>
    <input type="submit" name="submit" value="Submit">

  <script type="text/javascript">
      

      document.getElementById('timePeriod').value = "<?php echo $_GET['timePeriod'];?>";
      showDateInputsRange(document.getElementById('timePeriod').value);
      showDateInputsWeek(document.getElementById('timePeriod').value);
  </script> 
</form>

函数showDateInputs（时间值）{
var oldDiv=document.getElementById（“newDiv”）；
//警报（时间值）；
如果（oldDiv！=null）{
oldDiv.parentNode.removeChild（oldDiv）；
}
var newDiv=document.createElement（'div'）；
setAttribute（“id”、“newDiv”）；
setAttribute（“样式”，“显示：内联；”）；
如果（时间值==1）{
//警惕（“不可能”）；
newDiv.innerHTML=“开始日期这是完全合乎逻辑的，因为表单在提交后刷新DOM，您需要使用以下方法防止表单提交时刷新DOM：

$("#form_ID").submit(function(e) {
    e.preventDefault();
});

确保添加HTML标记以包含表单

此外，您还可以添加一个JS方法来处理表单提交操作：

var form = document.getElementById("form_ID");
function handleFormSubmit(event) { 
    event.preventDefault(); 
} 
form.addEventListener('submit', handleFormSubmission());

因此，我知道我的方法没有AJAX解决方案那么理想，但我明白了为什么我的showDateInputsRange（）有效，而我的showDateInputsWeek（）无效。当它是一个星期的输入时，URL中没有结束变量，因为我每次都调用这两个函数，所以showDateInputsRange（）函数将抛出一个错误，因为没有名为“end”的变量正在尝试获取。
动态生成的内容不会在页面加载过程中持续存在。某些内容似乎持续存在的事实是因为您显式调用
showDateInputsRange
和
showDateInputsWeek
这是一个“php”问题吗？我提出了“php"因为我使用了很多方法来获取值，但不确定这是否是问题所在。@FunkFortyNiner教授Abronsius，这就是问题所在。showDataInputsRange允许范围保持不变，但showDateInputsWeek不允许周选择保持不变。这就是我试图做的。@ProfessorAbronsius教授将它保留给您可以将新结构存储在
sessionStorage
中，并在重新加载页面时使用该结构进行重建我并不试图阻止我的表单提交。我需要它将变量放入URL中，然后我需要它提交。我有一个函数，在提交时运行，以查看它是星期还是范围，然后保留它们新创建的输入范围部分有效，但不是第一周。我看不出阻止提交在这里有什么帮助。@Rayen也没有，只是你必须通过ajax提交表单，这将允许表单保留其当前数据并仍然提交。否则，实际表单提交将刷新页面，导致所有动态内容都必须被删除重新生成。或者，您可以返回所需的值，让php代码侦听并强制它填充动态生成的内容，但这不会是自动的。@Danimal感谢您的澄清。我确信这是我第一次使用Javascript。我相信我正在尝试您的我的showDataInputsRange和showDataInputsWeek的第二点。我在php中有一个isset（submit）来用表单设置的内容更新php全局。@Danimal，有两种方法：1-使用
event.preventDefault（）
您可以调用另一个包含表单提交逻辑的方法。或者您也可以像u所说的那样使用ajax。@Byrge，正如我所说的，您将调用另一个方法将表单数据提交到自定义URL。这取决于您的需要和背后的逻辑。祝您好运！您现在满意地解决了问题了吗？是的，我知道了st根据哪种情况使用if，这样它就不再调用需要在url中结束的函数。这就解决了它。@ProfessorAbronsius