I have three fields on the site (all required), which should not be hidden initially on the checkout page, but when choosing this input with value="type1" you should show the fields with id billing_address_2_field, billing_code_postfield(should be mandatory when selecting a field).
When choosing the second payment method, value="type2" we hide (default, do not deactivate) the first and second fields, showing billing_file_uload_field. When choosing an innovative payment method, all three fields are hidden and become optional.
I used JS but unfortunately my code does not work cortically.
<script>
jQuery(document).ready(function($) {
function handlePaymentMethodChange() {
var selectedPaymentMethod = $('input[name="transaction_type"]:checked').val();
var $addressField = $('#billing_address_2_field');
var $postcodeField = $('#billing_postcode_field');
var $fileUploadField = $('#billing_file_uload_field');
$addressField.hide();
$postcodeField.hide();
$fileUploadField.hide();
$addressField.find('input').prop('required', false);
$postcodeField.find('input').prop('required', false);
$fileUploadField.find('input[type="file"]').prop('required', false);
if (selectedPaymentMethod === 'type1') {
$addressField.show();
$postcodeField.show();
$addressField.find('input').prop('required', true);
$postcodeField.find('input').prop('required', true);
} else if (selectedPaymentMethod === 'type2') {
$fileUploadField.show();
$fileUploadField.find('input[type="file"]').prop('required', true);
}
}
handlePaymentMethodChange();
$('input[name="transaction_type"]').change(handlePaymentMethodChange);
});
</script>
<li class="wc_payment_method payment_method_special_payment">
<input id="payment_method_special_payment" type="radio" class="input-radio" name="payment_method" value="special_payment" checked="checked" data-order_button_text="">
<label for="payment_method_special_payment">
Оплата на р/р (ФОП та юр. особи) </label>
<div class="payment_box payment_method_special_payment" style="">
<p>ТЕКСТ ЗАПОЛНИТЬ 1!!</p>
<style>#transaction_type_field label.radio { display:inline-block; margin:0 .8em 0 .4em}</style><p class="form-row transaction_type form-row-wide" id="transaction_type_field" data-priority=""><label for="transaction_type_type1" class="">Payment Information <span class="optional">(необов'язково)</span></label><span class="woocommerce-input-wrapper"><input type="radio" class="input-radio " value="type1" name="transaction_type" id="transaction_type_type1" checked="checked"><label for="transaction_type_type1" class="radio ">Ввести реквізити компанії</label><input type="radio" class="input-radio " value="type2" name="transaction_type" id="transaction_type_type2"><label for="transaction_type_type2" class="radio ">Завантажити виписку (можна скріншот)</label><input type="radio" class="input-radio " value="type3" name="transaction_type" id="transaction_type_type3"><label for="transaction_type_type3" class="radio ">Передзвоніть мені</label></span></p> </div>
</li>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-wide address-field elementor-repeater-item-50cc1a8 jwb-field-required jwb-field-wrapper jwb-field-text validate-required" id="billing_address_1_field" data-priority="50" style="display: block;"><label for="billing_address_1" class="">Адреса вулиці <abbr class="required" title="обов'язкове">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_address_1" id="billing_address_1" placeholder="" value="Marienstraße 45" autocomplete="address-line1"></span></p><p class="form-row form-row-first elementor-repeater-item-168946f jwb-field-optional address-field jwb-field-wrapper jwb-field-text validate-required" id="billing_address_2_field" data-priority="60" style="display: block;"><label for="billing_address_2" class="">Повна назва компанії <abbr class="required" title="обов'язкове">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_address_2" id="billing_address_2" placeholder="" value="" autocomplete="address-line2"></span></p><p class="form-row form-row-last elementor-repeater-item-e70c37c jwb-field-required address-field jwb-field-wrapper jwb-field-text validate-required" id="billing_postcode_field" data-priority="70" style="display: block;"><label for="billing_postcode" class="">ІПН/ЄДРПОУ <abbr class="required" title="обов'язкове">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="Наприклад: 43712216" value="48282" autocomplete="postal-code"></span></p>
<p class="form-row form-row-wide validate-required" id="billing_file_uload_field" data-priority="80" data-fcf-field="billing_file_uload">
<label for="billing_file_uload">
Виберіть файл для завантаження <abbr class="required" title="Required Field">*</abbr>
</label>
<span class="fcf-file-items" data-api-url="https://main.parovozchips.com/wp-json/flexible-checkout-fields-pro/v1/file-upload?_wpnonce=1c0c8e927f" data-api-error-code="fcf_file_upload_error" data-api-error-message="An unknown error has occurred. Try again." data-field-name="billing_file_uload" data-fcf-field-loaded="1">
<span class="fcf-file-item" data-index="0">
<span class="fcf-file-draggable">
<input type="file" class="fcf-file-draggable-input" accept="image/jpeg,image/png,application/pdf,image/heic">
<span class="fcf-file-draggable-content">
<span class="fcf-file-draggable-error" hidden=""></span>
<span class="fcf-file-draggable-placeholder" hidden="">
Select File or Drag & Drop </span>
<span class="fcf-file-draggable-loading" hidden="">
Uploading... </span>
<span class="fcf-file-draggable-preview">
<a href="https://main.parovozchips.com/flexible-checkout-fields/b8e500c34dba5871740f67a477ef6200" target="_blank">238-5-add_photo-128-0-683x1024-1.jpg</a> </span>
</span>
<button type="button" class="button fcf-file-draggable-delete">
Delete </button>
</span>
<input type="hidden" name="billing_file_uload[]" value="b8e500c34dba5871740f67a477ef6200" class="fcf-file-draggable-value fcf-input-field">
</span>
</span>
</p>
</div>
2
Answers
I don’t get your code 100% and therefore cannot understand the logic of how form fields are enabled/disabled. So, here is a generalized example that you can apply to your own use case.
The main trick here, is that I use fieldsets that can be enabled/disabled based on the selection if the radio buttons. If a fiedset is disabled the form fields inside the fiedset will not be part of the submit request of the form. It is like disabling them all. If a fieldset i disabled I hide it using CSS.
An input (with a specific name) element can be present in more fieldsets — that is not a problem.
The following example has two different "modes". The one that is in work now uses the object
fieldsets
to decide witch fiedsets are going to be enabled/displayed. The "mode" that I commented out will just enable one fieldset based on one radio button.I hope that it is useful.
I will show you how this can be done through a simpler and more understandable example:
We have a single container, which has the
container
class and eitherfirst
,second
orthird
class and this class is being changed whenever you click on one of the radio buttons with its value. The inner elements have corresponding classes and the inactive classes are hidden by default, whereas the active class’s elements are being shown.