如何获取表单所有字段的值?

aku

我在客户端Amber解决方案中有这样的HTML表单

<form id="myForm1">
  Creator:  <input type="text" name="creator" />
  <br>
  Title:  <input type="text" name="title" />
  <br>
  Description:  <input type="text" name="description" />
  <br>
  Doctype:  <input type="text" name="doctype" />
  <br>
  Tags:  <input type="text" name="tags" />
</form>

问题

我如何遍历表单的所有字段,以便将字段内容放入Amber字典中,并将字段名称作为键,将文本内容作为值?

Stephen-Eggermont和MKroenert回答后的新版本问题

我如何获取表格中所有字段的值,以便将它们放入Amber字典中,而字段名作为键,文本内容作为值?

还是有一种惯用的方式来创建表单并检索值?

注意:如果可以使表单更具可读性,则可以使用Amber代码构造表单。

参考

答案后编辑:FileIn代码

MKroenert提供的答案很好用

以下是我测试过的代码。它可以直接归档在工作空间中

    Widget subclass: #AmberFormExample
    instanceVariableNames: 'dictionary inputs'
    package: 'TodoList'!

!AmberFormExample methodsFor: 'not yet classified'!

collectValues
    inputs do: [ :each |
        dictionary at: (each asJQuery attr: 'name')
            put: (each asJQuery val).
        ].

Transcript show: dictionary printString
!

initialize
    dictionary := Dictionary new.
    inputs := Array new.
!

renderInput: inputName on: html
    html p: [
        html label with: inputName.
            inputs add: (html input id: inputName;
                name: inputName;
                yourself)]
!

renderOn: html
    inputs removeAll.
    html form id: 'myForm1'; with: [
        #('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [ :each |
            self renderInput: each on: html]].
    html button
        with: 'Collect Inputfield Values';
        onClick: [
            self collectValues.
            ]
! !
克罗纳特

我重用了这个问题的代码,并在Amber中重写了代码,以解决问题的第一部分。这是您遍历所有输入字段的方式:

(('#myForm1 *' asJQuery)
    filter: ':input')
        each: [ :thisArg :index |
            console log: thisArg ] currySelf

需要此琥珀色配方才能访问JavaScript this

可以将输入字段的名称和值同时打印到JavaScript控制台,如下所示:

(('#myForm1 *' asJQuery)
    filter: ':input')
        each: [ :thisArg :index |
            console log: (thisArg asJQuery attr: 'name').
            console log: (thisArg asJQuery val)] currySelf

将值放入字典中:

| dict |
dict := Dictionary new.
(('#myForm1 *' asJQuery)
    filter: ':input')
        each: [ :thisArg :index |
            dict at: (thisArg asJQuery attr: 'name')
                put: (thisArg asJQuery val)] currySelf

至于问题的第二部分,WebAmber中有一个包,其中包含用于生成HTML页面的类。您要做的是创建的子类Widget并实现该renderOn: html方法。作为html参数传入的对象是类型HTMLCanvas,可用于创建这样的HTML表单:

renderOn: html
    html form with: [
        html input id: 'creator'.
        html input id: 'title'.]

这是一个完整的例子。以它为起点,并意识到这可能不是最有效的处理方式

Widget subclass: #AmberFormExample
    instanceVariableNames: 'dictionary inputs'
    package: 'Examples'

AmberFormExample>>initialize
    dictionary := Dictionary new.
    inputs := Array new.

AmberFormExample>>renderOn: html
    inputs removeAll.
    html form id: 'myForm1'; with: [
        #('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [ :each |
            self renderInput: each on: html]].
    html button
        with: 'Collect Inputfield Values';
        onClick: [
            self collectValues.
            ]

AmberFormExample>>renderInput: inputName on: html
    html p: [
        html label with: inputName.
            inputs add: (html input id: inputName;
                name: inputName;
                yourself)]

AmberFormExample>>collectValues
    inputs do: [ :each |
        dictionary at: (each asJQuery attr: 'name')
            put: (each asJQuery val).
        ].

在正在运行的Amber实例中实现此类后,可以使用以下代码来执行它:

