how to use 'select' as the type of fields in editor?

[xuanxiaodeyu]

When I use 'text' as the type of fields in editor, it sends the content of the text to back-end. But when I use the type 'select', nothing is sent to back-end. How can I send the selected content to back-end?

[arthurkushman]

Request:

{"field1":"65","types[]":"key2","title":"vsvsdfv sdfvsdfv fds","desc":"<p>vsdfvsdfvsdfv</p>\n<p>vsdfvsdfvd</p>\n<p>vsdf</p>"}

here types[] is the select form element, defined this way:

let editor = {
...
        {
            label: 'Types:',
            name: 'types[]',
            values: [// if select,checkbox,radio etc types - need this pre-set structure of values
                {'key1': 'val1'},
                {'key2': 'val2'}
            ],
            type: 'select' 
        }

can u describe the problem in more detail?

[xuanxiaodeyu]

@arthurkushman here is my editior:

let editor = {
  . . .
  fields: [
      {
          label: "年:",
          name: "year",
          type: 'text', 
      },
      {
          label: "港口:",
          name: "gk",
          values: 
              [
              {'key1': 'val1'},
              {'key2': 'val2'}
          ],
          type: 'select'
      },
      {
          label: "集装箱泊位长度:",
          name: "jzxbwcd",
          type: 'text',
      },
      {
        label: "非集装箱泊位长度:",
        name: "f_jzxbwcd",
        type: 'text',
      },
      {
        label: "集装箱吞吐量箱量:",
        name: "jzxttl_xs",
        type: 'text',
      },
      {
        label: "集装箱吞吐量重量:",
        name: "jzxttl_zl",
        type: 'text',
      },
      {
        label: "非集装箱吞吐量:",
        name: "f_jzxttl_zl",
        type: 'text',
      },
  ]
};

'gk' is a select. I think it will be sent in request.body, but it isn't contained. here is my request.body:

{ year: '2021',
  jzxbwcd: '1',
  f_jzxbwcd: '1',
  jzxttl_xs: '1',
  jzxttl_zl: '1',
  f_jzxttl_zl: '1' }

so how can I do to send 'gk' via request.body to my back-end?

[arthurkushman]

I've tried your field, just in case, and it works

{gk: "key2", title: "vsdvdfvsdf"}

Can u please, post the hole main.js file content here to let me copy/paste and test accordingly?

[xuanxiaodeyu]

@arthurkushman I've found the right request containing the value of 'select'. Thank you. By the way, can I set the default value of the 'select'? Just in case users don's click the 'select' button.

[arthurkushman]

You can always do:

            values: [
                {'default': '==========='},
                {'key1': 'val1'},
                {'key2': 'val2'}
            ],

if u need more specific approach, like attributes for tag <option selected disabled hidden> I'm planning to implement this in near future.

[xuanxiaodeyu]

@arthurkushman I've tried your method, but it doesn't work. It just shows a more option of which the key is 'default' and the value is '==='. If I want to set 'key2' as the default value, that is, even if users don't click the option, the field also has a default value 'key2' and it will be sent to back-end, how would I do? Besides, how can I set the default value of the 'text'?

[arthurkushman]

Now u can add attributes to option tag and either to select Here is a patch - https://github.com/GigaTables/reactables/releases/tag/2.7.4 U can also download the last version from npm - https://www.npmjs.com/package/gigatables-react

npm update gigatables-react

An example:

        {
            label: 'Types:',
            name: 'types[]',
            values: [
                {'default': '===========', attrs: {hidden: true, disabled: true}},
                {'key1': 'val1'},
                {'key2': 'val2'}
            ],
            type: 'select', // select,checkbox,radio
            attrs: {required: true}
        }

[xuanxiaodeyu]

@arthurkushman The attributes 'hidden' and 'disabled' can be added to option tag but 'selected' can't. This is my editor:

{
          label: "gk:",
          name: "gk",
          values: [
              {'key1': 'val1', attrs: {disabled: true, selected: true}},
              {'key2': 'val2'}
          ],
          type: 'select',
          attrs: {required: true}
      },

But the option tag is:

<option disabled value="key1" data-value="val1">val1</option>

Why I can't add the attribute 'selected' to the option?

[arthurkushman]

Because FB claims that u should use defaultValue of select, but if you try to set defaultValue and value attributes in select tag there will be warning, that u should use only one: value or defaultValue. If you can live with warnings, then it is your way to make default option.