jQuery Functional Test Suite

Say it in Smalltalk, Do it with jQuery

Form and Form Elements

Demo

Text Input

Text Area

false




1

1

12

Smalltalk

JQFormFunctionalTest>>renderLabel: aString control: aBlock model: anObject on: html
   | id |
   html fieldSet: [
      html label
         for: (id := html nextId);
         with: aString.
      html span: [
         aBlock
            value: id
            " update the paragraph "
            value: ((html jQuery this
               parents: 'fieldset';
               find: 'p') load
                  " serialize all nearby form elements "
                  serialize: (html jQuery this
                     parents: 'span';
                     find: ':input')) ].
      html paragraph: anObject ]

JQFormFunctionalTest>>renderTextInputOn: html
   self
      renderLabel: 'Text-Input'
      control: [ :id :script |
         html textInput
            id: id;
            value: textInput;
            callback: [ :value | textInput := value ];
            onChange: (script html: [ :h | h render: textInput ]).
         "the following code checks if a manual submit does a correct encoding:"
         html submitButton
            onClick: (html jQuery ajax
               callback: [ :value | textInput := value ] value: (html jQuery id: id) value;
               script: [ :s | s alert: 'The submitted value is: "' , textInput , '".' ]);
            with: 'Manual Submit' ]
      model: textInput
      on: html

JQFormFunctionalTest>>renderTextAreaOn: html
   self
      renderLabel: 'Text-Area'
      control: [ :id :script |
         html textArea
            id: id;
            columns: 20;
            value: textArea;
            callback: [ :value | textArea := value ];
            onChange: (script html: [ :h | h render: textArea ]) ]
      model: textArea
      on: html

JQFormFunctionalTest>>renderCheckBoxOn: html
   self
      renderLabel: 'Check-Box'
      control: [ :id :script |
         html checkbox
            id: id;
            value: checkBox;
            callback: [ :value | checkBox := value ];
            onChange: (script html: [ :h | h render: checkBox ]) ]
      model: checkBox
      on: html

JQFormFunctionalTest>>renderRadioButtonOn: html
   self
      renderLabel: 'Radio-Button'
      control: [ :id :script |
         html radioGroup
            callback: [:value | radioButton := value ];
            selected: radioButton;
            with: [ :group |
            1 to: 3 do: [ :each |
               html label: [
                  html radioButton
                     group: group;
                     value: each;
                     onChange: (script html: [ :h | h render: radioButton ]).
                  html text: each ].
               html break ] ] ]
      model: radioButton
      on: html

JQFormFunctionalTest>>renderSelectListOn: html
   self
      renderLabel: 'Select-List'
      control: [ :id :script |
         html select
            id: id;
            list: (1 to: 9);
            selected: selectList;
            callback: [ :value | selectList := value ];
            onChange: (script html: [ :h | h render: selectList ]) ]
      model: selectList
      on: html

JQFormFunctionalTest>>renderMultiSelectListOn: html
   self
      renderLabel: 'Multi-Select-List'
      control: [ :id :script |
         html multiSelect
            id: id;
            size: 3;
            list: (1 to: 9);
            selected: multiSelectList;
            callback: [ :value | multiSelectList := value ];
            onChange: (script html: [ :h | h render: multiSelectList ]) ]
      model: multiSelectList
      on: html

Source

<>
  < =>Text-Input</>
  <>
    < = = = = =/>
    < = = = =/>
  </>
  <>Text Input</>
</>
<>
  < =>Text-Area</>
  <>
    < = = = =>Text Area</>
  </>
  <>Text Area</>
</>
<>
  < =>Check-Box</>
  <>
    < = = = =/>
    < = = =/>
  </>
  <>false</>
</>
<>
  < =>Radio-Button</>
  <>
    <>
      < = = = = = =/>1
    </>
    </>
    <>
      < = = = = =/>2
    </>
    </>
    <>
      < = = = = =/>3
    </>
    </>
  </>
  <>1</>
</>
<>
  < =>Select-List</>
  <>
    < = =>
      < = =>1</>
      < =>2</>
      < =>3</>
      < =>4</>
      < =>5</>
      < =>6</>
      < =>7</>
      < =>8</>
      < =>9</>
    </>
  </>
  <>1</>
</>
<>
  < =>Multi-Select-List</>
  <>
    < = = = =>
      < = =>1</>
      < = =>2</>
      < =>3</>
      < =>4</>
      < =>5</>
      < =>6</>
      < =>7</>
      < =>8</>
      < =>9</>
    </>
  </>
  <>12</>
</>
< =>/*<![CDATA[*/$("#id35").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","36",$(this).parents("span").find(":input").serialize()].join("&"))});$("#id40").bind("click",function(){$.ajax({"url":"/javascript/jquery/formandformelements","data":["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","38","39="+encodeURIComponent($("#id35").val())].join("&"),"dataType":"script"})});$("#id41").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","42",$(this).parents("span").find(":input").serialize()].join("&"))});$("#id44").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","45",$(this).parents("span").find(":input").serialize()].join("&"))});$("#id51").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","49",$(this).parents("span").find(":input").serialize()].join("&"))});$("#id52").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","49",$(this).parents("span").find(":input").serialize()].join("&"))});$("#id53").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","49",$(this).parents("span").find(":input").serialize()].join("&"))});$("#id54").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","55",$(this).parents("span").find(":input").serialize()].join("&"))});$("#id57").bind("change",function(){$(this).parents("fieldset").find("p").load("/javascript/jquery/formandformelements",["_s=bWRkcW0IKsLqkpMu","_k=H5soFejc0TGS4Pmv","58",$(this).parents("span").find(":input").serialize()].join("&"))});/*]]>*/</>