Pull form radio value using the label text

Hello,

I have a free course registration page with radio buttons. The label is pulled using the CMS collections but the value and name fields for the radio button cannot be pulled.

Is there a way to pull the value field some how using the label text? Custom javascript?

Thanks,
Matt


Here is my site Read-Only: LINK

Hey Matthew! Welcome to the Webflow Community.

Can you share a page on the website that contains the radio buttons you’re referring to? I’m curious to see if there’s a solution at hand that we can come up with, but I want to see the registration page itself.

I’ll keep an eye out for your response!

https://www.ormsonlawtraining.com/register/free-course-registration

Here’s the page I’m working on. I built it similar to the e-commerce page until it accepts free registrations.

Hey Matthew,

(My answer comes from the answer Anna made here: Dynamic Items in Form Select Field)

Try this out:

(1) Delete the radio button element from your collection item entirely. (You’ll have an empty collection item at this point.)

(2) Add a div to your collection item. You can give it the same class that your radio button parent element had before.

(3) Add two elements to this div:

  • Embed
  • Text Block (class of Radio Button Label)

In the HTML Embed, add the following script:

<script>
document.write('<input ');
document.write('   type="radio" ');
document.write('   name="NAME" ');
document.write('   value="VALUE">');
</script>

You can replace the NAME and VALUE placeholders with values from the CMS by clicking + Add Field in the HTML Embed editor.

Try this out and let me know if it works for you!

1 Like

This worked perfectly! Just had to change name to a static name because that would of allowed them to choose multiple radio buttons.

This was super helpful!

1 Like

I have one other question.

If someone was on a course page for example: https://www.ormsonlawtraining.com/courses/benefis-of-prevail

Then they clicked register.

Is there anyway to pass a parameter to the registration page to pre-select radio buttons?

Or is that way next level stuff?

EDIT: I idiotically misread your question - but the logic in this answer may still work, or at least get you on the right path.


Yeah, definitely possible!

First, update your embed code slightly like so:

You’ll need to add a field to the collection you’re referencing called ID (or something along those lines) and create a unique value for each free course. Make sure there is no overlap in IDs and that they are truly unique. IDs are unique to the page, so if you have two radio buttons with the same IDs, you’ll run into issues.

Anyway - once you have unique IDs for your free courses, replace my string (between the quotes) with the +Add Field button and reference the newly created ID field.

You’ll need some custom code in the Page Footer (before Body), so here’s an example to get started:

Let’s say you added a field in your CMS for the ID already. In regards to the ID, you set an ID for the Benefits of Prevail course to prevailBenefits. Let’s also say you have another course - which we’ll call Course 2.

Course 2 is accessible at https://www.ormsonlawtraining.com/courses/course-2. You’ve assigned an ID of coursetwo for the radio button embed element.

In Javascript, you would do as follows:

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow API

  var selection = window.location.pathname.split("/").pop();

  if (selection = 'benefis-of-prevail') {
    // heads up on the typo in your URL! Benefits vs benefis
    document.getElementById("prevailBenefits").checked = true;
  } else if (selection = 'course-2') {
     document.getElementById("coursetwo").checked = true;
  }
});
</script>

You repeat those else if statements for each use case you have. There is likely a more efficient way to do this via JS, but considering you probably have 3 free courses (just guessing from what I see, correct me if I’m wrong), it would like be easier to just write out each else if. (In this case, you’d only have to add one more else if statement just like you see above and you’re done!)

Let me know if this helps!

1 Like

This actually worked fine. If you could add collection items to custom page code I could skip the manual updating!

The problem is someone else is updating these course often in the editor so they change all the time. I thought maybe you could create a html embed at the bottom inside a collection of the page but then it repeats the code which from my JS knowledge would stop the other lines from firing.

Also Matt, thank you very much for sharing this knowledge because it will help me on another website coming up!

1 Like

Of course!! That’s what I’m here for. Glad you got somewhere with it. :slight_smile:

Also, in regards to the following quote:

Can you elaborate? Because if you’re referring to pulling in CMS data into the Page’s custom code in Page Settings, you can actually 100% do this natively with Webflow - but it only works with CMS pages. Click on the settings for the individual CMS page, scroll down to either code injection field, and you should be able to access the + Add Field just like you did with the embed!

Let me know if I misunderstood.

1 Like

Oh that’s cool!

Would it make sense to move the registration to a collection page? The courses are changed out often by an assistant through the editor. So, I would have to update it manually with each change.

Or would the “more efficient JS” be the way to go?

Good question! I would think that if you can move the registration to a collection page (I don’t foresee any issues with this), by all means. That’ll allow the assistant to make a change in the editor and you don’t have to mess with the nitty-gritty details.

I like to avoid code when I can and I think just using Webflow CMS (and possibly just the snippet of code I gave you for radio buttons, if necessary) will get you the solution you need + is easily manageable from the editor.

1 Like

Thank you, HUGE help!

1 Like

Anytime! Feel free to return to the forum and create additional topics if you need more assistance. :muscle:t4: