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

时间:2017-02-13 07:57:58

标签: javascript jquery html

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

以下是表格:

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

3 个答案:

答案 0 :(得分:1)

我认为你不仅要追加,而且每次都要替换"A=",所以我假设我在html中为每个输入data attribute添加了data-link="http://firstproduct.html?A="。这样你就可以轻松完成。

&#13;
&#13;
$('#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);
    })
 // }
})
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

public class A extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_istanbul);

    TextView attractivePlaces = (TextView) findViewById(R.id.a_category_attractive_places);

    attractivePlaces.setOnClickListener(new TextView.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(),"A",Toast.LENGTH_SHORT).show();
            Intent intent = new Intent(A.this,B.class);  // Here the issue is.
            startActivity(intent);
        }
    });

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

答案 2 :(得分:0)

id

document元素应该是唯一的。在class="affiliateLinkGenerated"元素替换id="affiliateLinkGenerated" <input>

click个事件附加到"btnGenerateLinks"元素,使用.querySelectorAll()选择".affiliateLinkGenerated" input个元素,在for循环处迭代元素,设置{已点击.value元素.previousElementSibling的每个元素{1}}。

&#13;
&#13;
<input type="button">
&#13;
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;
  }
})
&#13;
&#13;
&#13;