Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #102763
    mario-m3e
    Participant

    I am currently testing the functionality of the smart-check-box for a current project.
    What I have is a collection of smart-check-boxes dynamically created, they look like this with different values for id and value

    <smart-check-box id="17-4PH" name="materials" value="17-4PH" class="smart-element smart-check-box smart-toggle-box _init" type="checkbox" role="checkbox" tabindex="0" aria-checked="true" checked=""><div class="smart-container" role="presentation" smart-id="container">
                        <div class="smart-overlay" role="presentation"></div>
                        <span class="smart-input" aria-hidden="true" smart-id="checkBoxInput"></span>
                        <span class="smart-label" smart-id="checkBoxLabel">17-4PH</span>
                        <input class="smart-hidden-input" type="hidden" smart-id="hiddenInput" name="materials" value="17-4PH">
                    </div></smart-check-box>

    I have 28 of them in one collection.
    What I need to do is trigger the change event and collect the value of the checked box in an array so I can use the values to query our database.

    I am working with a PHP MVC framework on this project.

    Any help would be greatly appreciated.

    Thank you,
    Mario

    • This topic was modified 2 years, 10 months ago by mario-m3e.
    #102770
    Yavor Dashev
    Participant

    Hi Mario,

     

    I have created a quick JavaScript code snippet to showcase how to achieve the functionality that you need and store the value of the checked checkbox.

        <smart-check-box value="1">Check Box</smart-check-box>
        <smart-check-box value="1">Check Box</smart-check-box>
        <smart-check-box value="17-333123">Check Box</smart-check-box>
        <smart-check-box value="17-22">Check Box</smart-check-box>
        <smart-check-box value="17-321">Check Box</smart-check-box>
        <smart-check-box value="17-123">Check Box</smart-check-box>
        <smart-check-box value="17-111">Check Box</smart-check-box>
        <smart-check-box value="17-333331">Check Box</smart-check-box>
        <smart-check-box value="17-22">Check Box</smart-check-box>
        <smart-check-box value="17333">Check Box</smart-check-box>
        <smart-check-box value="17-4PH1111">Check Box</smart-check-box>
        <smart-check-box value="17-4PH2">Check Box</smart-check-box>
        <smart-check-box value="17-4PH1">Check Box</smart-check-box>
        <smart-check-box value="17-4PH123">Check Box</smart-check-box>
    
    	<!-- scripts -->  
        <script type="module" src="../../../source/modules/smart.checkbox.js"></script> 
        <script >
            window.onload = function () {
                const allCheckBoxes = document.querySelectorAll("smart-check-box");
                let checkedBoxesValues= []
    
                Array.from(allCheckBoxes).forEach(checkBox => {
                    checkBox.addEventListener('change', ()=> {
                        checkedBoxesValues.push(checkBox.value)
                        console.log(checkedBoxesValues)
                    })
                })
            };
        </script>	

    Let me know what you think!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

    Smart UI Team
    https://www.htmlelements.com/

     

    • This reply was modified 2 years, 10 months ago by Yavor Dashev.
    • This reply was modified 2 years, 10 months ago by Yavor Dashev.
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.