jQuery append text to multiple input fields

Question

I want to append the same text from a input field to other multiple fields when a button is clicked.

Here is the form :

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

And here is the code of the input fields where I want the text to be appended.

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

id of element in document should be unique. Substitute class="affiliateLinkGenerated" for id="affiliateLinkGenerated" at <input> elements — guest271314
– guest271314, Commented Feb 13, 2017 at 7:59

Parvez Rahaman · Accepted Answer · 2017-02-13 08:24:04Z

I think you want to not just append but also each time replace the "A=" so with this assumption i have added a data attribute in your html for each input data-link="http://firstproduct.html?A=". This way you can do very easy.

$('#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>

Bahadir Tasdemir · Accepted Answer · 2017-02-13 08:04:43Z

$("#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>

guest271314 · Accepted Answer · 2017-02-13 08:11:52Z

id of element in document should be unique. Substitute class="affiliateLinkGenerated" for id="affiliateLinkGenerated" at <input> elements.

Attach click event to "btnGenerateLinks" element, use .querySelectorAll() to select ".affiliateLinkGenerated" input elements, iterate elements at for loop, set .value of each element to .previousElementSibling of clicked <input type="button"> element.

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>

Collectives™ on Stack Overflow

jQuery append text to multiple input fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related