Recently, I delved into exploring MVC on the client side using JavaScript (JavaScript MVC). While everything seemed promising at first, I hit a roadblock when it came to form submissions. The View part couldn't handle it easily. The event is attached in the Controller, which makes it a suitable place for validating form data. However, I'm hesitant about letting my Controller know the specific server address for form submission. It would be ideal to have a method in the Model, but then I don't want the Model to be aware of the Form structure (which is essentially HTML).
I find myself questioning my understanding of the MVC concept. I'm also reluctant to serialize the form in the Controller and pass it as a parameter to the Model. As of now, the only solution that comes to mind to keep the Model independent is to create a JavaScript structure (entity) that the Controller fills based on form data and passes it to the Model method for saving on the server. Here's a simplified snippet of 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
...
}
}
However, this approach seems to complicate my code compared to simply serializing the form with some third-party frameworks and sending it. What would be the right choice in this scenario?