Al llarg dels últims posts de desenvolupament web, de la part client, m'he anat referint a l'estat del formulari. És hora d'aclarir que és. El formulari, tal com està plantejat pot estar en dos estats. El primer és l'estat "actualitzar" ("update"), on el formulari té carregades dades, s'editen i un cop s'acaba amb el botó "Guardar" s'envien a la part servidora (al ASHX corresponent) per guardar-les. Al guardar les dades seguim en aquest estat.

L'altra estat és el "insertar" on el formulari està buit (sense dades), s'omple i s'envien al ASHX per guardar-les. En aquesta operació es recupera del ASHX la clau primària generada per en futures edicions fer actualitzacions ja que el formulari passa a l'estat "actualitzar".

Quan des de l'estat "actualitzar" es fa una eliminació, el formulari es neteja i passa a l'estat "insertar".

El botó "Nou" (per crear un nou registre) també posa al formulari en l'estat "insertar".

Cada un d'aquests estats té una funció Javascript que posa els controls del formulari com els correspon. Veiem uns exemples, mode insert:

function ClassificacioInsert() {
    //Neteja del formulari
    $('#frmDetall').validate().resetForm();
    $('#frmDetall :input')
	.not(':button, :submit, :reset, :checkbox')
	.val('')
	.removeAttr('selected');
    $("#frmDetall :checkbox").removeAttr('checked');

    //Reasignació del boto Guardar, amb action INSERT
    $("#frmDetall #btnSave").unbind('click');
    $("#frmDetall #btnSave").click(function () 
        { SubmitFrm('#frmDetall', 'classificacions.ashx?action=insert', true, ClassificacioPostInsert);
    });

    //El boto Eliminar desapareix en un alta nova
    $("#frmDetall #btnDelete").hide();

    //Exemple de valor per defecte d'un control
    var Avui = new Date();
    $("#frmDetall #DataAlta").val(Avui.getDate() + "/" + (Avui.getMonth() + 1) + "/" + Avui.getFullYear());

    //Altres botons es deshabiliten
    $("#frmDetall #btnDeleteEspecifica").attr('disabled', '');
    $("#frmDetall #btnAfegirEspecifica").attr('disabled', '');
    $("#frmDetall #autoEspecifica").attr('disabled', '');
    $("#frmDetall #autoEspecifica_TC").attr('disabled', '');

    $("#frmDetall #btnDeleteTAAD").attr('disabled', '');
    $("#frmDetall #btnAfegirTAAD").attr('disabled', '');
    $("#frmDetall #afegirTAAD").attr('disabled', '');

    $('#PK_TAAD').val('');
    $('#afegirTAAD').html('');

    //Es neteja la clau primària, quan es guardi el registre
    //ja es posara el valor correcte
    $('#PK_Classificacio').val('');
    evPK_Classificacio = "";	
}

Posar en mode "actualitzar" pot tenir una funció com aquesta:

function ClassificacioUpdate(pID) {
    //Es netegen validacions pendents
    $('#frmDetall').validate().resetForm();

    //Si arriba la PK informada es posa a la variable
    if (pID !== undefined) $("#frmDetall #PK_Classificacio").val(pID);

    //S'activen alguns controls (això depen de la lògica de negoci)
    $("#frmDetall #btnDeleteEspecifica").removeAttr('disabled');
    $("#frmDetall #btnAfegirEspecifica").removeAttr('disabled');
    $("#frmDetall #autoEspecifica").removeAttr('disabled');
    $("#frmDetall #autoEspecifica_TC").removeAttr('disabled');

    //Es mostra el botó d'Eliminar
    $("#frmDetall #btnDelete").show();

    //Es posa el guardar en "update"
    $("#frmDetall #btnSave").unbind('click');
    $("#frmDetall #btnSave").click(function() { 
       SubmitFrm('#frmDetall', 'classificacions.ashx?action=update', true, ClassificacioPostUpdate);
    });
}