如何獲取表單所有字段的值？

Question

我在客戶端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代碼構造表單。

參考

• https://github.com/amber-smalltalk/amber/wiki/FAQ#how-do-i-get-the-text-value-of-an-input-field
• http://api.jquery.com/each/

答案后編輯：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.
            ]
! !

Answer 1

我重用了這個問題的代碼，並在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

至於問題的第二部分，Amber中有一個Web包，其中包含用於生成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

Answer 2

您的表單中有很多重復項。 您可能想看一下HTMLCanvas及其在IDE中的使用方式。

您可以在renderField: aFieldName on: aCanvas添加方法renderField: aFieldName on: aCanvas並重復使用5次。 您看過海邊嗎？

最終結果應該是這樣的

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