is this possible?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Deemo
Forum Contributor
Posts: 418
Joined: Sun Jan 18, 2004 11:48 am
Location: Washington DC

is this possible?

Post by Deemo »

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?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

very possible, I do this exact thing on several of my forms:

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 = &quote;none&quote;;
   show.style.display = &quote;inline&quote;;
}
</script>
<table>
<tr>
<td>
<span id=&quote;show1&quote; onClick=&quote;showIt('show1','hide1')&quote; style=&quote;cursor:hand&quote;>Some Text</span>
<span id=&quote;hide1&quote; style=&quote;display:none&quote;><input type=&quote;text&quote; name=&quote;yourtextfield&quote; value=&quote;Some Text&quote;></span>
</td>
</tr>
</table>
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.
Deemo
Forum Contributor
Posts: 418
Joined: Sun Jan 18, 2004 11:48 am
Location: Washington DC

Post by Deemo »

this works great! thanks alot. If its not too much trouble, could you please give me some more examples to make it more fluid?

one main thing im looking for is that when the box loses focus, it reverts back to just regular text with the updated text. is this possible?
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

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:

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>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

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.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

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.
Deemo
Forum Contributor
Posts: 418
Joined: Sun Jan 18, 2004 11:48 am
Location: Washington DC

Post by Deemo »

lmao yeah i looked at it and im like "yeah...um....ill pick that apart tomorrow..." :P

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
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

for the XMLHttp part, pick apart my previous post you must, or visit my XMLHttp tutorial 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&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&amtwork.net/viewtopic.php?t=34665]XMLHttp tutorial[/url] you should.

ok, shorter example I will provide:

Code: Select all

<html>
&lt;head&gt;
&lt;script&gt;
function swapIt(where,who,why){
  document.getElementById(where).style.display = "none";
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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 = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
how it works:
span1 o tutorial[/url] you should.

ok, shorter example I will provide:

Code: Select all

<html>
<head>
<script&gt;
function swapIt(where,who,why){
  document.getElementById(where).style.display = "none";
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/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 = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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&gt;
function swapIt(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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 = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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

&lt;html&gt;
&lt;head>
<script>
function swapIt(where,who,why){
  document.getElementById(where).style.display = "none";
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&ampprevious 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 = &quote;none&quote;;
  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 = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/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&gt;
&lt;/html&gt;
/*
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...r visit my XMLHttp tutorial you should.

ok, shorter example I will provide:

Code: Select all

&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
function swapIt(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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...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:

Code: Select all

<html>
<head&gt;
&lt;script&gt;
function swapIt(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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

&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
function swapIt(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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>
&lt;head&gt;
&lt;script&gt;
function swapIt(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  selit = document.getElementById(why);
  selit.select(0,selit.length);
}
function swapItBack(where,who,why){
  document.getElementById(where).style.display = &quote;none&quote;;
  document.getElementById(who).style.display = &quote;block&quote;;
  document.getElementById(who).innerHTML = why;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id=&quote;span1&quote; onClick=&quote;swapIt('span1','span2','text1')&quote; style=&quote;cursor:hand&quote;&gt;Some Text Here&lt;/span&gt;
&lt;span id=&quote;span2&quote; style=&quote;display:none&quote;&gt;&lt;input type=&quote;text&quote; name=&quote;text1&quote; id=&quote;text1&quote; value=&quote;Some Text Here&quote; onBlur=&quote;swapItBack('span2','span1',this.value)&quote;&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
/*
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 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...
Deemo
Forum Contributor
Posts: 418
Joined: Sun Jan 18, 2004 11:48 am
Location: Washington DC

Post by Deemo »

yes that is much easier to understand thanks a lot!

ill get reading about XMLHTTP, but since its not a necessary thing, i wont stress about it. A button works for my client ;)


thanks alot for the help burrito and pickle :)
Post Reply