Read some similar posts on here but they don't quite solve my problem. I've gt an entry form with a matrix field in it, and I’m trying to make it editable via front end entry form. Specifically I'd like to be able to remove rows – either delete them, or disable them.

So my form has a ‘Remove’ button (Remove) on each row. Clicking the button should remove or disable the matrix row, save and reload the entry/page. Javascript isn’t my forte but here’s what I’ve got so far:

document.addEventListener('DOMContentLoaded', function () {
    function getAll(selector) {
        return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
    var $removeBtn = getAll( '.remove' );
    if ($removeBtn.length > 0) {
        $removeBtn.forEach( function ( $e ) {
            $e.addEventListener('click', function () {
                var target = $e.dataset.target;
                document.getElementById( target ).value = null;
                $( '#failures' ).submit();

On my template I’ve got:

<input type="hidden" name="fields[{{ assessment.assessmentActionPlan }}][{{ block.id }}][type]" id="type-{{ block.id }}" value="failure">
<input type="hidden" name="fields[{{ assessment.assessmentActionPlan }}][{{ block.id }}][enabled]" id="enabled-{{ block.id }}" value="1">

My script is correctly setting the enabled field value to null and submitting the form (#failures), but the matrix field on the entry remains unchanged. Where am I going wrong? Thanks for any help.

1 Answer 1


In the end I went with a slightly different approach, allowing users to remove multiple rows before submitting the form. Nod to this excellent article: https://caffeinecreations.ca/blog/editing-a-front-end-form-with-matrix/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.