CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: FormData not adding form data  (Read 112 times)

AndrewTraub

  • Junior Member
  • *
  • Posts: 42
  • Karma: +0/-0
FormData not adding form data
« on: 2 Apr 2022, 12:04:40 pm »
I'm not sure why, but the form data is not being added to the FormData object with the following code:
Code: [Select]
const formValidator = ({form, e, rules}) => {
...
    form.onsubmit = async (e) => {
        e.preventDefault();
        if (preventSubmit) return;
        preventSubmit = true;
...
            let data = new FormData(form);
            data.set("fromJs", 1);

            for(let [name, value] of data) {
                console.log(`${name} = ${value}`); // key1 = value1, then key2 = value2
            }
     }
}

only fromJs is output to the console.log and not the form values themselves.

Any ideas on what I'm doing wrong?
p.s. My input elements do have the name attribute, so that is not the cause.
« Last Edit: 2 Apr 2022, 12:11:27 pm by AndrewTraub »

AndrewTraub

  • Junior Member
  • *
  • Posts: 42
  • Karma: +0/-0
Re: FormData not adding form data
« Reply #1 on: 2 Apr 2022, 12:22:48 pm »
Turns out the problem was that I had disabled all the form inputs before the new formData line. FormData apparently does not include disabled items.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 828
  • Karma: +153/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: FormData not adding form data
« Reply #2 on: 2 Apr 2022, 02:33:02 pm »
Yeah, disabled is LITERALLY disabled. Doesn't send.

Some advice: Unless you literally just created "form" on the DOM do not assign event handlers via Element.onsubmit. Other scripts may interfere. There's a reason addEventListener exists.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

AndrewTraub

  • Junior Member
  • *
  • Posts: 42
  • Karma: +0/-0
Re: FormData not adding form data
« Reply #3 on: 5 Apr 2022, 05:08:02 pm »
Thanks.  I've adapted a form validator function that was written to use jQuery to just be vanilla js. The function has the form element passed to it that it will intercept and then overrides the onsubmit function. Now I need to handle submits from buttons before the validation is run.  I'll see how I can modify what i've written so far to call formValidator via addEventListener instead.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 828
  • Karma: +153/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: FormData not adding form data
« Reply #4 on: 6 Apr 2022, 07:08:38 am »
You're setting off some warning flags, but that's typical of the crap written for jQuery.

See.... form validation in all but the rarest of corner cases just isn't JavaScripts' job anymore. Between "pattern" providing regex matching, "minlength" and "maxlength" creating restrictions, "required" preventing empy input from submitting, and the "new" (if 14 years can be called "new") INPUT element types... most of the garbage people throw scripting at for forms isn't JavaScript's job anymore!

Especially since irregardless of what you do client side, you still HAVE to run all the same checks server-side and be ready to spit it back at the user.

What in particular are you checking for that HTML validation cannot?
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

AndrewTraub

  • Junior Member
  • *
  • Posts: 42
  • Karma: +0/-0
Re: FormData not adding form data
« Reply #5 on: 6 Apr 2022, 03:56:25 pm »
Mostly that input fields are not blank and that select fields have a selection made :) and then outputting a nice error message below the field with a clickable list of errors at the top of the page. There is also a check onblur in the registration page to make sure the email is not already taken. In one case, I have 52 checkboxes (this is simpler than a multi-select listbox) and at least one needs to be checked.

 

SMF spam blocked by CleanTalk

Advertisement