AmberFormExample new appendToJQuery: 'body' asJQuery

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从所有文本字段获取所有值

来自分类Dev

Solr-如何获取所有多面字段的值?

来自分类Dev

如何从商店获取特定字段的所有值?

来自分类Dev

获取HTML表单的所有值

来自分类Dev

如何动态获取表单字段值?

来自分类Dev

如何获取并计算jquery中表单的所有启用的输入字段?

来自分类Dev

Javascript如何获取表单的所有元素

来自分类Dev

jQuery,获取所有克隆输入字段的所有值

来自分类Dev

从Symfony的表单中获取所有字段名称

来自分类Dev

如何从WooCommerce获取所有结帐字段?

来自分类Dev

ElasticSearch - 如何获取文档的所有字段?

来自分类Dev

如何使用jQuery从HTML表单获取数组中的所有id元素值

来自分类Dev

如何在表单中一次性获取所有输入值

来自分类Dev

如何使用 PHP 获取表单提交时的所有组合框值

来自分类Dev

如何获取和显示sql表中某个字段的所有值?

来自分类Dev

如何获取所有相同的值字段,如类别及其子类别?

来自分类Dev

Javascript:获取所有表单输入值作为数组

来自分类Dev

将所有表单值获取到javascript数组中

来自分类Dev

提交表单时如何获取隐藏输入字段的值?

来自分类Dev

如何让Firefox填写所有表单字段?

来自分类Dev

如何禁用除所选表单字段之外的所有表单字段

来自分类Dev

如何查找表单中的所有输入字段,然后使用Javascript将它们的值复制到textarea中?

来自分类Dev

如何在添加/删除文本字段中获取所有文本字段的值并形成JSON

来自分类Dev

Elasticsearch从所有文档中获取字段的值

来自分类Dev

Mongodb查找聚合未获取所有字段值

来自分类Dev

获取MongoDB中某些字段的所有值

来自分类Dev

单击按钮后获取所有输入字段值。( JavaScript )

来自分类Dev

如何从列表中获取所有值?

来自分类Dev

Elasticsearch,如何获取一个字段的所有唯一值并计算总唯一值?

Related 相关文章

  1. 1

    如何从所有文本字段获取所有值

  2. 2

    Solr-如何获取所有多面字段的值?

  3. 3

    如何从商店获取特定字段的所有值?

  4. 4

    获取HTML表单的所有值

  5. 5

    如何动态获取表单字段值?

  6. 6

    如何获取并计算jquery中表单的所有启用的输入字段?

  7. 7

    Javascript如何获取表单的所有元素

  8. 8

    jQuery,获取所有克隆输入字段的所有值

  9. 9

    从Symfony的表单中获取所有字段名称

  10. 10

    如何从WooCommerce获取所有结帐字段?

  11. 11

    ElasticSearch - 如何获取文档的所有字段?

  12. 12

    如何使用jQuery从HTML表单获取数组中的所有id元素值

  13. 13

    如何在表单中一次性获取所有输入值

  14. 14

    如何使用 PHP 获取表单提交时的所有组合框值

  15. 15

    如何获取和显示sql表中某个字段的所有值?

  16. 16

    如何获取所有相同的值字段,如类别及其子类别?

  17. 17

    Javascript:获取所有表单输入值作为数组

  18. 18

    将所有表单值获取到javascript数组中

  19. 19

    提交表单时如何获取隐藏输入字段的值?

  20. 20

    如何让Firefox填写所有表单字段?

  21. 21

    如何禁用除所选表单字段之外的所有表单字段

  22. 22

    如何查找表单中的所有输入字段,然后使用Javascript将它们的值复制到textarea中?

  23. 23

    如何在添加/删除文本字段中获取所有文本字段的值并形成JSON

  24. 24

    Elasticsearch从所有文档中获取字段的值

  25. 25

    Mongodb查找聚合未获取所有字段值

  26. 26

    获取MongoDB中某些字段的所有值

  27. 27

    单击按钮后获取所有输入字段值。( JavaScript )

  28. 28

    如何从列表中获取所有值?

  29. 29

    Elasticsearch,如何获取一个字段的所有唯一值并计算总唯一值?

热门标签

归档