I have form with multiple input data and checklists but in controller I'm just getting checked items and no result for unchecked items.

This is what I get

"send_mail" => array:2 [▼
    0 => "on"
    1 => "on"
]

This is what I need

"send_mail" => array:2 [▼
    0 => "off"
    1 => "on"
    2 => "off"
    3 => "on"
]

Blade

<form enctype="multipart/form-data" action="{{route(''xxxxxxxx)}}" method="POST">
    @csrf
    @method('POST')
    <input name="name" id="name" >
    <div >
        <input  checked type="checkbox" name="send_mail[]">
        <label >Send Mail</label>
    </div>
    <div id="newRows">
    // new rows (same as above) will add here by javascript
    </div>
    <button type="submit" >Send</button>
</form>

Controller

public function test(Request $request) {
    dd($request->all());
}

CodePudding user response：

By default <input type="checkbox"> won't return if it hasn't been checked.

A classic method of fixing this is to duplicate the checkbox with a hidden input:

<input type="hidden" name="send_mail" value="0" />
<input type="checkbox" name="send_mail" value="1" />

This would require, however, moving away from the array of checkboxes you currently have.

The alternative is to use Javascript to submit your form.

CodePudding user response：

<div >
    <input type="checkbox" name="send_mail[]">
    <label>Name1</label>
</div>
<div >
    <input checked type="checkbox" name="send_mail[]">
    <label>Name2</label>
</div>
(another 2 div tag here)

CodePudding user response：

I faced a similar scenario back then. I managed to solve it by using JavaScript (jQuery to be specific) to submit the form.

I wrote up a reusable function to append the unchecked items.

Reusable function:

const prepareJQCheckboxFormData = (jQForm, jQSerializedFormData, checkboxNameAttr) => {
    let name;
    let data = [];

    checkboxNameAttr?.substr(-2) === "[]"
        ? name = checkboxNameAttr
        : name = `${checkboxNameAttr}[]`;

    let hasItem = false;

    jQForm.find("input[name='"   name   "']")
        .add(jQForm.find("input[name='"   name?.substr(0, name.length - 2)   "']"))
        .each(function () {
            if (($(this).attr("checked") === true) || $(this).is(":checked")) {
                hasItem = true;
            }
        });

    if (!hasItem) {
        jQSerializedFormData.push({
            name, value: [""]
        });
    }

    $(jQSerializedFormData).each(function (i, field) {
        if (field.name !== name?.substr(0, name.length - 2)) {
            data.push(field);
        } else {
            data.push({
                name: `${field.name}[]`,
                value: field.value
            });
        }

    });

    return data;

};

Form submission:

Assuming that the form 'id' is 'mail-form'

const form = $("#mail-form");
const btnSave = $("#mail-form button[type='submit']");

btnSave.click(function (e) {
    e.preventDefault();

    $.ajax({
        type: form.attr("method"),
        url: form.attr("action"),
        processData: false,  // Important for multipart-formdata submissions!
        contentType: false,  // Important for multipart-formdata submissions!
        cache: false,
        data: prepareJQCheckboxFormData(form, form.serializeArray(), "send_mail[]"),
        success: function (response) {
            // ...
        },
        error: function (jqXHR) {
            // ...
        },
        beforeSend: function () {
            // ...
        }
    });

});