Client side "Edit Profile" before submitting multiple values at once...
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...
Code:
<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..:
Code:
if(undefined === window.cookieName){ cookieName = "jsCookie"; }
if(undefined === window.cookieDomain){ cookieDomain = window.location.hostname; }
so im guessing i could use something like:
Code:
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:
PHP Code:
$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?)
Re: Client side "Edit Profile" before submitting multiple values at once...
OK, sorry, it was early when i posted the message above (and it had been an allnighter).
my code so far is:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
<!--
function AddItem(){
document.getElementById("additemDiv").innerHTML = " " +
"<fieldset id='additemform'>" +
"<div>item1: <input type='text' name='input1' id='input1' /><br />" +
"item2: <input type='text' name='input2' id='input2' /><br />" +
"item3: <input type='text' name='input3' id='input3' /><br />" +
"item4: <input type='text' name='input4' id='input4' /><br />" +
" <input type='button' onclick='InsertItem(); return false;' value='Store Value' /></div></fieldset>";
}
function InsertItem(){
alert("Insert item");
if(undefined === window.jsonelement){
window.jsonelement = {};
window.jsonelement.count = 0;
// write html into "not saved" div
}
alert("Insert item2");
var je = window.jsonelement;
je.count++;
var jeItem = je.newitems[je.count];
jeItem.item1 = document.getElementById("input1").value;
jeItem.item2 = document.getElementById("input2").value;
jeItem.item3 = document.getElementById("input3").value;
jeItem.item4 = document.getElementById("input4").value;
alert("Insert item 3");
var itemsDiv = document.getElementById("items");
itemsDiv.innerHTML = itemsDiv.innerHTML + " <div class='item' id='newitem"+je.count+"'>"
+"<a href='"+jeItem.item3+"'>"
+"<img src='"+jeItem.item1+"' alt='"
+jeItem.item2+"' /></a><br />"
+jeItem.item4+"</div>";
alert("Insert item 4");
document.getElementById("additemDiv").innerHTML = " " +
"<a href='additem.php?op=form' onclick='AddItem(); return false;' title='add another item'>Add Item</a>";
alert("Insert item 5");
}
-->
</script>
<body>
<div id="notsaved"></div>
<h1>this is a test of adding items on the fly</h1>
<div id="items">
<div class="item"><a href="input 3"><img src="input 1" alt="input 2" /></a><br />input 4</div>
</div>
<div id="additemDiv"><a href="additem.php?op=form" onclick="AddItem(); return false;" title="add another item">Add Item</a></div>
</body>
</html>
the "Add Item" link works, and the form shows (as i expected - this part of the code isnt an issue for me)...
On the log, i get the following message:
Code:
SCRIPT5007: Unable to get value of the property '1': object is null or undefined
Untitled-2.html, line 33 character 1
this points to:
Code:
je.newitems[je.count]
obviously je.count is being set correctly, (it says 1 etc), how do i create the array of items... or should i just "item"+je.count
Re: Client side "Edit Profile" before submitting multiple values at once...
Right, think ive got it now....
it APPEARS to work with the following... (alerts show from 1-5), and then the "image" shows...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
<!--
function AddItem(){
document.getElementById("additemDiv").innerHTML = " " +
"<fieldset id='additemform'>" +
"<div>item1: <input type='text' name='input1' id='input1' /><br />" +
"item2: <input type='text' name='input2' id='input2' /><br />" +
"item3: <input type='text' name='input3' id='input3' /><br />" +
"item4: <input type='text' name='input4' id='input4' /><br />" +
" <input type='button' onclick='InsertItem(); return false;' value='Store Value' /></div></fieldset>";
}
function InsertItem(){
alert("Insert item");
if(undefined === window.jsonelement){
window.jsonelement = { "count":0, "newitems":[]};
// write html into "not saved" div
}
alert("Insert item2");
var je = window.jsonelement;
je.newitems.push({
"item1" : document.getElementById("input1").value,
"item2" : document.getElementById("input2").value,
"item3" : document.getElementById("input3").value ,
"item4" : document.getElementById("input4").value
});
alert("Insert item 3");
var jeItem = je.newitems[je.count];
je.count++;
var itemsDiv = document.getElementById("items");
itemsDiv.innerHTML = itemsDiv.innerHTML + " <div class='item' id='newitem"+je.count+"'>"
+"<a href='"+jeItem.item3+"'>"
+"<img src='"+jeItem.item1+"' alt='"
+jeItem.item2+"' /></a><br />"
+jeItem.item4+"</div>";
alert("Insert item 4");
document.getElementById("additemDiv").innerHTML = " " +
"<a href='additem.php?op=form' onclick='AddItem(); return false;' title='add another item'>Add Item</a>";
alert("Insert item 5");
}
-->
</script>
<body>
<div id="notsaved"></div>
<h1>this is a test of adding items on the fly</h1>
<div id="items">
<div class="item"><a href="input 3"><img src="input 1" alt="input 2" /></a><br />input 4</div>
</div>
<div id="additemDiv"><a href="additem.php?op=form" onclick="AddItem(); return false;" title="add another item">Add Item</a></div>
</body>
</html>
