Client side "Edit Profile" before submitting multiple values at once...

[wpearsall]

OK,

The basic gist is, im enhancing an old project, and have created the necessary code to actually implement a "Add one" feature.. but to limit "lag" etc, i want to process the "add" feature on the client side... to collate the information, then use ONE post submission of a Json string to actually save the information...

So I was thinking of an "Add Another" text link... which will then write into the html of a div another set of form elements...

<form action='post.php' method='post' onsubmit='validate(this); return false;'>
Item 1: <input type="text" name="item1" />
Item 1: <input type="text" name="item2" />
Item 1: <input type="text" name="item3" />
Item 1: <input type="text" name="item4" />
<input type="submit" value="add item">
</form>

So, what I plan to do is then when add item is clicked (the form attempts to submit)...
this will call validate(form name).

1) if "jsonelement" is not created... i wish to create it, and store it in the browsers window...
2) i then want to set the following:
jsonelement.count = +1
jsonelement.item1 - 4 [jsonelement.count] = form.item1 - 4.value
(this process can go on for "unlimited" times... (therefore reducing pageload times, server bandwidth etc...)
3) i will write into "items" div the information stored...
4) if the jsonelement is being created, i will also insert a "information not saved <input type="button" value="save data" onclick="savedata()">" html into a div.

5) if the information has not been saved, i want to prompt the user before they leave the page (and potentially loose data).

6) when they click save data th json element is submitted to the php script, which will return a json value of { "error":1, "message":"the error was that...." } if
there was an error...
7) if the error was not there (error:0) then destroy the jsonelement... and remove the html in the divs and remove the page exit warning....


[ok, hopefully this was an understandable description of my aim...]

So the only issues i have are with the 1, 2, 5, 7

i have the following code, that i use for my "global" cookie warning technique..:

if(undefined === window.cookieName){ cookieName = "jsCookie"; }
if(undefined === window.cookieDomain){ cookieDomain = window.location.hostname; }

so im guessing i could use something like:

function validate(formname){
if (formname.item1.value != "valid input") { alert("invalid input"; return false; }
.......*etc*...

if(undefined === window.jsonelement){ 
jsonelement = {}; 
jsonelement.count = 0;
// write html into "not saved" div
}

jsonelement.count = jsonelement.count+1;
jsonelement.newitems[jsonelement.count].item1 = formname.item1.value;
jsonelement.newitems[jsonelement.count].item2 = formname.item2.value;
jsonelement.newitems[jsonelement.count].item3 = formname.item3.value;
jsonelement.newitems[jsonelement.count].item4 = formname.item4.value;

// write html code into items div based on input...
	var cw = document.getElementById("itemsdiv");
	cw.innerHTML = cw.innerhtml + " <a href='meh'.....";

}

is this actually the approach to create the json string an elements?

when i post it to the php script, i plan to use php's json decode to get it into an array to access it like:

$arrJson = json_decode($_POST["jsonelement"]);
if(!empty($arrJson["count"])){
//for 1 to count...
$item1 = $arrJson["newitems"][$i]["item1"];
$item2 = $arrJson["newitems"][$i]["item2"];
.....
// do stuff with this data.... validate it (again) server side...
$error = ($iserror ? "1" : "0");
if($error = 1) $errormsg = "this is why....";
}

// json header
echo "{ \"error\":".$error.($error == 1 ? ", \"errormsg\":\"".$errormsg."\"" : "")."}" 

i have experience processing the json return etc... ive never create jscript to print the json though...

anychance somebody could validate my approach (hopefully my explaination is clear?)