如何使用JavaScript将文本从一个字段复制到另一个选项卡菜单的字段？

Question

我试图通过复选框将文本从文本字段复制到另一个“选项卡菜单”的文本字段。

如果“文本”选项卡菜单中的文本字段使用以下示例代码从https://www.htmlgoodies.com/tutorials/forms/article.php/3898101/How-To-Use-JavaScript-To-Copy-Text-From-One-Field-To-Another.htm

复制，则javascript将起作用

但是如何使用复选框将Tab 1文本字段复制到Tab 2文本字段？

这就是我尝试过的c.frm_DQ.poc_person1.value = c.frm_ID.poc_person.value;

<script>
     function ContactCopy(c) {
       if(c.frm_contactCopy.checked == true) {
         c.poc_person1.value = c.poc_person.value;
       }
     }

<script>
    function ContactCopy(c) {
      if(c.frm_contactCopy.checked == true) {
        c.poc_person1.value = c.poc_person.value;
      }
     }
</script>

<div class="container">
   <!-- Nav tabs -->
   <ul class="nav nav-tabs" role="tablist">
     <li class="nav-item">
       <a class="nav-link active" data-toggle="tab" href="#menu1">Tab 1</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" data-toggle="tab" href="#menu2">Tab 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
  <div id="menu1" class="container tab-pane active"><br>

  <!-- beginning -->
  <div class="container py-3">
  <div class="row">
  <div class="mx-auto col-sm-12">

  <!-- form user info -->
  <form class="form" role="form" autocomplete="off" name="frm_ID">
      <div class="card">
      <div class="card-header">
      <b style="color:#C02E93">Section A</b>
      </div>
      <div class="card-body " style="background-color:#F8F9F9">   
      <p><b> Contact Information </b></p>
      <div class="form-group row pl-3 my-2">
          <label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
      <div class="col-lg-9">
          <input class="form-control" type="text" value="" name="poc_person">
       </div>
       </div>
           <input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
           <em>Check this box if Contact Details are the same as above.</em>    
      <div class="form-group row pl-3 my-2">
          <label class="col-lg-3 col-form-label form-control-label">Contact Person 2</label>
      <div class="col-lg-9">
          <input class="form-control" type="text" value="" name="poc_person1">
      </div>
      </div>        
      </div> 
      </div>
  </form>
  <!-- /form user info -->
  </div>
  </div>
  </div>    
  <!-- end -->
  <!--menu1 --> 
  </div>


  <div id="menu2" class="container tab-pane fade"><br>
  <!-- beginning -->
  <div class="container py-3">
  <div class="row">
  <div class="mx-auto col-sm-12">
  <!-- form user info -->
  <form class="form" role="form" autocomplete="off" name="frm_DQ">
      <br>
      <div class="card">
      <div class="card-header">
      <b style="color:#C02E93">Section B</b>
      </div>
      <div class="card-body " style="background-color:#F8F9F9">
      <div class="form-group row pl-3 my-2" >
          <label class="col-lg-3 col-form-label form-control-label"><b>Process Contact Information</b></label>
      </div>
          <input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
          <em>Check this box if Contact Details are the same as Section A.</em> 
      <div class="form-group row pl-3 my-2">
          <label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
      <div class="col-lg-9">
          <input class="form-control" type="text" value="" name="poc_person1">
      </div>
      </div> 
      </div>                    
      <br>
  </form>
  <!-- /form user info -->
  </div>
  </div>
  </div>
  <!-- end -->
  </div>

Answer 1

当您从第二个表单中单击带有类型的输入框时，参数c将引用名称为frm_DQ的表单，并且名称为poc_person的输入将出现在表单中，并带有名称属性frm_ID。因此，您的声明c.poc_person1.value = c.poc_person.value;将失败。相反，您可以使用poc_person直接获取输入querySelector。

function ContactCopy(c) {
    if(c.frm_contactCopy.checked == true) {
      c.poc_person1.value = document.querySelector('input[name="poc_person"]').value;
    }
}

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#menu1">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Tab 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="menu1" class="container tab-pane active"><br>
      <!-- beginning -->
      <div class="container py-3">
        <div class="row">
          <div class="mx-auto col-sm-12">
            <!-- form user info -->
            <form class="form" role="form" autocomplete="off" name="frm_ID">
              <div class="card">
                <div class="card-header">
                  <b style="color:#C02E93">Section A</b>
                </div>
                <div class="card-body " style="background-color:#F8F9F9">
                  <p><b> Contact Information </b></p>
                  <div class="form-group row pl-3 my-2">
                    <label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="" name="poc_person">
                    </div>
                  </div>
                  <input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
                  <em>Check this box if Contact Details are the same as above.</em>
                  <div class="form-group row pl-3 my-2">
                    <label class="col-lg-3 col-form-label form-control-label">Contact Person 2</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="" name="poc_person1">
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <!-- /form user info -->
          </div>
        </div>
      </div>
      <!-- end -->
      <!--menu1 -->
    </div>


    <div id="menu2" class="container tab-pane fade active show"><br>
      <!-- beginning -->
      <div class="container py-3">
        <div class="row">
          <div class="mx-auto col-sm-12">
            <!-- form user info -->
            <form class="form" role="form" autocomplete="off" name="frm_DQ">
              <br>
              <div class="card">
                <div class="card-header">
                  <b style="color:#C02E93">Section B</b>
                </div>
                <div class="card-body " style="background-color:#F8F9F9">
                  <div class="form-group row pl-3 my-2">
                    <label class="col-lg-3 col-form-label form-control-label"><b>Process Contact Information</b></label>
                  </div>
                  <input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
                  <em>Check this box if Contact Details are the same as Section A.</em>
                  <div class="form-group row pl-3 my-2">
                    <label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
                    <div class="col-lg-9">
                      <input class="form-control" type="text" value="" name="poc_person1">
                    </div>
                  </div>
                </div>
                <br>
            </form>
            <!-- /form user info -->
            </div>
          </div>
        </div>
        <!-- end -->
      </div>