Ignore hidden fields

[alcalyn]

Is your feature request related to a problem? Please describe. I'm using this library to store form data into localStorage as a "draft". But I don't want to store hidden fields, because I don't want to store passwords, nor csrf tokens.

Describe the solution you'd like I would be able to add an option in formToJson method to don't get hidden fields in json result, like something like:

let values = FormDataJson.formToJson(document.querySelector("form"), new FormDataJsonOptions({ includeHidden: false }))

I guess the default value for includeHidden should be true in order to prevent BC break, and to keep the same behaviour for those who want to POST the json to a server, and need the hidden fields.

By the way, thanks for this vanillaJs library, which is not dependant to jquery, or is not a react/angular module !

[brainfoolong]

Hi. I think it is better to not add features like input filtering directly into this library, which adds complexity for no real advantage.

As you say, you don't want store passwords, this passwords are probably "password" fields and not hidden ones. This is "business" logic, and can be done easily with the following.

My recommendation for your: Fetch the data with formToJson and than afterwards just delete data.xyz the fields you don't want in the object. This is far more flexible and not require more work for you as an option where you have to say which fields you want to filter out.

[alcalyn]

Ok I'll do it on my own side. The thing is, it is not related to a single form, but generally, so I cannot guess field names.

I'll try to process my form before, then ignore password/hidden fields.

[brainfoolong]

I get the point. Than you are probably better on with a custom function which do the logic in combination with FormDataJson. Even you can think of custom "data-" attributes, to define directly in the form which fields you want to ignore. Than iterate over it document.querySelectorAll and get name attribute of the field, than you can automate the deletion progress. Something like this

let ignoreInputs = myform.querySelectorAll('[data-ignore]')
let formValues = FormDataJson.formToJson(myform)
for (let i = 0; i < ignoreInputs.length; i++) {
  delete formValues[ignoreInputs[i].name]
}

[alcalyn]

Nice, I understand. I'll try something like myForm.querySelectorAll('[type="hidden"],[type="password"]').

I won't add data-* on inputs because it would lead to too much changements on form generation.

Thanks !

[brainfoolong]

Sure, also a valid solution 👍

[alcalyn]

Finally I couldn't easily use this method because I had name="my_form[my_data]" input, so it was too complex to delete formData[...].

So I patched your library to add a filter callback: https://github.com/brainfoolong/form-data-json/compare/master...alcalyn:master

And in my script:

const options = new FormDataJsonOptions({
    includeCallback: input => {
        let inputType = (input.type || 'text').toLowerCase();

        return inputType !== 'hidden' && inputType !== 'password';
    },
});

let formValues = FormDataJson.formToJson(form, options);

[brainfoolong]

Nice idea. Maybe i'll patch this stuff in as it's very flexible.

[alcalyn]

Cool ! I can update also the readme, add a test and open a PR

[brainfoolong]

Thx, you don't have to. I will integrate the idea, not the exact code that you've changed.

[brainfoolong]

Allright, with https://github.com/brainfoolong/form-data-json/releases/tag/1.3.0 this release it should be included in the way you've done it initially. If this is usable for you, let me know. Than i push out the release to the npm lib.

[alcalyn]

Thanks, I'll try this version tomorrow, it should work !

[alcalyn]

It works with:

const options = new FormDataJsonOptions({
    inputFilter: input => {
        const inputType = input.type.toLowerCase();

        return inputType !== 'hidden' && inputType !== 'password';
    },
});

const formValues = FormDataJson.formToJson(form, options);

Thanks for your time

[brainfoolong]

Thanks for your help. I've published it on npm also.