how to make a sequence of forms

rrzavaleta

Hi, I 'm trying to make a sequence of forms.
The idea is this , click on "new " and then fill out the form click save (saving what was done in the first form ) , automatic Open in another form, after filling the form click on "Save" (keeping what was done in the first form ) and finally make this process a third time.

I am using the following:

 $(document).ready(function() {
 editor = new $.fn.dataTable.Editor( {
    ajax:"include/implentacion_aseguradora.php",
    table: "#ing_campoinferior",
    fields: [ 
    {label: "ID_ASEGURADORA:",name: "ING_ASEGURADORA.ID_ASEGURADORA"  },
    {label: "ID PERSONA:",name: "ING_ASEGURADORA.ID_PERSONA" },
    {label: "DOMINIO editora:",name: "ING_ASEGURADORA.NOM_DOMINIO"},
                ],
    i18n: { create: { title:  "CATALOGO ASEGURADORA", submit: "Guardar"} }                                                  
                                            } ); //fin edito=new $.fn.dataTable.Editor
        
editory = new $.fn.dataTable.Editor( {
ajax: "include/implentacion_seccioness.php",
table: "#ing_campoinferior",
fields: [ {
            label: "ID_secciones:",
            name:  "secciones"
        } ]
    } );
                        
editora = new $.fn.dataTable.Editor( {
    table: "#ing_campoinferior",
    ajax:"include/implentacion_banco.php",
    fields: [ {
            label: "IDBANCO",
            name: "ID_BANCO",
             "type": "hidden",  
        }, 
        {
        label: "NOMBRE DEL BANCO ",
        name: "NOM_BANCO",
        }, 
        {
        label: "SITUACION DEL BANCO:",
        name: "SIT_BANCO",
        type: "select",
        ipOpts:[
            {label:"ACTIVO", value:"ACT"},
            {label:"INACTIVO", value:"INA"}
            ]
        },
        ],
        i18n: { create: {                                                               title:  "Agregar nuevo banco",                                                              submit: "Guardar"
                    }
                      }                                                 
                                            } );

I'm trying follows , I keep the first form , but I can not fill the second form ( I can see the second form for a second while closing the first form)

tableTools: {
    sRowSelect: "os",
    aButtons: [{
        sExtends: "editor_create",
        editor: editora,
        sButtonText: "Nuevo",
        formButtons: [{
                label: "siguinete",
                fn: function(e) {
                    this.submit(function() {
                        salaryEditor.edit(1, 'EDICION CATALOGO ASEGURADORA', [{
                            "label": "NEXT",
                            "fn": function() {
                                this.submit();
                            }
                        }])
                    }, null, null, true);
                }
            },
            {
                label: "BACK",
                fn: function(e) {
                    this.submit(function() {}, null, null, false);
                }
            }
        ]
    }, ]
},

hope you can help me solve this, because what I need .

allan

Can you link to the page in question please?

but I can not fill the second form

I don't understand what you mean here - do you mean the values of the form aren't filled in? Why are you passing 1 as the first parameter to edit(). That parameter is used to indicate which row is to be edited - they way you have it, row index 1 will always be the one that is edited.

Allan

rrzavaleta

Hello , allan . Thanks for responding.

As I said before , I need to proceed fill a three forms in sequence.
Forms are meeting their validations from their fields of php.

Also you had commented that he could fill the first and when you click Next was kept the first and for a second I could see the second form. (and web comprove that this is not true )

I give you the link so you can help me with this .

http://alyssaconsultores.com/2/frames2/src/VYR/vyr_aseguradora.php

I commented that the burden of the table has nothing to do with the sequence of the form.

I hope it's enough and if you need anything else, you can warn hereby

allan

I think when we discussed this before, I suggested that you use show() and hide()? You would show fields 1-5 on the first "page", 6-10 on the second and 11-15 on the third (or whatever specific fields you actually want).

You would not submit the form for each page - that would make an Ajax request, which by the sounds of things you do not want.

Allan

rrzavaleta

hi allan I ask an apology the link you sent is wrong . I see you answered me and I thank you

I'm working with the examples of editor data to achieve the sequence of forms.

actualemente I have this.

I could not make the call the second form (secondform ) at the time of the click .
I hope your answer

I 've reviewed has to do something with the sButtonClass : " editor_create " . but I'm not sure I hope your answer

var editor; 

$(document).ready(function() {
 var secondform = new $.fn.dataTable.Editor( {
        ajax: "../php/todo.php",
        
        fields: [ {
                label: "Item:",
                name:  "item"
            }, {
                label: "Status:",
                name:  "done",
                type:  "radio",
                ipOpts: [
                    { label: "To do", value: 0 },
                    { label: "Done",  value: 1 }
                ],
                "default": 0
            }, {
                label: "Priority:",
                name:  "priority",
                type:  "select",
                ipOpts: [
                    { label: "1 (highest)", value: "1" },
                    { label: "2",           value: "2" },
                    { label: "3",           value: "3" },
                    { label: "4",           value: "4" },
                    { label: "5 (lowest)",  value: "5" }
                ]
            }
        ]
    } );
    
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "date"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );

 oTable = $('#example').DataTable(  {
        
        dom: "Tfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position",
                "visible": false,
                "searchable": false },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        
            
                        
        tableTools: {
            sRowSelect: "os",
              aButtons: [
              { sExtends: "editor_remove", editor: editor,  sButtonClass: "editor_remove", },
             { sExtends: "editor_create", editor: editor,  sButtonText: "Nuevo",  sButtonClass: "editor_create",
                        

"formButtons": [                   
                     
                      {
                        "label": "Create and next form",
                        "sButtonText": "Create and next form",
                       
                        "fn": function (e) {
                          this.submit( function () {
                            $('a.editor_create').click();
                          }, null, null, false );
                        }
                      }
                    ]

        },]
                   }
        
    
    } );
    
} );

allan

Here is a complete example that is a modification of my basic demo for Editor.

There are only two pages in this example, but it would be trivial to extend it to three. The "interesting" code in this case are the firstPage and secondPage methods and the event handler for initCreate and initEdit. You can even run that part of the code on the example page linked to above if you want to see it in action.

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "date"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );

    $('#example').DataTable( {
        dom: "Tfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        tableTools: {
            sRowSelect: "os",
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
    } );

    editor.on( 'initCreate initEdit', function () {
        firstPage( editor )
    } );
} );

function firstPage ( editor ) {
    editor.show( [ 'first_name', 'last_name', 'position' ] );
    editor.hide( [ 'office', 'extn', 'start_date', 'salary' ] );

    editor.buttons( {
        label: 'Next',
        fn: function () {
            secondPage( editor );
        }
    } );
}

function secondPage ( editor ) {
    editor.hide( [ 'first_name', 'last_name', 'position' ] );
    editor.show( [ 'office', 'extn', 'start_date', 'salary' ] );

    editor.buttons( [
        {
            label: 'Previous',
            fn: function () {
                firstPage( editor );
            }
        },
        {
            label: 'Save',
            fn: function () {
                editor.submit();
            }
        }
    ] );
}

Allan