express/pug loop to generate table with form per row

Question

Im just starting out with node.js/express/pug but i cannot get it to produce a form per row.

i have this template

mixin listentry(alternate,name,exposureTime,manufactor,usecount,lastused)
tr()
    | <form action='' method='post'>
    td()
        input(type='text',name='name',readonly,class='w100',value=name)
    td()
        input(type='number',name='exposureTime',class='w75',value=exposureTime)
    td()
        input(type='text',name='manufactor',class='w100',value=manufactor)
    if usecount == ""
        td()
        td() never
    else
        td() #{usecount}
        td() #{lastused}
    td() Delete Update
    | </form>


- var alternate = false;
each profile,name in profiles
    +listentry(alternate,name,profile.exposureTime,profile.manufactor,profile.usecount,profile.lastused)
    - var alternate = !alternate;

this produces:

<tr>
   <form>....</form>
   <td>.... ect

but i expected it to make

<tr>
   <form.....
   <td>.... ect
   </form>

What am i doing wrong?

No matter what i try, i cannot get it to produce a form containing the td's of a row, hence i dont the input into the form.

I and i try dont wish to have one big form containing all the rows.

edit: new version with form() but still do not produce the desired output

mixin listentry(alternate,name,exposureTime,manufactor,usecount,lastused)
   tr()
     form(action='', method='post')
        td()
            input(type='text',name='name',readonly,class='w100',value=name)
        td()
            input(type='number',name='exposureTime',class='w75',value=exposureTime)
        td()
            input(type='text',name='manufactor',class='w100',value=manufactor)
        if usecount == ""
            td()
            td() never
        else
            td() #{usecount}
            td() #{lastused}
        td() Delete Update

Check your formatting. Right now your mixin definition is empty, since the line below it is not indented. — Sean, Dec 14 '18 at 21:02
I have checked, and rewrote this a few times allready, and this morning i did it again, still with the same result — Stig, Dec 17 '18 at 06:38
It is invalid html to have a `form` element immediately inside a `tr` element. Only `td` or `th` elements are allowed to be immediate children of a `tr` ([source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr)). Your compiler or browser may be attempting to correct this error, resulting in unexpected output. — Sean, Dec 17 '18 at 22:05
damn, you are right, this used to work a decade ago when i did a lot of web development, it might have been a hack thou - thanks Going to use jquery to submit a row instead - what a shame.. — Stig, Dec 18 '18 at 07:53

score 0 · Answer 1 · answered Dec 14 '18 at 15:19

This can be fixed easily by using standard pug elements instead of escaped HTML (with the |) and making sure that everything you want INSIDE the form is indented two more spaces past the form element.

  form(action='' method='post')
    td()
      input(type='text',name='name',readonly,class='w100',value=name)
    td()
      input(type='number',name='exposureTime',class='w75',value=exposureTime)
    td()
      input(type='text',name='manufactor',class='w100',value=manufactor)
    if usecount == ""
      td()
      td() never
    else
      td() #{usecount}
      td() #{lastused}
    td() Delete Update

I have checked indentation. and in fact i started with form(), but that gave me same problem so i went the with the escaped html route so see if that helped. im going to edit my original question so show this as well — Stig, Dec 17 '18 at 06:40

score 0 · Accepted Answer · answered Dec 18 '18 at 07:55

0

Apperently Sean is right, you cannot have a form in per row any more.

so solution is to use jquery

Create a HTML table where each TR is a FORM

answered Dec 18 '18 at 07:55

Stig

87
3
14

express/pug loop to generate table with form per row

2 Answers2