jQuery-Student1989
jQuery-Student1989

Reputation: 85

Changing the text of a value attribute with jQuery

I don't have direct access to edit the text I need changed, therefore I am needing to override the text of a given value with jQuery.

I understand the basics, but do not know the correct string to find the value.

So I know this will work for an ID.

<script>
$(document).ready(function(){
  $('#demo').text('The replaced text.');
});
</script>

So my question is, how would I change the text (Credit Card/Debit Card (Affirm)) of the following Code with the value of "affirm". I can't use the payment_method name because it is shared with another payment method.

<label>
<input type="radio" name="payment_method" value="affirm">
Credit Card/Debit Card (Affirm)                            
</label>

Thank you in advance!

Edit 1:

The whole HTML Code

<div id="content" class="col-xs-12 col-sm-12">
            
                <p>Please select your preferred payment method.</p>
            <div class="radio">
            <label>
                                                        <input type="radio" name="payment_method" value="authorizenet" checked="checked">
                                Credit Card/Debit Card (Authorize.Net)                            </label>
        </div>
            <div class="radio">
            <label>
                                    <input type="radio" name="payment_method" value="affirm">
                                Credit Card/Debit Card (Affirm)                            </label>
        </div>
    <p><strong>Add comments about your order.</strong></p>
<p>
    <textarea name="comment" rows="8" class="form-control"></textarea>
</p>
<div class="cart-module">
    <div class="cart-content">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <h4 for="input-coupon">Coupon Code</h4>
                    <div class="input-group">
                        <input type="text" name="coupon" value="" placeholder="Coupon Code" id="input-coupon" class="form-control">
                        <span class="input-group-btn">
                            <input type="button" value="Apply" data-code="coupon" data-loading-text="Loading..." class="btn btn-primary">
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <h4 for="input-voucher">Gift Certificate Code</h4>
                    <div class="input-group">
                        <input type="text" name="voucher" value="" placeholder="Gift Certificate Code" id="input-voucher" class="form-control">
                        <span class="input-group-btn">
                            <input type="button" value="Apply" data-code="voucher" data-loading-text="Loading..." class="btn btn-primary">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="buttons">
        <div class="pull-right">I have read and agree to the <a href="https://hhtruckaccessories.com?route=information%2Finformation%2Fagree&amp;information_id=5" class="agree"><b>Shipping and Returns</b></a>.                            <input type="checkbox" name="agree" value="1">
                        &nbsp;
            <input type="button" value="Continue" id="button-payment-method" data-loading-text="Loading..." class="btn btn-primary">
        </div>
    </div>
<script src="/js/catalog/checkout/payment_method/bundle.js?v=1.58.1" type="text/javascript"></script>        </div>

Upvotes: 2

Views: 726

Answers (1)

Frenchy
Frenchy

Reputation: 17035

you cant use text() with input so you have to rebuild the html line

var newtext = "affirm";
selector = $("input[type=radio][value=affirm]").closest("label");
var line = selector.html().split(">")[0] + ">" + newtext;

selector.html(line);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" class="col-xs-12 col-sm-12">

  <p>Please select your preferred payment method.</p>
  <div class="radio">
    <label>
      <input type="radio" name="payment_method" value="authorizenet" checked="checked">
       Credit Card/Debit Card (Authorize.Net)  
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="payment_method" value="affirm">
        Credit Card/Debit Card (Affirm)
    </label>
  </div>

Upvotes: 1

Related Questions