HTML keep checkbox checked after form submit

Question

I have some checkboxes in my code, that activate input fields after getting checked. For default they are disabled, so that the user chooses, which input field to activate and so which filter to activate or not. After the submit of the form the checkbox is always disabled again. Does anybody know how to keep them activated after submit, but also make them disabled by default?

<div>
    <input type="checkbox" onclick="var input = document.getElementById('Filter');   if(this.checked){ input.disabled = false; input.focus();}else{input.disabled=true;}" />
    <span class="text-white">Filter</span>
    <input id="Filter" name="Filter" disabled="disabled" />
</div>

Please post a minimal reproducible example of your attempt, noting input and expected output, preferably in a Stacksnippet — Alexandre Elshobokshy
– Alexandre Elshobokshy, Commented Aug 31, 2021 at 7:19
Hi, Such requirements demand for usage of a front end framework like vue/react which enables you with binding html attributes with your JavaScript model object. And you would end up writing less code. If that's not feasible then you may have to handleFormSubmit and set checkbox value again via JS code — Pavan J
– Pavan J, Commented Aug 31, 2021 at 7:33

Pavan J · Accepted Answer · 2021-08-31 07:37:48Z

2

What you can do is prevent default behavior of the form and add event listener for submit event and do your logic there.

<script type="text/javascript">
    let form = document.querySelector('form');
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        //Your code goes here to set checkbox state again
    })
</script>

edited Aug 31, 2021 at 7:37

Pavan J

3531 gold badge3 silver badges13 bronze badges

answered Aug 31, 2021 at 7:26

AhmCho

3905 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavan J Over a year ago

Add code to enable checkbox in submit event listener.

Professor Abronsius · Accepted Answer · 2021-08-31 08:25:09Z

To maintain the state of the checkboxes following a regular form submit event you need some mechanism for storing the relevant checkbox states. There are several client-side methods that you can choose from such as cookies, local/session Storage, indexedDB or Web SQL though the simplest to use is probably localStorage

The following has assigned a dataset attribute to each of the parent DIV elements. This data-id attribute could be numeric or string - the value will be used as a key in the localStorage object. Externally registered event listeners for all checkboxes will add the checkbox parent id to the store which can be easily read when the page is reloaded - thus the state can be restored.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        
    </head>
    <body>
        <form method='post'>
            <div data-id=1>
                <input type='checkbox' />
                <span class='text-white'>Filter</span>
                <input name='Filter' disabled />
            </div>
            <div data-id=2>
                <input type='checkbox' />
                <span class='text-white'>Filter</span>
                <input name='Filter' disabled />
            </div>
            <div data-id=3>
                <input type='checkbox' />
                <span class='text-white'>Filter</span>
                <input name='Filter' disabled />
            </div>
            <div data-id='geronimo'>
                <input type='checkbox' />
                <span class='text-white'>Filter</span>
                <input name='Filter' disabled />
            </div>
            
            <input type='submit' />
        </form>
        
        
        <script>
            const _STORE='wigwam-banana-teapot-jellyfish';  // Whatever you wish to call your storage

            document.querySelectorAll('input[type="checkbox"]').forEach( chk=>chk.addEventListener('click',function(e){
                /*
                    set the text field disabled state based upon
                    whether or not the checkbox is ticked.
                */
                this.parentNode.querySelector('input[name="Filter"]').disabled=!this.checked;
                
                /*
                    Add the data-id of the parent div to
                    localStorage
                */
                let json=localStorage.getItem( _STORE )!=null ? JSON.parse( localStorage.getItem( _STORE ) ) : {};
                    json[ this.parentNode.dataset.id ]=this.checked;
                    
                localStorage.setItem( _STORE, JSON.stringify( json ) );
            }));
            
            
            
            //reload checkbox states on page load...
            if( localStorage.getItem( _STORE )!=null ){
                // get the stored data...
                let json=JSON.parse( localStorage.getItem( _STORE ) );
                
                // process each item in stored data
                Object.keys( json ).forEach( id=>{
                    if( json[ id ]==true ){
                        // if there is a matching DOM element with this data-id
                        // set the checkbox state and enable the textfield.
                        let div=document.querySelector('div[ data-id="'+id+'" ]')
                            div.querySelector('input[type="checkbox"]').checked=true;
                            div.querySelector('input[name="Filter"]').disabled=false;
                    }
                })
            }
        </script>
    </body>
</html>

Collectives™ on Stack Overflow

HTML keep checkbox checked after form submit

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related