<input> being stripped off from .html() via page code

Ask the community
, ,
1

I’m trying to programmatically put the JSON response
[
“JSXI”,
“Relikk”,
“T.A.G”,
“Big Gay”,
“B La B”,
“Sam Lachow”
]
as radio button for user to select.:
via pagecode:

$w.onReady(async function () {
  try {
    const rapperVoices = await getRapperVoices(); // Call the function to get the list of rapper voices
    const voiceList = rapperVoices.map(voice => voice.display_name);
    const radioButtons = voiceList.map(voice => `<p><input type="radio" name="voice" value="${voice}"> <label for="${voice}">${voice}</label></p>`);
    const radioButtonsHtml = radioButtons.join('');
    $w('#voiceList').html = radioButtonsHtml; // Display the list of rapper voices as radio buttons in the <div> element with ID "voiceList"
    console.log(voiceList);
  } catch (error) {
    console.error(error);
  }

however, the output is :

<div id="comp-lhzy7czp" class="BaOVQ8 tz5f0K comp-lhzy7czp wixui-rich-text" data-testid="richTextElement">
<p class="font_8"> JSXI</p>
<p class="font_8"> Relikk</p>
<p class="font_8"> T.A.G</p>
<p class="font_8"> Big Gay</p>
<p class="font_8"> B La B</p>
<p class="font_8"> Sam Lachow</p></div>

is this a restriction/bug?
if is a restriction, is there any alternative approach I can use to achieve the result I want?

2

Hey @squall-chu !

You should be able to use the Radio Buttons element that’s available in the editor. Here’s where to find it:

856×976 110 KB

Having a quick look over your code, it seems you’re trying to set the .html property of radio buttons you’re creating. .html is only available on the text component.

What I’d recommend is using the radio buttons and setting their options property. Here’s the API for the radio buttons - https://www.wix.com/velo/reference/$w/radiobuttongroup/options

I’ve given it a go myself, and used this code to achieve what you’re looking for with radio buttons:

$w.onReady(async function () {
    const rapperVoices = [
        "JSXI",
        "Relikk",
        "T.A.G",
        "Big Gay",
        "B La B",
        "Sam Lachow"
    ];

    const rapperOptions = rapperVoices.map(item => {
        return {
            label: item,
            value: item
        }
    });

    $w("#voiceList").options = rapperOptions
})

Hope that helps :slight_smile: Let me know if you have any questions. Good luck!

3

OMG Noah, it works! I been stuck for days for this. Didn’t occured to me to use input radio element instead.

much appreciated!

$w . onReady ( async function () {
try {
const rapperVoices = await getRapperVoices ();
const voiceList = rapperVoices . map ( voice => ({ label : voice.display_name , value : voice.display_name }));
$w ( ‘#voiceList’ ). options = voiceList ;
console . log ( voiceList );
} catch ( error ) {
console . error ( error );
}

This is my updated code and it works like charm!

Thanks! I will close this ticket.