Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35036 > unrolled thread

Serialise form with input of type image

Back to article view | Back to comp.lang.javascript

Contents

  Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-17 15:37 +1000
    Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-17 18:56 +1000
    Re: Serialise form with input of type image "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-05-17 13:24 +0200
      Re: Serialise form with input of type image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-05-22 15:55 +0200
        Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-23 10:17 +1000
    Re: Serialise form with input of type image JR <jr@yahoo.com> - 2018-05-23 16:42 -0300
      Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-24 11:21 +1000
        Re: Serialise form with input of type image Joao Rodrigues <jr@yahoo.com> - 2018-05-24 00:41 -0300
          Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-24 18:17 +1000

#35036 — Serialise form with input of type image

I have a form and some of the form elements are inputs of type image. 
For example

<input type="image" src="...blah" style="..blah">

When I pass the form to

function serialiseForm(frm) {
   return [].map.call(frm.elements, function(el) {
     return {
       "type": el.type,
       ...
     };
   });
}

It picks up every input (text, button, checkbox, number, radio...) 
except those of type image. Why does it seem to ignore inputs of type 
image, and how do I get it to also include them?

Andrew Poulos

[toc] | [next] | [standalone]

#35041

On 17/05/2018 3:37 PM, Andrew Poulos wrote:
> I have a form and some of the form elements are inputs of type image. 
> For example
> 
> <input type="image" src="...blah" style="..blah">
> 
> When I pass the form to
> 
> function serialiseForm(frm) {
>    return [].map.call(frm.elements, function(el) {
>      return {
>        "type": el.type,
>        ...
>      };
>    });
> }
> 
> It picks up every input (text, button, checkbox, number, radio...) 
> except those of type image. Why does it seem to ignore inputs of type 
> image, and how do I get it to also include them?

If I do console.log(frm) the inputs of type "image" are there.

If I do console.log(frm.elements) the inputs don't get picked up.

If I change the type to "text" the inputs get picked up.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35042

On 17.05.2018 at 07:37, Andrew Poulos wrote:

> I have a form and some of the form elements are inputs of type image.
> For example
> 
> <input type="image" src="...blah" style="..blah">
> 
> It picks up every input (text, button, checkbox, number, radio...)
> except those of type image. Why does it seem to ignore inputs of type
> image, and how do I get it to also include them?

See
<https://www.w3.org/TR/html52/sec-forms.html#dom-htmlformelement-elements>.
 If you really need <input type="image"> elements, you could replace
`frm.elements` with `frm.getElementsByTagName("input")`, or such.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#35098

Christoph M. Becker wrote:

>  If you really need <input type="image"> elements, you could replace
> `frm.elements` with `frm.getElementsByTagName("input")`, or such.

As for “such”:

  function serialiseForm (frm)
  {
    let a = [];

    return a.slice.call(frm.elements)
      .concat(
        a.filter.call(
          frm.getElementsByTagName("input"),
          (control) => control.type.toLowerCase() === "image"))
      .map((el) => {
        return {
          "type": el.type,
          // ...
        };
      });
  }

Use backwards-compatible syntax as necessary.

BTW, “`” is the /TemplateLiteral/ delimiter now (ES 6+).
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#35101

On 22/05/2018 11:55 PM, Thomas 'PointedEars' Lahn wrote:
> Christoph M. Becker wrote:
> 
>>   If you really need <input type="image"> elements, you could replace
>> `frm.elements` with `frm.getElementsByTagName("input")`, or such.
> 
> As for “such”:
> 
>    function serialiseForm (frm)
>    {
>      let a = [];
> 
>      return a.slice.call(frm.elements)
>        .concat(
>          a.filter.call(
>            frm.getElementsByTagName("input"),
>            (control) => control.type.toLowerCase() === "image"))
>        .map((el) => {
>          return {
>            "type": el.type,
>            // ...
>          };
>        });
>    }

Cool, I never thought of combining slice, filter and map for this.

> Use backwards-compatible syntax as necessary.
> 
> BTW, “`” is the /TemplateLiteral/ delimiter now (ES 6+).

I just looked up this on MDN and I'm pleasantly surprised that there's 
finally a simpler way to work with strings (and basic support is 
currently in everything bar IE).

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35104

