设置输入字段的值，基于点击一组 href 链接

Question

I have this HTML Code, with few links, as :

 $(function() { $('#brad_button_770103363').click(function() { //alert($(this).text()); var paypal = $(this).text(); //$('#paypal_donate_amount').val(paypal).trigger('change'); $('#paypal_donate_amount').val(paypal); var paypal = null; console.log(paypal); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="" id="brad_button_770103363">$20</a> <a href="" id="brad_button_770103363">$50</a> <!-- similar 10 links... --> <input type="text" id="paypal_donate_amount" />

Now, I want that for each new click, on ahref, its val() ie 20, 50 Nmerical value only, is updated in this input field & overwrites old value of input.

But, it simply updates value of 1st click only. On subsequent, click nothing happens in input field values. Where i am wrong ? Also, how to remove $ sign ? Plz help.

Answer 1

This works:

 $(function(){ $('.brad_button_770103363').click(function(){ var paypal = $(this).text(); $('#paypal_donate_amount').val(paypal); var paypal = null; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="javascript:void(0)" class="brad_button_770103363">$20</a> <a href="javascript:void(0)" class="brad_button_770103363">$50</a> <input type="text" id="paypal_donate_amount" />

What I have done is adding href="javascript:void(0)" so it doesn't behave like a link. And the IDs became classes, so if they are repeated, it's not a problem.

Answer 2

If you have control over the HTML content, I would suggest something like this...

 $(function() { $('.donateAmount').click(function() { $('#paypal_donate_amount').val($(this).data('amount')); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" class="donateAmount" data-amount=20>$20</a> <a href="#" class="donateAmount" data-amount=50>$50</a> <input type="text" id="paypal_donate_amount" value="0" />

Answer 3

change the id to class as id is unique, unlike class

<a href="" class="brad_button_770103363">$20</a>
<a href="" class="brad_button_770103363">$50</a>

<input type="text" id="paypal_donate_amount" />

<script type="text/javascript">

$.noConflict();


$(function(){
    $('.brad_button_770103363').click(function(){
        //alert($(this).text());
        var paypal = $(this).text();
        //$('#paypal_donate_amount').val(paypal).trigger('change');
        $('#paypal_donate_amount').val(paypal);
        var paypal = null;
        console.log(paypal);

    });
});

try the code and get back, did not test it for errors