remove button input from form.elements array javascript

Question

I have a form, and I'm grabbing all input elements inside of it and place them into an their keys and values into an object (That works)... However I wan't to filter out the un needed button... How can I remove it/ ignore it?

if I console.log form.elements it returns:

[input#first_name.input-text, input#last_name.input-text, input#username.input-text, input#email.input-text, 
button#submit.btn ...]

  const formatData = {};
  const form = document.getElementById('signup');
  console.log(form.elements);

  for (let i = 1; i < myForm.elements.length; i++) {
      // check if button and remove / ignore
      if (form[i] === 'button') { // this doesn't work
          delete form[i];
      }
      const key = form.elements[i].name;
      const value = form.elements[i].value;
      formatData[key] = value;

How can I make sure button isn't included? :\ (this is written in jsx syntax)

I feel like form[i].tagName === 'BUTTON'should work. element.type also works on Chrome, but I can't find this property in the WebAPI docs. Note, that it's capitalised. See MDN. — Kazimieras
– Kazimieras, Commented Jun 9, 2016 at 15:51
@DimaGimburg if i log .type it returns text, hidden and submit.. I tried submit but it still shows. I think its how i should be deleting it. — Modelesq
– Modelesq, Commented Jun 9, 2016 at 15:53

jpec · Accepted Answer · 2016-06-09 16:21:12Z

1

You can filter form.elements by tagName.

const formatData = {};
const form = document.getElementById('signup');

[].slice.apply( form.elements ) // convert HTMLFormControlsCollection to Array
  .filter(( el ) => el.tagName !== 'BUTTON') // filter out all <button> elements
  .forEach(function ( el ) {
      formatData[ el.name ] = el.value; // add key / value to formatData object
  });

OR, if you prefer the for loop:

const formatData = {};
const form = document.getElementById('signup');

for (let i = 0, n = form.elements.length; i < n; i++) {
  if (form.elements[i].tagName === 'BUTTON') continue;

  formatData[ form.elements[i].name ] = form.elements[i].value;
}

edited Jun 9, 2016 at 16:21

answered Jun 9, 2016 at 16:13

jpec

4604 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Modelesq Over a year ago

That didn't work either. I just might have to deal with this on the backend

Modelesq Over a year ago

Actually how can i also filter out hidden inputs with your first example?

Peter Seliger Over a year ago

@Modelesq - Array.reduce is your friend - provided functionality is more readable, refactors better and can be shared (better code reuse) - see my answer below.

jpec Over a year ago

@Modelesq - When you say filter out hidden inputs, do you mean <input type="hidden"> elements?

Dima Gimburg · Accepted Answer · 2016-06-09 16:12:34Z

0

 for (let i = 1; i < myForm.elements.length; i++) {
      if (form[i].type !== 'button') { // or as suggested form[i].tagName !== 'BUTTON'
          const key = form.elements[i].name;
          const value = form.elements[i].value;
          formatData[key] = value;
      }

and don't you want to loop through all the elements and start the i with 0?

answered Jun 9, 2016 at 16:12

Dima Gimburg

1,4663 gold badges20 silver badges39 bronze badges

2 Comments

Modelesq Over a year ago

ah yeah thats a typo on my end. thank you for catching that

Modelesq Over a year ago

hmm if i run console.log(form.elements); it's still in there :\

Peter Seliger · Accepted Answer · 2016-06-09 16:58:55Z

0

var
    elementCollection = document.forms[document.forms.length -1].elements,
    elementRegistry   = Array.from(

        elementCollection

    ).reduce(function (collector, elm) {
        if (
               (elm.tagName.toLowerCase() !== 'button')
            && !collector.regXIgnoreTypes.test(elm.type)
        ) {
          //var key = (elm.id || elm.name);
            var key = elm.name;
            if (key !== '') {

                collector.elementRegistry[key] = elm;
            }
        }
        return collector;
    }, {

      regXIgnoreTypes: (/^(?:button|submit|image|hidden)$/),
      elementRegistry: {}

    }).elementRegistry;

console.log('+++ elementRegistry +++', elementRegistry);

edited Jun 9, 2016 at 16:58

answered Jun 9, 2016 at 16:31

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

Collectives™ on Stack Overflow

remove button input from form.elements array javascript

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related