Andrew Poulos wrote:
> I have a form and some of the form elements are inputs of type image. 
> For example
> 
> <input type="image" src="...blah" style="..blah">
> 
> When I pass the form to
> 
> function serialiseForm(frm) {
>    return [].map.call(frm.elements, function(el) {
>      return {
>        "type": el.type,
>        ...
>      };
>    });
> }
> 
> It picks up every input (text, button, checkbox, number, radio...) 
> except those of type image. Why does it seem to ignore inputs of type 
> image, and how do I get it to also include them?
> 

As Christoph M. Becker has already posted, input of type="image" is not 
included in HTMLFormElement.elements [1]. So, you'll have to add these 
inputs in your code. For instance:

function serialiseForm(frm) {
   return [].map.call([...frm.elements,
     ...frm.querySelectorAll("input[type=image]")],
     el => ({type:el.type /*, ...*/}));
}

[1] 
<https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements>

Cheers,
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#35107

On 24/05/2018 5:42 AM, JR wrote:
> function serialiseForm(frm) {
>    return [].map.call([...frm.elements,
>      ...frm.querySelectorAll("input[type=image]")],
>      el => ({type:el.type /*, ...*/}));
> }

When I tried this

function serialiseForm(frm) {
   return [].map.call([frm.elements,
                       frm.querySelectorAll("input[type=image]")],
     el => ({type:el.type}));
}

I got this in the console

(2) [{…}, {…}]
   0: {type: undefined}
   1: {type: undefined}
   length: 2
   __proto__: Array(0)

though the form contains numerous elements. Why is that happening?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#35109

On 23/05/2018 22:21, Andrew Poulos wrote:
> On 24/05/2018 5:42 AM, JR wrote:
>> function serialiseForm(frm) {
>>    return [].map.call([...frm.elements,
>>      ...frm.querySelectorAll("input[type=image]")],
>>      el => ({type:el.type /*, ...*/}));
>> }
> 
> When I tried this
> 
> function serialiseForm(frm) {
>    return [].map.call([frm.elements,
                         ^^^
>   frm.querySelectorAll("input[type=image]")],
     ^^^
>      el => ({type:el.type}));
> }
> 
> I got this in the console
> 
> (2) [{…}, {…}]
>    0: {type: undefined}
>    1: {type: undefined}
>    length: 2
>    __proto__: Array(0)
> 
> though the form contains numerous elements. Why is that happening?

You have omitted the spread operator (three dots) in [...frm.elements, 
...frm.querySelectorAll("input[type=image]")].

The spread operator, introduced in ECMA2015 (aka ES6), turns the items 
of an iterable into arguments of a function call or into elements of an 
Array [1][2]. E.g.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

Unlike concat(), push(), etc., you can use the spread operator to insert 
an array anywhere inside another array.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

So, I've used the spread operator to concatenate the Array-like objects 
returned by frm.elements and frm.querySelectorAll("input[type=image]") 
into the serialiseForm() function:

function serialiseForm(frm) {
   return [].map.call([...frm.elements,
     ...frm.querySelectorAll("input[type=image]")],
     el => ({type:el.type /*, ...*/}));
}

It's also possible to use Array.from(array, mapFn) as in:

function serialiseForm(frm) {
   return Array.from([...frm.elements,
       ...frm.querySelectorAll("input[type=image]")
     ],
     el => ({
       tagname: el.tagName,
       type: el.type /*, ...*/
     })
   );
}

[1] 
<http://exploringjs.com/es6/ch_parameter-handling.html#sec_spread-operator>
[2] 
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax>

Cheers,
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#35111

On 24/05/2018 1:41 PM, Joao Rodrigues wrote:
> On 23/05/2018 22:21, Andrew Poulos wrote:
>> On 24/05/2018 5:42 AM, JR wrote:
>>> function serialiseForm(frm) {
>>>    return [].map.call([...frm.elements,
>>>      ...frm.querySelectorAll("input[type=image]")],
>>>      el => ({type:el.type /*, ...*/}));
>>> }
>>
>> When I tried this
>>
>> function serialiseForm(frm) {
>>    return [].map.call([frm.elements,
>                          ^^^
>>   frm.querySelectorAll("input[type=image]")],
>      ^^^
>>      el => ({type:el.type}));
>> }
>>
>> I got this in the console
>>
>> (2) [{…}, {…}]
>>    0: {type: undefined}
>>    1: {type: undefined}
>>    length: 2
>>    __proto__: Array(0)
>>
>> though the form contains numerous elements. Why is that happening?
> 
> You have omitted the spread operator (three dots) in [...frm.elements, 
> ...frm.querySelectorAll("input[type=image]")].

Ah ok. I never knew spread operators existed.

Andrew Poulos

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web