How can I edit checkout page with javascript?

Question

I am trying to make the checkout page a change fields when a radio button is selected. So I have 2 options on the radio buttons option A and B When A is selected I want 2 fields below to remain available and other 2 to disappear. The other way around when the second radio button is checked.

I mostly used Wordpress for this website but I need a bit of code for this functionality.

function yesnoCheck('radio-5984531736') {
    if (this.radio-5984531736 == "Persoana fizica") {
        alert("check");
        document.getElementByClassName("juridica").style.display = "block";
    } else {
        document.getElementByClassName("fizica").style.display = "none";
    }
}

I have this code as script in the header. I am not sure if it is not correct or I don t have a code to call this function. The Id and class names are the following:

Radio buttons id : radio-5984531736 Info that should show when A selected class name : fizica Info that should show when A selected class name : juridical

enter image description here

Does this answer your question? https://stackoverflow.com/questions/17621515/how-to-show-and-hide-input-fields-based-on-radio-button-selection — isherwood, Dec 06 '21 at 17:32

score 0 · Answer 1 · edited Dec 06 '21 at 17:30

I've made a demo similar to your task:

function yesnoCheck() {
  var value = document.querySelector("[name='radio-5984531736']:checked").value;

  if (value === "v1") {
    document.querySelector(".fizica").style.display = "block";
    document.querySelector(".juridica").style.display = "none";
  } else {
    document.querySelector(".fizica").style.display = "none";
    document.querySelector(".juridica").style.display = "block";
  }
}

var form = document.querySelector("#formId");
form.addEventListener("change", yesnoCheck);

<div>
  <form id="formId">
    <div>
      <input type="radio" name="radio-5984531736" value="v1" id="v1id">
      <label for="v1id">Persona fizica</label>
      <input type="radio" name="radio-5984531736" value="v2" id="v2id">
      <label for="v2id">Persona juridica</label>
    </div>
    <div class="fizica">
      Prenume
      <input name="prenume"><br/> Nume companie
      <input name="numecom">
    </div>

    <div class="juridica">
      Nume
      <input name="nume"><br/> CUI
      <input name="cui">
  </form>
  </div>

Though I think it can be simpler in your case. E.g. try writing this['radio-5984531736'] instead of this.radio-5984531736. Also, you don't need 'radio-5984531736' in function yesnoCheck() { ....

How can I edit checkout page with javascript?

1 Answers1