jQuery将文本追加到多个输入字段

debugcn 发表于 Dev

普拉卡什切特里

我想在单击按钮时将来自输入字段的相同文本附加到其他多个字段。

这是表格：

<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 >

帕尔维斯·拉哈曼（Parvez Rahaman）

我认为您不仅希望追加，而且还希望每次替换，"A="因此，在这种假设下，我data attribute在html中为每个输入添加了一个data-link="http://firstproduct.html?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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。