Convert this to work with Wix Code?

Ask the community
, ,
1

I have all the form elements in this code on my page using User Input fields. But I can’t seem to figure out how to convert this code into Wix Code.

Live Example Select & Confirm Tags - JSFiddle - Code Playground

// these are explanations on how these elements appear on my wix site

<body>

  <p>Select all tags that apply</p>

  <form>
  /////// Form Checkboxes
  ///// I have added the checkboxes and set their values in settings
  
    <input type="checkbox" name="tags" value="Tag 1"> Tag 1
    <br>
    <input type="checkbox" name="tags" value="Tag 2"> Tag 2
    <br>
    <input type="checkbox" name="tags" value="Tag 3"> Tag 3
    <br>
    <input type="checkbox" name="tags" value="Tag 4"> Tag 4
    
  //////// Form Checkboxes End
    <br>
    <br>
    // Button to insert tag values into confirmedTags text input box
    <input type="button" onclick="ConfirmTags()" value="Confirm Tags"> 
    <br>
    <br>
    // confirmedTags text input box set to required and read only
    <input type="text" id="confirmedTags" size="50"> y
    <br>
    <br>
    // Is my entire form's submit button
    <input type="submit" value="Submit"> 
  </form>

  <script>
    function ConfirmTags() {
      var tags = document.forms[0];
      var txt = "";
      var i;
      for (i = 0; i < tags.length; i++) {
        if (tags[i].checked) {
          txt = txt + tags[i].value + " ";
        }
      }
      document.getElementById("ConfirmedTags").value = "" + txt;
    }

  </script>

</body>

I’ve tried this…

export function ConfirmTags_onClick() {
   var tags = document.forms[0];
      var txt = "";
      var i;
      for (i = 0; i < tags.length; i++) {
        if (tags[i].checked) {
          txt = txt + tags[i].value + " ";
        }
      }
      document.getElementById("confirmedtags").value = "" + txt;
}

but I don’t know what document and/or .forms and/or .getElementByID should be replaced by. Or if/how I “Name” the checkboxes like in the HTML.

Examples and Ideas on how to achieve these results would mean a lot. <3

2

Hi,
Can you explain what are you trying to achieve with this code sample?
Saving to a collection the tags the user selected?

3

Yes exactly,
In the live example you click the confirm tags button and it populates all the selected tags’ values into the text input. I have that text input field connected to a dataset and so when I submit the form it will save the input to the collection.

4

Do you need the text input there, or is it only for the values to get to the dataset?

5

It’s really only for the values to get to the dataset, also useful to make sure the correct selections have been made but that’s not it’s purpose.

I have been trying for a while to get selected checkbox values into the same cell for a while. I have another thread using a different method but I couldn’t figure it out so I thought I’d try another method. This is the other thread in case it’s the better method.

6

I think the other thread is using a more correct approach, I’ll answer there.

7

Thanks so much!