3 Random Evo queries (3.1.7 and 1.4.15)

nick0

BarnsleyBloke I think I may have a working example of remembered checkboxes using the prepare method the same as multiselect and the info getting back on the report.

Amazing. That works an absolute treat 😁 . Thanks so much @BarnsleyBloke - love, and greatly, appreciate, your work.

For the tutorial - possibly the original tutorial could be edited to simply also include your Checkbox snippet and the couple of extra things in the FormLister form required to handle the checkboxes? Both the select and checkbox snippets work well in the same form.

modxuser

BarnsleyBloke

Sorry, I currently don't have the time to do a tutorial / extend the original tutorial

Sadly due to Covid I have had to review my priorities and now no-longer have spare time on my hands due to my new work situation

That's also the reason I haven't been pro-active here in a long time

BBloke

@modxuser No problem. Life is certainly tough and I appreciate everything here that you have done. Hopefully what we have above is easy enough to find and understand.

I hope life, work and play balances out to a happy medium. Stay safe and keep well.

fourroses666

Somehow it couldn't get it remember my checkboxes on my (AJAX) form.
I search Google for localstorage on checkboxes and have it working by using this script:

<script>
	function load(){    
		var checked = JSON.parse(localStorage.getItem('purple'));
		document.getElementById("purple").checked = checked;
		
		var checked = JSON.parse(localStorage.getItem('yellow'));
		document.getElementById("yellow").checked = checked;
		
	}
	function save(){
		var checkbox = document.getElementById('purple');
		localStorage.setItem('purple', checkbox.checked);
		
		var checkbox = document.getElementById('yellow');
		localStorage.setItem('yellow', checkbox.checked);
	}

	load();
</script>

And my submit button looks like this:
<button class="btn" name="submit" type="submit" onclick="save()">

My checkboxes looks like this:

<label>
	<input type="checkbox" name="yellow" id="yellow" value="Yellow" [+yellow.value+]>
	Yellow
</label>

BBloke

Nice @Graffx Design I never thought about Ajax. Great way to save the form.

nick0

That Ajax solution is nice Marc - thanks for sharing.

Do you know how to achieve for a range of checkboxes rather than specifying the name of every checkbox?

eg say the name is options[] and there are 20 options, can your ajax solution be achieved without creating a javascript entry for each individual option?

fourroses666

Must be possible but I have no idea how to achieve that.

BBloke

It doesn't do anything other that works through each checkbox. You could then incorporate it with Graffx Design fourroses666 way so it's more dynamic.

BBloke

I like jquery but I found this way without it:

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}

nick0

BarnsleyBloke

Nice! Thanks so much. Vanilla JS 😆.
Please excuse my js ignorance... does that replace the 2 x functions load and save?

nick0

BarnsleyBloke It doesn't do anything other that works through each checkbox. You could then incorporate it with fourroses666 fourroses666 way so it's more dynamic.

Ahhh roger that. Will have a play. Thanks @BarnsleyBloke 😀

Pathologic

DocLister and other snippets used to build any form parts know nothing about FormLister's placeholders, so you would care about selected/checked attributes in these snippets manually. The best solution is to use ajax and FormLister's api mode to get json response, so you need no FormLister's placeholders in your form at all - all error messages and classes are handled by js script, something like that:

$('#form-select-wrapper').on('submit', 'form', function(e){
    e.preventDefault();
    var form = $(this);
    $.post('/assets/snippets/CommerceBoard/ajax.php',
        form.serialize(),
        function (response) {
            $('div.invalid-feedback', form).remove();
            if (response.status) {
                if (typeof response.redirect !== 'undefined') window.location.href = response.redirect;
                // or show success message, close modal window and so on...
            } else {
                if (typeof response.errors !== 'undefined' && Object.keys(response.errors).length > 0) {
                    for (var field in response.errors) {
                        var $field = $(field == 'social' ? '[name="' + field + '[]"]' : '[name="' + field + '"]', form).first().addClass('is-invalid').parents('.form-field');
                        var errors = response.errors[field];
                        for (var error in errors) {
                            if (errors[error] !== '') {
                                $field.append($('<div class="invalid-feedback">' + errors[error] + '</div>'));
                            }
                        }
                    }
                    var el = $('.is-invalid:first', form);
                    if (el.length != 0) {
                        var destination = el.offset().top;
                        $('html, body').animate( { scrollTop: destination }, 500 );
                    }
                }
                if (typeof response.messages !== 'undefined' && response.messages.length > 0) {
                    response.messages.forEach(function (message) {
                        alert(message);
                    });
                }
            }
        },
        'json'
    ).fail(function () {
        alert('Failed to send form');
    });
});```

nick0

Pathologic DocLister and other snippets used to build any form parts know nothing about FormLister's placeholders, so you would care about selected/checked attributes in these snippets manually. The best solution is to use ajax and FormLister's api mode to get json response, so you need no FormLister's placeholders in your form at all - all error messages and classes are handled by js script, something like that:

Thanks @Pathologic - that is interesting looking code. I have no idea how to implement it 😅 without seeing the form html and perhaps the Formlister call (given my lack of programming skills ) but no doubt does the job. Thanks for sharing and great to see you in the forums.