Smalltalk 如何获取表单中所有字段的值？

我在客户端琥珀色解决方案中有这样的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>

---

你的表格有很多重复的地方。您可能想了解一下HTMLCanvas以及它在IDE中的使用方式

您可以在：aCanvas上添加一个方法

renderField:aFieldName，并重复使用该方法5次。你看过海滨吗

最终的结果应该是

renderOn: html
    html form with: [
        #('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [:each |
            self renderField: each on: html]

我重用了中的代码，并将其改写为琥珀色，以解决您问题的第一部分。
以下是迭代所有输入字段的方式：

(('#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

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

将值放入字典：

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

至于问题的第二部分，琥珀色的
Web
包包含用于生成HTML页面的类。
您要做的是创建
Widget
的子类，并实现
renderOn:html
方法。
作为
html
参数传入的对象属于
HTMLCanvas
类型，可用于创建如下html表单：

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

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).
        ].

在运行的琥珀色实例中实现该类后，可以使用以下代码执行该类：

AmberFormExample new appendToJQuery: 'body' asJQuery

“复制”是指字段标签和字段名？在Amber Smalltalk中这有什么不同？也许表单可以有不同的布局，但在我看来，输入字段和文本的数量无法减少。也没有说明表单是否以某种方式给定或生成。@MKroehnert您可能想看看seasidetoo@StephanEggermont我确实知道一些关于海滨的基本情况。但是问题是关于用Amber遍历字段。@StephanEggermont答案的第一部分很好。创建表单的方法可读性很强。#renderField:on:方法看起来如何？如何获取字段值？renderOn:方法是错误的。看看我的答案，看看IDE是如何创建的。html已经是一个HTMLCANVAS没有理由创建一个新的画布，因此完整的答案是错误的？编辑：将
HTMLCanvas new
更改为
html
还有一些结构性问题。局部变量？局部变量仅用于避免写下完整的类描述。。。（更新答案以反映这一点）无论如何，最好首先指出这些“缺陷”，而不是评论：“这是错误的”。斯蒂芬·埃格蒙特（Stephen Eggermont）和Mkrenert（Mkrenert）的答案都很有用。我已经加入了一个新版本的问题，它不太面向实现。我的答案中的第二个代码示例向您展示了如何获取输入字段的值。剩下要做的唯一一件事就是将它们放在字典实例中，使用
at:put:
。更新JQuery示例以将值也放在字典中。我的答案的另一个更新包含完整的示例@夸库。@Mkrohnert，谢谢你！我对它进行了测试，完整示例的代码运行良好。我以

格式将其添加到

文件中的问题中。