将值从一个表单字段传递到可扩展形式的其他字段

Question

我有一个可动态扩展的表单，在顶部我希望用户能够设置将在整个表单中复制的默认值。我一直在尝试对日期字段进行一次onchange事件，但它不会更新随后的日期字段。

我试图通过更改元素ID和名称（没有成功）来对代码进行故障排除。

function updateDate(value) {
  document.getElementById("date").value = value;
}

<!-- HTML for the initial field -->
<div class="col-sm-auto">
  <input type='date' class='form-control' onchange="updateDate(this.value)" id='default_date' name='default_date' value='' data-toggle="tooltip" data- placement="top" title="The date the shift started." />
</div>
<!-- HTML for the field that it is supposed to be updating -->
<div class="col-sm-auto">
  <input type='date' class='form-control' name='date' id='date' value='' data-toggle="tooltip" data-placement="top" title="The date the shift started." />
</div>

我希望它设置id ='date'的任何日期字段的值，但我什么也看不到。

###更多代码###

这是页面上HTML的其余部分。它仍然不会更新表单字段的初始集合。但是，正如评论中指出的那样，它确实会通过单击“添加其他响应者”按钮来更新添加的所有其他字段。

<!-- HIDDEN DYNAMIC ELEMENT TO CLONE -->
<!-- you can replace it with any other elements -->
<div class="form-group dynamic-element" style="display:none">
    <div class="row">
        <div class="col-md-auto"></div>

  <!-- Replace these fields -->
    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
        <input type='date' class='form-control' name='date' id='date' value='' data-toggle="tooltip" data-placement="top" title="The date the shift started."/>
    </div>

<!--These DIVs are used for additional for fields. I removed the code for ease of troubleshooting-->        
    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
    </div>

    <div class="col-sm-auto">
    </div>
    <div class="col-sm-auto">
    </div>

    <!-- End of fields-->
    <div class="col-md-auto">
      <button class="btn btn-outline-danger delete1">Delete Row</button>
    </div>
  </div><hr>
</div>

<!-- END OF HIDDEN ELEMENT -->

<div class="container" style="display:inline">
  <form class="form-horizontal" action='<?php echo $_SERVER['PHP_SELF']?>' method='post'>
    <fieldset>
      <!-- Form Name -->
      <legend class="title">Enter Times</legend>

      <!--Default Form Values-->

          <div class="container col-sm-auto border-bottom pb-3 pt-3 bg-info">
            <div class='row'>
                <div class="col-md-auto column1"><h5>Set your default values:</h5>
                </div>

                <div class="col-sm-auto">
                    <input type='date' class='form-control' onchange="updateDate(this.value)" id='default_date' name='default_date' value='' data-toggle="tooltip" data-placement="top" title="The date the shift started."/>
                </div>

                <!--Additional Form fields removed for troubleshooting-->

                <div class="col-sm-auto">
                </div>

                <div class="col-sm-auto">
                </div>

                <div class="col-sm-auto">
                </div>

                <div class="col-sm-auto">
                </div>
            </div>
          </div> 
<!-- End Default Values -->        

          <div class="dynamic-stuff">
            <!-- Dynamic element will be cloned here -->
            <!-- You can call clone function once if you want it to show it a first element-->
          </div>

          <!-- Button -->
          <div class="form-group">
            <div class="row">
              <div class="col-md-12">
                <div class="col-4 mx-auto">
                  <a href="#" class="btn btn-outline-success add-one" role='button'>Add Another Responder</a>
                  <button class="btn btn-outline-primary" type="submit" name="timesubmit" id="timesubmit">Submit Times</button>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
    </form>
</div>


<!--php removed to troubleshoot HTML & JS-->

<script>

    //Clone the hidden element and shows it
    $(document).ready(function(){
        $('.dynamic-element').first().clone().appendTo('.dynamic-stuff').show();
  attach_delete();
});       

$('.add-one').click(function(){
  $('.dynamic-element').first().clone().appendTo('.dynamic-stuff').show();
  attach_delete();
});
//Attach functionality to delete buttons
function attach_delete(){
  $('.delete1').off();
  $('.delete1').click(function(){
    console.log("click");
    $(this).closest('.form-group').remove();
  });
}

//Set Default Variables On Change
    function updateDate(value){
    document.getElementById("date").value = value;
}

//Make Table Rows Clickable
    $(document).ready(function($) {
    $(".table-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

</script>