finding the correct selector with woocommerce
So I have this jquery snippet to change the font in an input text box on selecting a font
<script>
$(".wc-pao-addon-image-swatch-select").change(function() {
alert($(this).val());
$('.input-text').css("font-family", $(this).val());
});
</script>
but I don't think the selectors or targets are right and I am not seeing the wood for the trees
This is the html (sorry it is long and typically woocommerce)
<form class="cart" action="
https://website/product/product name/" method="post" enctype="multipart/form-data">
<div class="wc-pao-addon-container wc-pao-required-addon wc-pao-addon wc-pao-addon-engraving-line-1" data-product-name="6" x 8" Slate Sign">
<label for="addon-334-engraving-line-1-0" class="wc-pao-addon-name" data-addon-name="Engraving Line 1:" data-has-per-person-pricing="" data-has-per-block-pricing="">Engraving Line 1: <em class="required" title="Required field">*</em> </label>
<p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-334-engraving-line-1-0">
<textarea type="text" class="input-text wc-pao-addon-field wc-pao-addon-custom-textarea" data-raw-price="" data-price="" data-price-type="flat_fee" name="addon-334-engraving-line-1-0" id="addon-334-engraving-line-1-0" rows="4" cols="20" required=""></textarea>
</p>
<div class="clear"></div>
</div>
<div class="wc-pao-addon-container wc-pao-addon wc-pao-addon-engraving-line-2" data-product-name="6" x 8" Slate Sign">
<label for="addon-334-engraving-line-2-1" class="wc-pao-addon-name" data-addon-name="Engraving Line 2:" data-has-per-person-pricing="" data-has-per-block-pricing="">Engraving Line 2: </label>
<p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-334-engraving-line-2-1">
<textarea type="text" class="input-text wc-pao-addon-field wc-pao-addon-custom-textarea" data-raw-price="" data-price="" data-price-type="flat_fee" name="addon-334-engraving-line-2-1" id="addon-334-engraving-line-2-1" rows="4" cols="20"></textarea>
</p>
<div class="clear"></div>
</div>
<div class="wc-pao-addon-container wc-pao-required-addon wc-pao-addon wc-pao-addon-font" data-product-name="6" x 8" Slate Sign">
<label for="addon-334-font-3" class="wc-pao-addon-name" data-addon-name="Font" data-has-per-person-pricing="" data-has-per-block-pricing="">Font <em class="required" title="Required field">*</em> </label>
<div class="wc-pao-addon-description"><p>Please Note: Once you’ve placed your order, we will design your house sign or memorial plaque within 24hours and email it over to you before we go ahead and start the engraving process</p>
</div>
<p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-334-font-3">
<a href="#" class="wc-pao-addon-image-swatch" data-value="benguiat-1" data-price="<span class="wc-pao-addon-image-swatch-price">Benguiat </span>">
<img src="
https://www.patswoodencrafts-engraving.co.uk/wp-content/uploads/2021/03/Benguiat-1b-150x150.gif">
</a>
<a href="#" class="wc-pao-addon-image-swatch" data-value="cooper-bold-mt-2" data-price="<span class="wc-pao-addon-image-swatch-price">Cooper Bold MT </span>">
<img src="
https://www.patswoodencrafts-engraving.co.uk/wp-content/uploads/2021/03/Cooper-Bold-1-150x150.gif">
</a>
<a href="#" class="wc-pao-addon-image-swatch" data-value="lucida-blackletter-3" data-price="<span class="wc-pao-addon-image-swatch-price">Lucida Blackletter </span>">
</a>
<a href="#" class="wc-pao-addon-image-swatch" data-value="lucida-calligraphy-4" data-price="<span class="wc-pao-addon-image-swatch-price">Lucida Calligraphy </span>">
</a>
<a href="#" class="wc-pao-addon-image-swatch selected" data-value="papyrus-let-plain-1-0-5" data-price="<span class="wc-pao-addon-image-swatch-price">Papyrus LET Plain 1.0 </span>">
</a>
<a href="#" class="wc-pao-addon-image-swatch" data-value="times-roman-bold-6" data-price="<span class="wc-pao-addon-image-swatch-price">Times Roman Bold </span>">
</a>
<select class="wc-pao-addon-image-swatch-select wc-pao-addon-field" name="addon-334-font-3">
<option value="">Select an option...</option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="benguiat-1" data-label="Benguiat">Benguiat </option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="cooper-bold-mt-2" data-label="Cooper Bold MT">Cooper Bold MT </option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="lucida-blackletter-3" data-label="Lucida Blackletter">Lucida Blackletter </option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="lucida-calligraphy-4" data-label="Lucida Calligraphy">Lucida Calligraphy </option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="papyrus-let-plain-1-0-5" data-label="Papyrus LET Plain 1.0">Papyrus LET Plain 1.0 </option>
<option data-raw-price="" data-price="" data-price-type="flat_fee" value="times-roman-bold-6" data-label="Times Roman Bold">Times Roman Bold </option>
</select>
</p>
<div class="clear"></div>
</div>
I suspect that .val() is incorrect but what is the correct target/selector any help please?
Topic Participants
mike.jones
jakecigar