is this possible?
Moderator: General Moderators
is this possible?
my client requires a project that involves lots and lots of tables with editable fields (very much like excel. Is it possible to have text boxes that are invisible until clicked on? So you see a bunch of text in a cell, and when you click on it, it turns into a text box or something?
very possible, I do this exact thing on several of my forms:
you just need to show and hide elements on the page:
ex:
I just whipped that up but if you need a more thorough example, I'd be happy to dig one out that I've done in the past. I usually use XMLHttp to update my tables right on the fly in an onBlur event of my text fields so the whole experience is quite pleasant to the end user. Just let me know if you want more and I'll be happy to provide.
you just need to show and hide elements on the page:
ex:
Code: Select all
<script>
function showIt(where,what){
var hide = document.getElementById(where);
var show = document.getElementById(what);
hide.style.display = "e;none"e;;
show.style.display = "e;inline"e;;
}
</script>
<table>
<tr>
<td>
<span id="e;show1"e; onClick="e;showIt('show1','hide1')"e; style="e;cursor:hand"e;>Some Text</span>
<span id="e;hide1"e; style="e;display:none"e;><input type="e;text"e; name="e;yourtextfield"e; value="e;Some Text"e;></span>
</td>
</tr>
</table>sure no prob:
you'll have to pick through my code as this is a "live" example and modify it to suit your needs.
I wrote somethign a whiel back that will just grab the form field name swap it thereby removing the necessity to use the switch case in the example below, but I cant' find it and I'm too lazy to fix it for you here, but this will get you started:
you'll have to pick through my code as this is a "live" example and modify it to suit your needs.
I wrote somethign a whiel back that will just grab the form field name swap it thereby removing the necessity to use the switch case in the example below, but I cant' find it and I'm too lazy to fix it for you here, but this will get you started:
Code: Select all
<?
if(isset($_POST['fin'])){
$which = $_POST['fin'];
if($which == "date")
$bo = date("Y-m-d", strtotime($_POST[$which]));
else
$bo = mysql_real_escape_string($_POST[$which]);
$query = "update 21_lgdates set
".$which." = '".$bo ."',
lastmodified = now()
where id = ".$_POST['id'];
mysql_query($query)
or die(mysql_error());
if($which == "date")
echo "2";
else
echo "1";
exit;
}
?>
<script>
function modIt(where,who){
sel = true;
switch(where){
case "date":
mod = "d";
fna = "date"+who;
break;
case "city":
mod = "c";
fna = "eventcity"+who;
break;
case "county":
mod = "cou";
fna = "county"+who;
break;
case "state":
mod = "sta";
fna = "state"+who;
sel = false;
break;
case "location":
mod = "l";
fna = "eventlocation"+who;
break;
case "lg":
mod = "g";
fna = "lg"+who;
sel = false;
break;
case "sa":
mod = "s";
fna = "sa"+who;
sel = false;
break;
case "ec":
mod = "e";
fna = "ec"+who;
sel = false;
break;
case "rs":
mod = "r";
fna = "rsvps"+who;
break;
case "as":
mod = "a";
fna = "attendees"+who;
break;
case "gcus":
mod = "gcu";
fna = "appgcu"+who;
break;
case "nus":
mod = "nu";
fna = "appnu"+who;
break;
case "regs":
mod = "reg";
fna = "appreg"+who;
break;
}
document.getElementById(mod+who).style.display = "none";
document.getElementById(mod+"f"+who).style.display = "block";
if(sel){
fnasel = document.getElementsByName("MyForm")[0].elements(fna);
fnasel.select(0,fnasel.length);
}
}
if (window.XMLHttpRequest){
reqsend = new XMLHttpRequest();
}else{
reqsend = new ActiveXObject("Microsoft.XMLHTTP");
}
function sBack(where,who){
loc = false;
switch(where.name){
case "date"+who:
mod = "d";
fin = "date";
break;
case "eventcity"+who:
mod = "c";
fin = "eventcity";
break;
case "county"+who:
mod = "cou";
fin = "county";
break;
case "state"+who:
mod = "sta";
fin = "state";
break;
case "eventlocation"+who:
mod = "l";
loc = true;
fin = "eventlocation";
break;
case "lg"+who:
mod = "g";
fin = "lg";
break;
case "sa"+who:
mod = "s";
fin = "sa";
break;
case "ec"+who:
mod = "e";
fin = "ec";
break;
case "rsvps"+who:
mod = "r";
fin = "rsvps";
break;
case "attendees"+who:
mod = "a";
fin = "attendees";
break;
case "appgcu"+who:
mod = "gcu";
fin = "appgcu";
break;
case "appnu"+who:
mod = "nu";
fin = "appnu";
break;
case "appreg"+who:
mod = "reg";
fin = "appreg";
break;
}
ol = document.getElementById(mod+who);
nw = document.getElementById(mod+"f"+who);
if(!loc)
ol.innerHTML = where.value;
else{
newl = where.value.replace(/\r\n/g,"<br>");
ol.innerHTML = newl;
}
nw.style.display = "none";
ol.style.display = "inline";
// xmlhttp stuff below...burrito //
reqsend.open("POST", "day.php", true);
var stuff = "id=" + who + "&" + fin + "=" + where.value + "&fin=" + fin;
reqsend.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
reqsend.setRequestHeader("Content-Length",stuff.length);
reqsend.send(stuff);
reqsend.onreadystatechange = function(){
if (reqsend.readyState == 4 && reqsend.status == 200) {
if(reqsend.responseText == 2){
opener.location.reload();
location.reload();
}
// all is good
}
};
}
</script>
<table width="100%" class="parent">
<tr>
<td>Date of Event</td>
<td>City</td>
<td>County</td>
<td>State</td>
<td>Location</td>
<td>Lead Generator</td>
<td>Sales Associate</td>
<td>Enrollment Counselor</td>
<td align="center">RSVPs</td>
<td align="center">Attendees</td>
<td align="center">Apps</td>
<?if($_SESSION['admin'] == 1){?>
<td><input type="button" value="del" onClick="delSel()"></td>
<?} // end if for admin set...burrito ?>
</tr>
<?
$cla = TRUE;
$creby = "";
while($gtstuff = mysql_fetch_assoc($getstuff)){
$canmod = FALSE;
if($gtstuff['createdby'] == $_SESSION['loggedinid'] || $_SESSION['admin'] == 1)
$canmod = TRUE;
if($creby !== $gtstuff['createdby'])
$cla = !$cla;
$creby = $gtstuff['createdby'];
$getlg = mysql_query("select * from 21_lgusers where role = 'lg' order by username")
or die(mysql_error());
$getec = mysql_query("select * from 21_lgusers where role = 'ec' order by username")
or die(mysql_error());
$getsa = mysql_query("select * from 21_lgusers where role = 'sa' order by username")
or die(mysql_error());
?>
<tr class="<?=($cla ? "da" : "li");?>">
<td valign="top">
<span id="d<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('date','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>><?= date("l F d, Y",strtotime($gtstuff['date']));?>
</span>
<span id="df<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="date<?=$gtstuff['id'];?>" value="<?=date("m/d/Y",strtotime($gtstuff['date']));?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')">
</span>
</td>
<td valign="top">
<span id="c<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('city','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['eventcity'];?>
</span>
<span id="cf<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="eventcity<?=$gtstuff['id'];?>" value="<?=$gtstuff['eventcity'];?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')">
</span>
</td>
<td valign="top">
<span id="cou<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('county','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['county'];?>
</span>
<span id="couf<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="county<?=$gtstuff['id'];?>" value="<?=$gtstuff['county'];?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')">
</span>
</td>
<td valign="top">
<span id="sta<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('state','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['state'];?>
</span>
<span id="staf<?=$gtstuff['id'];?>" style="display:none">
<select name="state<?=$gtstuff['id'];?>" onChange="sBack(this,'<?=$gtstuff['id'];?>')">
<OPTION VALUE="" selected>Select A State</OPTION>
<OPTION VALUE="Alabama"<?if($gtstuff['state'] == "Alabama") echo " selected";?>>Alabama</OPTION>
<OPTION VALUE="Alaska"<?if($gtstuff['state'] == "Alaska") echo " selected";?>>Alaska</OPTION>
<OPTION VALUE="Arizona"<?if($gtstuff['state'] == "Arizona") echo " selected";?>>Arizona</OPTION>
<OPTION VALUE="Arkansas"<?if($gtstuff['state'] == "Arkansas") echo " selected";?>>Arkansas</OPTION>
<OPTION VALUE="California"<?if($gtstuff['state'] == "California") echo " selected";?>>California</OPTION>
<OPTION VALUE="Colorado"<?if($gtstuff['state'] == "Colorado") echo " selected";?>>Colorado</OPTION>
<OPTION VALUE="Connecticut"<?if($gtstuff['state'] == "Connecticut") echo " selected";?>>Connecticut</OPTION>
<OPTION VALUE="Delaware"<?if($gtstuff['state'] == "Delaware") echo " selected";?>>Delaware</OPTION>
<OPTION VALUE="Florida"<?if($gtstuff['state'] == "Florida") echo " selected";?>>Florida</OPTION>
<OPTION VALUE="Georgia"<?if($gtstuff['state'] == "Georgia") echo " selected";?>>Georgia</OPTION>
<OPTION VALUE="Hawaii"<?if($gtstuff['state'] == "Hawaii") echo " selected";?>>Hawaii</OPTION>
<OPTION VALUE="Idaho"<?if($gtstuff['state'] == "Idaho") echo " selected";?>>Idaho</OPTION>
<OPTION VALUE="Illinois"<?if($gtstuff['state'] == "Illinois") echo " selected";?>>Illinois</OPTION>
<OPTION VALUE="Indiana"<?if($gtstuff['state'] == "Indiana") echo " selected";?>>Indiana</OPTION>
<OPTION VALUE="Iowa"<?if($gtstuff['state'] == "Iowa") echo " selected";?>>Iowa</OPTION>
<OPTION VALUE="Kansas"<?if($gtstuff['state'] == "Kansas") echo " selected";?>>Kansas</OPTION>
<OPTION VALUE="Kentucky"<?if($gtstuff['state'] == "Kentucky") echo " selected";?>>Kentucky</OPTION>
<OPTION VALUE="Louisiana"<?if($gtstuff['state'] == "Louisiana") echo " selected";?>>Louisiana</OPTION>
<OPTION VALUE="Maine"<?if($gtstuff['state'] == "Maine") echo " selected";?>>Maine</OPTION>
<OPTION VALUE="Maryland"<?if($gtstuff['state'] == "Maryland") echo " selected";?>>Maryland</OPTION>
<OPTION VALUE="Massachusetts"<?if($gtstuff['state'] == "Massachusetts") echo " selected";?>>Massachusetts</OPTION>
<OPTION VALUE="Michigan"<?if($gtstuff['state'] == "Michigan") echo " selected";?>>Michigan</OPTION>
<OPTION VALUE="Minnesota"<?if($gtstuff['state'] == "Minnesota") echo " selected";?>>Minnesota</OPTION>
<OPTION VALUE="Mississippi"<?if($gtstuff['state'] == "Mississippi") echo " selected";?>>Mississippi</OPTION>
<OPTION VALUE="Missouri"<?if($gtstuff['state'] == "Missouri") echo " selected";?>>Missouri</OPTION>
<OPTION VALUE="Montana"<?if($gtstuff['state'] == "Montana") echo " selected";?>>Montana</OPTION>
<OPTION VALUE="Nebraska"<?if($gtstuff['state'] == "Nebraska") echo " selected";?>>Nebraska</OPTION>
<OPTION VALUE="Nevada"<?if($gtstuff['state'] == "Nevada") echo " selected";?>>Nevada</OPTION>
<OPTION VALUE="New Hampshire"<?if($gtstuff['state'] == "New Hampshire") echo " selected";?>>New Hampshire</OPTION>
<OPTION VALUE="New Jersey"<?if($gtstuff['state'] == "New Jersey") echo " selected";?>>New Jersey</OPTION>
<OPTION VALUE="New Mexico"<?if($gtstuff['state'] == "New Mexico") echo " selected";?>>New Mexico</OPTION>
<OPTION VALUE="New York"<?if($gtstuff['state'] == "New York") echo " selected";?>>New York</OPTION>
<OPTION VALUE="North Carolina"<?if($gtstuff['state'] == "North Carolina") echo " selected";?>>North Carolina</OPTION>
<OPTION VALUE="North Dakota"<?if($gtstuff['state'] == "North Dakota") echo " selected";?>>North Dakota</OPTION>
<OPTION VALUE="Ohio"<?if($gtstuff['state'] == "Ohio") echo " selected";?>>Ohio</OPTION>
<OPTION VALUE="Oklahoma"<?if($gtstuff['state'] == "Oklahoma") echo " selected";?>>Oklahoma</OPTION>
<OPTION VALUE="Oregon"<?if($gtstuff['state'] == "Oregon") echo " selected";?>>Oregon</OPTION>
<OPTION VALUE="Pennsylvania"<?if($gtstuff['state'] == "Pennsylvania") echo " selected";?>>Pennsylvania</OPTION>
<OPTION VALUE="Rhode Island"<?if($gtstuff['state'] == "Rhode Island") echo " selected";?>>Rhode Island</OPTION>
<OPTION VALUE="South Carolina"<?if($gtstuff['state'] == "South Carolina") echo " selected";?>>South Carolina</OPTION>
<OPTION VALUE="South Dakota"<?if($gtstuff['state'] == "South Dakota") echo " selected";?>>South Dakota</OPTION>
<OPTION VALUE="Tennessee"<?if($gtstuff['state'] == "Tennessee") echo " selected";?>>Tennessee</OPTION>
<OPTION VALUE="Texas"<?if($gtstuff['state'] == "Texas") echo " selected";?>>Texas</OPTION>
<OPTION VALUE="Utah"<?if($gtstuff['state'] == "Utah") echo " selected";?>>Utah</OPTION>
<OPTION VALUE="Vermont"<?if($gtstuff['state'] == "Vermont") echo " selected";?>>Vermont</OPTION>
<OPTION VALUE="Virginia"<?if($gtstuff['state'] == "Virginia") echo " selected";?>>Virginia</OPTION>
<OPTION VALUE="Washington"<?if($gtstuff['state'] == "Washington") echo " selected";?>>Washington</OPTION>
<OPTION VALUE="West Virginia"<?if($gtstuff['state'] == "West Virginia") echo " selected";?>>West Virginia</OPTION>
<OPTION VALUE="Wisconsin"<?if($gtstuff['state'] == "Wisconsin") echo " selected";?>>Wisconsin</OPTION>
<OPTION VALUE="Wyoming"<?if($gtstuff['state'] == "Wyoming") echo " selected";?>>Wyoming </OPTION>
</select>
</span>
</td>
<td align="center" valign="top">
<span id="l<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('location','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=nl2br($gtstuff['eventlocation']);?>
</span>
<span id="lf<?=$gtstuff['id'];?>" style="display:none">
<textarea name="eventlocation<?=$gtstuff['id'];?>" cols="30" rows="4" onBlur="sBack(this,'<?=$gtstuff['id'];?>')"><?=$gtstuff['eventlocation'];?></textarea>
</span>
</td>
<td valign="top">
<span id="g<?=$gtstuff['id'];?>" <?=($canmod && ($_SESSION['role'] !== "lg" || $_SESSION['role'] == "admin") ? "onClick=\"modIt('lg','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['lg'];?>
</span>
<span id="gf<?=$gtstuff['id'];?>" style="display:none">
<select name="lg<?=$gtstuff['id'];?>" onChange="sBack(this,'<?=$gtstuff['id'];?>')">
<?while($gtlg = mysql_fetch_assoc($getlg)){
echo "<option value=\"".$gtlg['username']."\" ".($gtlg['username'] == $gtstuff['lg'] ? "selected=\"selected\"" : "").">".$gtlg['username']."</option>";
} // end while for result set...burrito
?>
</select>
</span>
</td>
<td valign="top">
<span id="s<?=$gtstuff['id'];?>" <?=($canmod && ($_SESSION['role'] !== "sa" || $_SESSION['role'] == "admin") ? "onClick=\"modIt('sa','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['sa'];?>
</span>
<span id="sf<?=$gtstuff['id'];?>" style="display:none">
<select name="sa<?=$gtstuff['id'];?>" onChange="sBack(this,'<?=$gtstuff['id'];?>')">
<?while($gtsa = mysql_fetch_assoc($getsa)){
echo "<option value=\"".$gtsa['username']."\" ".($gtsa['username'] == $gtstuff['sa'] ? "selected=\"selected\"" : "").">".$gtsa['username']."</option>";
} // end while for result set...burrito
?>
</select>
</span>
</td>
<td valign="top">
<span id="e<?=$gtstuff['id'];?>" <?=($canmod && ($_SESSION['role'] !== "ec" || $_SESSION['role'] == "admin") ? "onClick=\"modIt('ec','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['ec'];?>
</span>
<span id="ef<?=$gtstuff['id'];?>" style="display:none">
<select name="ec<?=$gtstuff['id'];?>" onChange="sBack(this,'<?=$gtstuff['id'];?>')">
<?while($gtec = mysql_fetch_assoc($getec)){
echo "<option value=\"".$gtec['username']."\" ".($gtec['username'] == $gtstuff['ec'] ? "selected=\"selected\"" : "").">".$gtec['username']."</option>";
} // end while for result set...burrito
?>
</select>
</span>
</td>
<td align="center">
<span id="r<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('rs','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['rsvps'];?>
</span>
<span id="rf<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="rsvps<?=$gtstuff['id'];?>" value="<?=$gtstuff['rsvps'];?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')" size="3" style="text-align:right"></span>
</td>
<td align="center">
<span id="a<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('as','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?>>
<?=$gtstuff['attendees'];?>
</span>
<span id="af<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="attendees<?=$gtstuff['id'];?>" value="<?=$gtstuff['attendees'];?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')" size="3" style="text-align:right"></span>
</td>
<td align="center">
<span id="gcu<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('gcus','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?> class="gcu">
<?=$gtstuff['appgcu'];?>
</span>
<span id="gcuf<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="appgcu<?=$gtstuff['id'];?>" value="<?=$gtstuff['appgcu'];?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')" size="3" style="text-align:right"></span> |
<span id="nu<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('nus','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?> class="nu">
<?=$gtstuff['appnu'];?>
</span>
<span id="nuf<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="appnu<?=$gtstuff['id'];?>" value="<?=$gtstuff['appnu'];?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')" size="3" style="text-align:right"></span> |
<span id="reg<?=$gtstuff['id'];?>" <?=($canmod ? "onClick=\"modIt('regs','".$gtstuff['id']."')\" style=\"cursor:hand\"" : "");?> class="reg">
<?=$gtstuff['appreg'];?>
</span>
<span id="regf<?=$gtstuff['id'];?>" style="display:none">
<input type="text" name="appreg<?=$gtstuff['id'];?>" value="<?=$gtstuff['appreg'];?>" onBlur="sBack(this,'<?=$gtstuff['id'];?>')" size="3" style="text-align:right"></span>
</td>
<?if($_SESSION['admin'] == 1){?>
<td><input type="checkbox" name="delz[]" value="<?=$gtstuff['id'];?>"></td>
<?} // end if for admin set...burrito ?>
</tr>
<?} // end while for result set...burrito ?>
</form>
</table>Or you could just change the class of the text when onFocus and onBlur is called. When it's focused, change the class so the border shows up. When its blurred, change the class so the border disappears. Doing it this way, however, would mean the user would have to submit the form manually.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ok, maybe I smoked crack this morning if I really expected you to decipher all of that mumbo that I posted, sorry about that:
let me know if you want me to give you something that's a little easier to digest. I knwo all you asked for was the ability to replace the old text with what is typed in the textbox. Just use an onBlur event and innerHTML the value into the span.
like I said, if you want something (in smaller chunks), let me know and I'll whip it up.
let me know if you want me to give you something that's a little easier to digest. I knwo all you asked for was the ability to replace the old text with what is typed in the textbox. Just use an onBlur event and innerHTML the value into the span.
like I said, if you want something (in smaller chunks), let me know and I'll whip it up.
lmao yeah i looked at it and im like "yeah...um....ill pick that apart tomorrow..." 
if you could give a nice simple example with a brief explanation of how it works thatll be great
and what you were talking about earlier, with like the XMLHTTP that enables the server and page to communicate without like a submit button would be really helpful
thanks alot for the help
if you could give a nice simple example with a brief explanation of how it works thatll be great
and what you were talking about earlier, with like the XMLHTTP that enables the server and page to communicate without like a submit button would be really helpful
thanks alot for the help
for the XMLHttp part, pick apart my previous post you must, or visit my XMLHttp tutorial you should.
ok, shorter example I will provide:
much easier to understand taht should be...r visit my XMLHttp tutorial you should.
ok, shorter example I will provide:
much easier to understand taht should be...e,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="span1" onClick="swapIt('span1','span2','text1')" style="cursor:hand">Some Text Here</span>
<span id="span2" style="display:none"><input type="text" name="text1" id="text1" value="Some Text Here" onBlur="swapItBack('span2','span1',this.value)"></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses the textbox, then uses innerHTML to update the new value of the span.
*/
much easier to understand taht shoushould.
ok, shorter example I will provide:
much easier to u
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="span1" onClick="swapIt('span1','span2','text1')" style="cursor:hand">Some Text Here</span>
<span id="span2" style="display:none"><input type="text" name="text1" id="text1" value="Some Text Here" onBlur="swapItBack('span2','span1',this.value)"></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses the textbox, then uses innerHTML to update the new value of the span.
*/
much easier to understand taht should be...
ok, shorter example I will provide:
Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
&amtwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses ipt>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 o tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></spust, or visit my [url=http://forums.devnetwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on rt, pick apart my previous post you must, or visit my [url=http://forums.devnetwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the srt, pick apart my previous post you must, or visit my [url=http://forums.devnetwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbwtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="span1" onClick="swapIt('span1','span2','text1')" style="cursor:hand">Some Text Here</span>
<span id="span2" style="display:none"><input type="text" name="text1" id="text1" value="Some Text Here" onBlur="swapItBack('span2','span1',this.value)"></span>
</body>
&amtutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;>&previous post you must, or visit my [url=http://forums.devnetwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</bment.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="span1" onClick="swapIt('span1','span2','text1')" style="cursor:hand">Some Text Here</span>
<span id="span2" style="display:none"><input type="text" name="text1" id="text1" value="Some Text Here" onBlur="swapItBack('span2','span1',this.value)"></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses the textbox, then uses innerHTML to update the new value of the span.
*/ok, shorter example I will provide:
Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses the textbox, then uses innerHTML to update the new value of the span.
*/document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="span1" onClick="swapIt('span1','span2','text1')" style="cursor:hand">Some Text Here</span>
<span id="span2" style="display:none"><input type="text" name="text1" id="text1" value="Some Text Here" onBlur="swapItBack('span2','span1',this.value)"></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses the textbox, then uses innerHTML to update the new value of the span.
*/
much easier to understand taht shoushould.
ok, shorter example I will provide:
Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swa/forums.devnetwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encrt, pick apart my previous post you must, or visit my [url=http://forums.devnetwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="span1" onClick="swapIt('span1','span2','text1')" style="cursor:hand">Some Text Here</span>
<span id="span2" style="display:none"><input type="text" name="text1" id="text1" value="Some Text Here" onBlurl=http://forums.devnetwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.
ok, shorter example I will provide:Code: Select all
<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "e;none"e;;
document.getElementById(who).style.display = "e;block"e;;
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="e;span1"e; onClick="e;swapIt('span1','span2','text1')"e; style="e;cursor:hand"e;>Some Text Here</span>
<span id="e;span2"e; style="e;display:none"e;><input type="e;text"e; name="e;text1"e; id="e;text1"e; value="e;Some Text Here"e; onBlur="e;swapItBack('span2','span1',this.value)"e;></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses the textbox, then uses innerHTML to update the new value of the span.
*/<html>
<head>
<script>
function swapIt(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
selit = document.getElementById(why);
selit.select(0,selit.length);
}
function swapItBack(where,who,why){
document.getElementById(where).style.display = "none";
document.getElementById(who).style.display = "block";
document.getElementById(who).innerHTML = why;
}
</script>
</head>
<body>
<span id="span1" onClick="swapIt('span1','span2','text1')" style="cursor:hand">Some Text Here</span>
<span id="span2" style="display:none"><input type="text" name="text1" id="text1" value="Some Text Here" onBlur="swapItBack('span2','span1',this.value)"></span>
</body>
</html>
/*
how it works:
span1 on click swaps the visibility between the span and the textbox
selit selects all the text in the textbox
onBlur of textbox swaps visibility back to span1 and hides span2 which encompasses the textbox, then uses innerHTML to update the new value of the span.
*/
much easier to understand taht should be...