Geek asks and answers

Sending the form of the field 50 to several tables; regular post, ajax post or others?

Long-Term Stackoverflow Reader; first time, so hope you will be gentle :)

I have a form on a page consisting of 50 fields of various types (flags / text / decimal / date, etc.). Values ​​are pulled from about 8 tables through a single query like this:

SELECT * FROM p
LEFT JOIN pd on p.id=pd.id
LEFT JOIN pc on p.id=pc.id
LEFT JOIN pie on p.id=pie.id
etc.
WHERE p.id = xxx

I started the day thinking that I was just using a simple POST in the form, I would write a bunch of validation and update questions (overriding every existing value with what is in the form), and do it, but I'm asking for my judgment here.

In particular, it feels wrong, overriding the existing value if it hasn't changed, and I'm a little worried about what happens if the db update doesn't go halfway (thinking about handling this with transactions). I like it on smaller forms, but if the staff changed only 1 or 2 fields, it looks like a lot has been written for nothing. Then my next thought was to make it AJAX field-based. Changing any field transfers the change and saves it. Feels like this can make more sense, even if I would rather avoid js, if I could. The third option, of course, is to turn it into several forms with several submit buttons, say, one per tab (the form is already divided into tabs), and the drawback is when you reload the page more often,since she needs to send more (although here, too, of course, AJAX).

( , ...)?! , - , , - , ?

--- ---

SO, , , , , , . .

, barnyr, javascript , mysql ( jquery post). , , :

2,3 4 , , , , , , , submit, , , :) , , .

+5
4

UPDATE - . , , DOM , :

: http://jsfiddle.net/rLwca/5/ ​​:

    //Initial setup no longer needed. the DOM has the default states anyway...

//heres where we filter the elements for ones which have changed
$("#My50PageForm").submit(function(){        
    var elems = $("#My50PageForm :input").filter(function(value){
        var elem=$(this),
            type=this.tagName +"_"+(elem.attr("type")||""); // uniquely name the element tag and type

        switch (type){
            case "INPUT_radio": case "INPUT_checkbox":                    
                return elem.prop("checked")!=elem.prop("defaultChecked");
            case "INPUT_text": case "INPUT_textarea": case "INPUT_":                 
                return elem.val()!=elem.prop("defaultValue");
            case "SELECT_":
                var options=$(this).find('option'),
                    defaultValue=options.first().val(); //use the first element value as default in case no defaults are set
                options.each(function (i,o) {
                    defaultValue=this.defaultSelected?this.value:defaultValue;
                });
                return $(this).val()!=defaultValue;

            default:
                console.log("type "+type+" not handled");
                return false;
        }
     });

    if(elems.length){
        console.log(elems.serialize());
        return false;
        $.post("http://jsfiddle.net/example.cfm",
               elems.serialize());
    }else{
       alert("nothing changed");   
    }         

    return false;
});

:

:

http://jsfiddle.net/UhGQX/

$(document).ready(function(){
//Copy all form valued into a data attribute called 'original' when the page loads
$("#My50PageForm :input").each(function(elem){
    $(this).data("original",$(this).val());
});

//here where you check what has changed
$("#My50PageForm").submit(function(){        

    var elems = $("#My50PageForm :input").filter(function(value){
        var elem=$(this),
        original=elem.data("original");
        console.log(original);
        //check that original isn't 'undefined' and that it been changed
        return original && elem.val()!==original
    });
    if(elems.length){
        //post the data back to your server for processing
        $.post("http://jsfiddle.net/example.cfm",
               elems.serialize());
    }else{
     alert("nothing changed");   
    }         

    return false;
});
});

:

  • , jQuery
  • , , .
  • , .

, :

  • , , , .
+1

, , , . , , .

, , .

+2

, , - . , , .

, , / //. , , ( , , - )

+2

onChange onBlur . , , . . . . , , onChange .

I would also avoid storing data in the session area, as suggested by the side dish. We were burned by users who inadvertently changed their session variables by opening new browser tabs.

The approach I often do is to create a form field query object and use QofQ to decide if I need to update anything. Here is a simple example.

<cfscript>
RecordsToUpdate = QueryNew("a");
FormValues = QueryNew("id,name","integer,varchar");
Delim = Chr(30);
</cfscript>

<cfloop list="#form.fieldnames#" index="ThisElement">
<cfset ThisValue = form[ThisElement]>
<cfif left(ThisElement, 12) is "NewCategory_">
 not relevent here
<cfelse>
<cfscript>
ThisId = RemoveChars(ThisElement,1,17);
AddNewRow(FormValues,"id#Delim#name", "#ThisID##Delim##ThisValue#", Delim);
// AddNewRow is a udf
</cfscript>
</cfif>
</cfloop>

<cfquery name="RecordsToUpdate" dbtype="query">
select FormValues.*
from FormValues, GetCategories
where id = CategoryId
and name <> CategoryName
</cfquery>

<cfloop query="RecordsToUpdate">
update query
</cfloop>

By the way, using Chr (30) is what I learned from Adam Cameron right here in Stack Overflow.

+1
source

More articles:


All Articles