jQuery將文本附加到多個輸入字段

Question

當單擊按鈕時，我想將輸入字段中的相同文本附加到其他多個字段。

這裏是形式：

<div class="affiliate-id-form"> 
    <input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" /> 
    <input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links"> 
</div> 

這裏就是我想的要追加的文本輸入字段的代碼。

<div class="affiliate-links"> 
    <table class="affiliateLinksTable"> 
     <tbody> 
      <tr> 
       <td><label for=""> FIrst Product Name</label></td> 
       <td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://firstproduct.html?A="></td> 
      </tr> 
      <tr> 
       <td><label for=""> Second Product Name</label></td> 
       <td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://secondproduct.html?A="></td> 
      </tr> 
      <tr> 
       <td><label for=""> FIrst Product Name</label></td> 
       <td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://thirdproduct.html?A="></td> 
      </tr> 
      <tr> 
       <td><label for=""> FIrst Product Name</label></td> 
       <td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fourthproduct.html?A="></td> 
      </tr> 
      <tr> 
       <td><label for=""> FIrst Product Name</label></td> 
       <td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fifthproduct.html?A="></td> 
      </tr> 
      <tr> 
       <td><label for=""> FIrst Product Name</label></td> 
       <td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://sixthproduct.html?A="></td> 
      </tr> 
      <tr> 
       <td><label for=""> FIrst Product Name</label></td> 
       <td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://seventhproduct.html?A="></td> 
      </tr> 
     </tbody> 
    </table> 
<div > 

Answer 1

我想你想不只是追加而且每次用這個假設我對你的HTML添加一個data attribute每個輸入data-link="http://firstproduct.html?A="更換"A="左右。這樣你可以很容易做到。

$('#btnGenerateLinks').on('click', function() { 
 
    var valNeed = $('#affiliateID').val(); 
 

 
    // if (valNeed.trim().length) { // In case you want filter blank string 
 
    $('input[name="affiliate-link"]').each(function() { 
 
     $(this).val($(this).data('link') + valNeed); 
 
    }) 
 
// } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="affiliate-id-form"> 
 
    <input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" /> 
 
    <input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links"> 
 
</div> 
 

 

 
<div class="affiliate-links"> 
 
    <table class="affiliateLinksTable"> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input id="affiliateLinkGenerated" type="text" data-link="http://firstproduct.html?A=" name="affiliate-link" value="http://firstproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">Second Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input id="affiliateLinkGenerated" type="text" data-link="http://secondproduct.html?A=" name="affiliate-link" value="http://secondproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input id="affiliateLinkGenerated" type="text" data-link="http://thirdproduct.html?A=" name="affiliate-link" value="http://thirdproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input id="affiliateLinkGenerated" type="text" data-link="http://fourthproduct.html?A=" name="affiliate-link" value="http://fourthproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input id="affiliateLinkGenerated" type="text" data-link="http://fifthproduct.html?A=" name="affiliate-link" value="http://fifthproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input id="affiliateLinkGenerated" type="text" data-link="http://sixthproduct.html?A=" name="affiliate-link" value="http://sixthproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input id="affiliateLinkGenerated" type="text" data-link="http://seventhproduct.html?A=" name="affiliate-link" value="http://seventhproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <div>

Answer 2

$("#btnGenerateLinks").on("click", function() { 
 
    $(".myClass").each(function() { 
 
    $(this).val($(this).val() + $("#affiliateID").val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="affiliate-links"> 
 
    <table class="affiliateLinksTable"> 
 
     <tbody> 
 
      <tr> 
 
       <td><label for=""> FIrst Product Name</label></td> 
 
       <td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://firstproduct.html?A="></td> 
 
      </tr> 
 
      <tr> 
 
       <td><label for=""> Second Product Name</label></td> 
 
       <td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://secondproduct.html?A="></td> 
 
      </tr> 
 
      <tr> 
 
       <td><label for=""> FIrst Product Name</label></td> 
 
       <td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://thirdproduct.html?A="></td> 
 
      </tr> 
 
      <tr> 
 
       <td><label for=""> FIrst Product Name</label></td> 
 
       <td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fourthproduct.html?A="></td> 
 
      </tr> 
 
      <tr> 
 
       <td><label for=""> FIrst Product Name</label></td> 
 
       <td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fifthproduct.html?A="></td> 
 
      </tr> 
 
      <tr> 
 
       <td><label for=""> FIrst Product Name</label></td> 
 
       <td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://sixthproduct.html?A="></td> 
 
      </tr> 
 
      <tr> 
 
       <td><label for=""> FIrst Product Name</label></td> 
 
       <td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://seventhproduct.html?A="></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
<div > 
 
    
 
    <div class="affiliate-id-form"> 
 
    <input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" /> 
 
    <input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links"> 
 
</div>

Answer 3

元素id在document應該是唯一的。替代class="affiliateLinkGenerated"爲id="affiliateLinkGenerated"在<input>元素。

click附加事件來​​元件，使用.querySelectorAll()選擇".affiliateLinkGenerated"input元件，在for循環迭代元件，設置每個元件的.value到點擊<input type="button">元件的.previousElementSibling。

document.getElementById("btnGenerateLinks") 
 
.addEventListener("click", function() { 
 
    var prev = this.previousElementSibling; 
 
    var inputs = document.querySelectorAll(".affiliateLinkGenerated"); 
 
    for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].value = prev.value; 
 
    } 
 
})

<div class="affiliate-id-form"> 
 
    <input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" /> 
 
    <input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links"> 
 
</div> 
 

 
<div class="affiliate-links"> 
 
    <table class="affiliateLinksTable"> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://firstproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">Second Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://secondproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://thirdproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fourthproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fifthproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://sixthproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="">FIrst Product Name</label> 
 
     </td> 
 
     <td> 
 
      <input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://seventhproduct.html?A="> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>