複印功能只對某些輸入有效

Question

我在結帳頁面上設置了複印功能。其唯一目的是複製爲輸入的客戶輸入的文本，並將其輸入到確認部分的頁面中。

它對客戶名稱和地址1行非常有用。地址2，城市，州和郵編行不會顯示。我不知道爲什麼。我正在做與地址1和名稱完全相同的事情。我試圖更改數據副本名稱，但沒有任何工作。

這是客戶輸入其運輸信息的地方。

<div class="shippinginfocontainer"> 
    <span class="summarytitle"><p>Enter Shipping Information</p> 
</span><br> 
    <div class="center"> 
     <div class="field"> 
      <label class="paddingleft" for="fullname">Full Name</label> 
      <div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div> 
      </div> 
      <div class="field"> 
       <label class="paddingleft" for="streetline1">Street Line 1</label> 
       <div class="center"><input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" required></div> 
       </div> 
      <div class="field"> 
       <label class="paddingleft" for="streetline2">Street Line 2</label> 
       <div class="center"><input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="<?php echo escape($user->data()->streetline2); ?>"></div> 
       </div> 
      <div class="field"> 
       <label class="paddingleft" for="city">City</label> 
       <div class="center"><input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="<?php echo escape($user->data()->city); ?>" required></div> 
       </div> 
      </div> 
      <div class="formleftcenter"> 
       <div class="field"> 
        <label for="state">State</label> 
        <input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="<?php echo escape($user->data()->state); ?>" required> 
       </div> 
      <div class="formrightcenter"> 
       <div class="field"> 
        <label for="zipcode">Zip Code</label> 
        <input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="<?php echo escape($user->data()->zipcode); ?>" required> 
       </div> 

然後我複製文本到這裏（我離開的狀態出一個）：

<p>Shipping to:</p> 
    <p><div id="name"></div></p> 
    <p><div id="address1"></div></p> 
    <p><div id="address2"></div></p> 
    <p><div id="confirmcity"></div></p> 
    <p><div id="confirmzip"></div></p> 

jQuery的

$(document).ready(function() { 


$(".preview").on('input', function() { 
    $($(this).data('copy')).html($(this).val()); 
    }); 
}); 

任何想法，爲什麼它沒有那些投入工作？

Answer 1

你有名字&地址1輸入字段

<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required> 

預覽類，但你不要在其他輸入字段

預覽類

<input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2"> 

其他輸入字段類添加預覽

Answer 2

您的全名和地址1行只有'預覽'類。

您的jquery選擇器正在選擇頁面上的所有元素與類'預覽'，所以裏面的邏輯將只適用於類'預覽'的HTML元素。

你會想改變其餘的輸入以包括'預覽'類。

Answer 3

我不能說話的PHP部分，但HTML和jQuery應該是這樣的：

window.addAddress = function() { 
 
    var inputs = $('input').map(function() { 
 
     return $(this).val(); 
 
    }); 
 
    var i = 0; 
 
    $.each($('.data'), function(){ 
 
     $(this).html(inputs[i]); 
 
     i++; 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="shippinginfocontainer"> <span class="summarytitle"><p>Enter Shipping Information</p> 
 
</span> 
 
    <br> 
 
    <div class="center"> 
 
     <div class="field"> 
 
      <label class="paddingleft" for="fullname">Full Name</label> 
 
      <div class="center"> 
 
       <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" value="Mickey Gordon" required> 
 
      </div> 
 
     </div> 
 
     <div class="field"> 
 
      <label class="paddingleft" for="streetline1">Street Line 1</label> 
 
      <div class="center"> 
 
       <input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" value="Suite 105" required> 
 
      </div> 
 
     </div> 
 
     <div class="field"> 
 
      <label class="paddingleft" for="streetline2">Street Line 2</label> 
 
      <div class="center"> 
 
       <input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="701 Rackamac Ln"> 
 
      </div> 
 
     </div> 
 
     <div class="field"> 
 
      <label class="paddingleft" for="city">City</label> 
 
      <div class="center"> 
 
       <input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="Oxnard" required> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="formleftcenter"> 
 
     <div class="field"> 
 
      <label for="state">State</label> 
 
      <input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="California" required> 
 
     </div> 
 
     <div class="formrightcenter"> 
 
      <div class="field"> 
 
       <label for="zipcode">Zip Code</label> 
 
       <input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="93031" required> 
 
      </div> 
 
      <p>Shipping to:</p> 
 
      <p> 
 
       <div id="name" class="data"></div> 
 
      </p> 
 
      <p> 
 
       <div id="address1" class="data"></div> 
 
      </p> 
 
      <p> 
 
       <div id="address2" class="data"></div> 
 
      </p> 
 
      <p> 
 
       <div id="confirmcity" class="data"></div> 
 
      </p> 
 
      <p> 
 
       <div id="confirmzip" class="data"></div> 
 
      </p> 
 
      <input type="button" value="Add" onclick="addAddress()" />