javascript mvc and ajax form submitting

Question

I just started to investigate mvc on javascript client side ( JavaScript MVC ). Everything looked great until I got to form submitting :) View part won't do it, that's simple. Event is attached in Controller, so Controller is good place to validate form data, but I'm not sure I want my Controller to know specific server address (were to post my form), so would be great to have a method in Model, but then I don't want my Model to know about my Form (which is actually html structure...).

Well, what do I miss about MVC conception? I am also not sure I want to serialize my form in Controller and then pass it as parameter to my Model. For now, the only option I see to make Model independent is to have JavaScript structure (entity), which will be filled by controller (based on form data) and will be passed to the Model method to be saved on server. Very smplified code:

Info = {
    name,
    address,
    // 15 more properties
    ...
}

InfoController = {
    ...
    onFormSubmit: function() {
       ... 
       info.name = document.getElementById("info-name").value;
       info.adress = document.getElementById("info-address").value;
       ...
       InfoModel.save( info );
    }
}

InfoModel = {
    ...
    save: function( info ) {
        // here some code to setialize info object 
        // send it to server
        ...
    }
}

But it makes my code too complicated (comparing to simple form serizlization by some side frameworks and just sending it..). What's the right choice?

Answer 1

Just answering my own question. Short answer - yes, I was right with my assumptions ;) I took a look at JavaScriptMVC , and noticed one simple thing I missed, a simple function can be developed which will create javascript object based on form (they have function called formParams which performs this type of converting). This way my controller is simplified:

InfoController = {
    ...
    onFormSubmit: function() {
       ... 
       var info = $infoForm.formParams();
       InfoModel.save( info );
    }
}

Now it does not look that complicated, and its advantage is that there is one place (model) which knows how to save data (validation; url to send; some other stuff like add this entity to client side 'storage'; firing an event that something new is going to be created; whatever else according to our needs), and if I have one more place, or control flow to perform this operation again I won't write this code again, and it does not depend on presentation (is it form, or just set of inputs, wizard etc.). Also Model becomes quite reusable.

Actually before using this approach we had something similar, but it was not that structured (among different presentations for my application which can run javascript).