Automate writing ajax form handlers

It's about a slight simplification of the implementation of the available AJAX front-end. Speaking of accessibility, it is understood that there are 2 versions of the application for users with and without AJAX.

Developing applications that involve interaction with AJAX, there are a few things that are very distracting, so I would like to simplify them. In particular, when creating forms for such applications, it is quite boring to describe each time in the form onsubmit = "mysuperfunction (...);", I would like to automate this process. I would also like to use the MVC pattern for development in JS.

The idea of ​​the approach is to use the value of the action attribute to call JS methods.
')

I don’t know for sure if this method is used in some JS MVC frameworks. I would be grateful for constructive criticism and references if I reinvent the wheel.

So the prerequisites. There are many forms in the application that must be processed asynchronously, if AJAX is or lead to a regular HTTP request otherwise. Generally speaking, the form already has all the data that is needed for processing. This is, first of all, the data of the controls, the type of form transfer (POST / GET) and the address to which this data should be sent.

The idea of ​​the approach is to use the value of the action attribute to call JS methods. Having written a small piece of code, the form can be described as follows:

<form action = "url" method = "post" onSubmit = "return MVC.dispatch ();"> we will immediately stipulate that to implement this approach, a strict and logical structure of the project is necessary (the main thing is not to allow the same actions for different actions). Thus, it is necessary to register routes and handlers for these routes on JS (complete analogy with Zend Framework, Django, RoR).
Actually it is necessary to write something like that. A small note, since MVC is supposed to be used, which leads to the creation of both controllers and actiones, the description in the route structure as strings (method names) was deliberately chosen (then this can be screwed to the existing frameworks or implement your own).

// <br> function MVC(){<br> // <br> this .data = new Object();<br> // (url, ) <br> this .routes=[{url: '/' ,action: 'action1' }];<br>}<br><br> // <br>MVC.prototype.dispatch = function (form){<br> // MVC.data <br> // checkbox' radio- <br> this .data = new Object();<br> for ( var i=0;i<form.elements.length;i++){<br> if ( typeof form.elements[i].value!= 'undefined' && form.elements[i].name!= '' ){<br> if (form.elements[i].type== 'checkbox' || form.elements[i].type== 'radio' ){<br> if (form.elements[i]. checked ){<br> this .data[form.elements[i].name]=form.elements[i].value;<br> }<br> } else {<br> this .data[form.elements[i].name]=form.elements[i].value;<br> }<br> }<br> }<br><br> // "" action <br> var url=form.attributes[ 'action' ].value;<br> // <br> for (i in this .routes){<br> if (url== this .routes[i].url){<br> var f= this [ this .routes[i].action];<br> f.call( this );<br> }<br> }<br> <br> return false <br>};<br><br> // / <br>MVC.prototype.action1= function (){<br> var d= document .getElementById( 'data' );<br> <br> d.innerHTML = ' :<ul>' ;<br> for (i in this .data){<br> d.innerHTML += '<li><b>' +i+ '</b>:' + this .data[i]+ '</li>' ;<br> }<br> d.innerHTML += '</ul>' ;<br>}<br><br>MVC = new MVC();<br> <br> * This source code was highlighted with Source Code Highlighter .

The code is transparent so that I don’t really need any explanations. It was written in 15 minutes, so I am waiting for criticism. Why is form.action not used? Because, at run time in this attribute will be the full address that does not suit us.

Description of the form. The form will be described as follows.

  <form action = "/" method = "post" onsubmit = "return MVC.dispatch (this);">
 <input type = "text" name = "field1"> <br>
 <input type = "checkbox" name = "field2" value = "y" /> <br>
 <input type = "radio" name = "field3" value = "y" /> <br>
 <input type = "radio" name = "field3" value = "n" /> <br>
 <input type = "submit" value = "submit" /> <br>
 </ form> 

Let's make a small test case for verification ( Example ).

Thus, we have automated the development process. Description of the routes can be implemented in accordance with how you do it on the server side and transfer them to JS by simple copying.

As for the server side, this approach can touch her. We just need to implement a form object that will automatically substitute the value of the onSubmit attribute. For the Zend Framework, it may look like this. The most important thing is to override the Init () method.

 lass MYForm extends Zend_Form{ ... public function Init(){ parent::Init(); $this->setAttrib("onSubmit","return MVC.dispatch(this);"); } ... } 

That's all. We will create a form object from just what is described, an object.

In further development ("on the client") we will only describe handlers for routes. Everything else has been done.

What have you achieved?

1. The logical structure of the application. Both on server, and on client parts. And that, much important, the structure is the same.
2. All forms are immediately ready for AJAX'ification. It is only necessary to describe the handler. Reduced risk to forget to add a handler.
3. Handlers are associated with routes, so there will be no errors, as if the name of the function (which can be written incorrectly or forgotten) appeared onsubmit.

What else needs to be implemented?

1. default routes and handlers
2. error handlers
3. Bind to existing MVC

PS: tested in Firefox (3.0.6), Opera (9.62), IE (8.0.6001.18241 b2).
Thanks for attention. Waiting for critics.