Open Magnific Popup from Radio Button onclick event

Question

I have two radio buttons on a form. Yes & No. On No the radio buttons are hidden using the onclick="myFunction()" event. On Yes I want an ajax Magnific Popup to open using a similar event.

I have done it two ways using this html;

<input type="radio" name="preorder" value="yes" required="" onclick=a href="/radios.php" class="ajax-popup-link mfp-prevent-close"><span class="radioYes">Yes</span>

And this way;

<a href="/radios.php" class="ajax-popup-link mfp-prevent-close"><input type="radio" name="preorder" value="yes" required=""><span class="radioYes">Yes</span></a>

While both ways work, when I use an html validator both these methods fail validation.

Can I call a magnific popup to load 'radios.php' using

onclick="loadRadios()"

Thanks in advance for any suggestions.

Answer 1

I kept researching and figured it out.

The html:

<input type="radio" name="order" value="yes" onclick="radioPopup()" required>

And the javascript:

function radioPopup() {
  $.magnificPopup.open({
    items: {
      src: '/radios.php'
    },
      type: 'ajax'
    });
  }