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> 

そして、ここでは、私は、テキストを追加したい入力フィールドのコードです。 documentの要素の

<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

私はあなただけ追加するだけでなく、毎回iは各入力data-link="http://firstproduct.html?A="のためにあなたのhtmlでdata attributeを追加したこの前提でそう"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一意である必要があります。 id="affiliateLinkGenerated"の場合はclass="affiliateLinkGenerated"を<input>要素に置き換えます。

、​​要素にclickイベントを取り付け".affiliateLinkGenerated"input要素を選択する.querySelectorAll()を使用し、forループで要素を繰り返し、クリック<input type="button">要素の.previousElementSiblingに各要素の.valueを設定します。

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>