Skip to content

Form

Jump to bottom
Ralf Bitter edited this page Jun 28, 2023 · 4 revisions

The Controller

The View

Calling the Controller Handler from Global JavaScript

In the following, a very simple example will show how to use ASYNergy with forms. The topic of form validation is covered in a tutorial in the revIgniter documentation. Please see chapter ASYNergy Form Validation of the revIgniter user guide.

The Controller

The controller asynForm.lc loads the ASYNergy library and the asynFormView.lc view. It contains a handler named formTest that determines the values of the respective form elelements and sends these values to the client.

<?lc

put "asynForm,index,formTest" into gControllerHandlers


command asynForm
	rigLoaderLoadLibrary "ASYNergy"
end asynForm


command index
	get rigLoadView("asynFormView")
end index


command formTest
  put rigAsynElemData("myText") into tText
  put rigAsynElemData("CB") into tCB
  put rigAsynElemData("radio") into tRadio
  put rigAsynElemData("shirt") into tDropdown

  put tText & comma && tCB & comma && tRadio & comma && tDropdown into tResp
  
  rigAsynRespond tResp, , , "submittedData"
end formTest

The rigAsynElemData() function returns the value of the respective form element defined by the value of the element's asyn:transmit attribute. The fourth parameter of the rigAsynRespond handler is the value of the asyn:mutable attribute of the "mutable" element.

The View

The view contains a form with a <textarea> element, a checkbox, radio buttons and a select element. A <span> element with an asyn:mutable attribute encloses the response data.
The gData variable [[gData["asynergyScript"] ]] is used to load the ASNYergy JavaScript framework.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>

  <body>

    <form asyn:submit.prevent="formTest">

      <textarea name="message" rows="10" cols="20" asyn:transmit="myText"></textarea>
          
      <input name="checkbox" value="baz" type="checkbox" asyn:transmit="CB" />
          
      <input type="radio" name="myRadio" value="1" asyn:transmit="radio"  checked="checked" />
      <input type="radio" name="myRadio" value="2" asyn:transmit="radio"  />
          
      <select name="shirts" asyn:transmit="shirt">
        <option value="small" selected="selected">Small Shirt</option>
        <option value="med">Medium Shirt</option>
        <option value="large">Large Shirt</option>
        <option value="exlarge">Extra Large Shirt</option>
      </select>
          
      <input name="submitbtn" type="submit" value="Send" />
    </form>
        
    <p>Response: <span asyn:mutable="submittedData"></span></p>

    [[gData["asynergyScript"] ]]
  </body>
</html>

The asyn:submit.prevent directive at the form opening tag prevents all form values from being sent to a form-handler as specified by the form's action attribute, if there is any. Instead, clicking the "Send" button will call the formTest handler of your revIgniter controller. All form elements have an asyn:transmit directive, so the values of these elements will be included in the request data.

Calling the Controller Handler from Global JavaScript

To call the formTest handler from global JavaScript use the ASYNergy.emit method, such as:

<script>

  ASYNergy.emit('formTest');

</script>

ASYNergy USER GUIDE

Clone this wiki locally