Wordpress - How to hide/show billing fields depending on the chosen payment method

RuslanGT
October 30, 2023
284 views
1 vote
2 Answers

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&nbsp;<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="">Адреса вулиці&nbsp;<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="">Повна назва компанії&nbsp;<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="">ІПН/ЄДРПОУ&nbsp;<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 &amp; 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>

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.

const fieldsets = {
  t1: ['t1'],
  t2: ['t2'],
  t3: ['t1', 't3']
};

document.forms.form01.addEventListener('change', e => {
  if (e.target.name == 'transactiontype') {
    let tid = e.target.value;
    let form = e.target.form;
    [...form.elements]
    .filter(elm => elm.type == 'fieldset')
      .forEach(elm => elm.disabled = true);
    // enable just one of the fiedsets
    //form[tid].disabled = false;
    // enable arbitraire fieldsets based on array
    fieldsets[tid].forEach(id => form[id].disabled = false);
  }
});

// if more input elements have the same name
// value should be copied the other elements
document.forms.form01.addEventListener('input', e => {
  if (e.target.type == 'text') {
    let name = e.target.name;
    let form = e.target.form;
    if (form[name].length > 1) {
      [...form[name]].forEach(input => {
        if (input !== e.target) input.value = e.target.value;
      });
    }
  }
});

// just  for testing
document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log([...data].join(';'));
});

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

fieldset {
  display: flex;
  flex-direction: column;
  border: none;
}

fieldset:disabled {
  display: none;
}

<form name="form01">
  <label><input type="radio" name="transactiontype" value="t1" checked>Transaction type 1</label>
  <label><input type="radio" name="transactiontype" value="t2">Transaction type 2</label>
  <label><input type="radio" name="transactiontype" value="t3">Transaction type 3</label>
  <fieldset name="t1">
    <label>Option 1<input type="text" name="opt1" required></label>
    <label>Option 2<input type="text" name="opt2" required></label>
    <label>Option 3<input type="text" name="opt3" required></label>
  </fieldset>
  <fieldset name="t2" disabled>
    <label>Option 1<input type="text" name="opt1" required></label>
    <label>Option 2<input type="text" name="opt2" required></label>
  </fieldset>
  <fieldset name="t3" disabled>
    <label>Option 4<input type="text" name="opt4" required></label>
    <label>Option 5<input type="text" name="opt5" required></label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

I will show you how this can be done through a simpler and more understandable example:

for (let radio of document.querySelectorAll("input[type=radio][name=fld_type]")) {
    radio.addEventListener("click", function() {
        document.querySelector(".container").className = "container " + this.value;
    });
}

.container div {
    display: none;
}

.container.first div.first {
    display: block;
}

.container.second div.second {
    display: block;
}

.container.third div.third {
    display: block;
}

<div class="container first">
    <div class="first">
        <label>1.1. <input type="text"></label>
    </div>
    <div class="first">
        <label>1.2. <input type="text"></label>
    </div>
    <div class="first">
        <label>1.3. <input type="text"></label>
    </div>
    <div class="second">
        <label>2.1. <input type="text"></label>
    </div>
    <div class="second">
        <label>2.2. <input type="text"></label>
    </div>
    <div class="second">
        <label>2.3. <input type="text"></label>
    </div>
    <div class="third">
        <label>3.1. <input type="text"></label>
    </div>
    <div class="third">
        <label>3.2. <input type="text"></label>
    </div>
    <div class="third">
        <label>3.3. <input type="text"></label>
    </div>
</div>

  <p>Please select your field type:</p>
  <input id="first" type="radio" name="fld_type" value="first" checked>
  <label for="first">first</label><br>
  <input id="second" type="radio" name="fld_type" value="second">
  <label for="second">second</label><br>
  <input id="third" type="radio" name="fld_type" value="third">
  <label for="third">third</label>

We have a single container, which has the container class and either first, second or third 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.

Please signup or login to give your own answer.

Click here to cancel reply.

WordPress – How to hide/show billing fields depending on the chosen payment method

Answers