CODEWITHSUNDEEP
javascriptjqueryhtml
prakashchhetri
prakashchhetri

Reputation: 1816

jQuery append text to multiple input fields

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 >

Upvotes: 0

Views: 2846

Answers (3)

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

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>

Upvotes: 1

guest271314
guest271314

Reputation: 1

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>

Upvotes: 0

Bahadir Tasdemir
Bahadir Tasdemir

Reputation: 10783

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

Upvotes: 0

Related Questions