PHP &amp; AJAX?

PHP & AJAX?

netfrugal

I'm sure it is ajax, but I will ask anyway.

I want to play around with having one web page up, but will have tabs that allow me to update a record in the database. Each tab has portions of 1 form.

If I click on tab 1, and start making changes - but then click on another tab - how can I make it so nothing was lost on the first tab? And then when I click the save button in the top, or bottom, all data will be saved.

Is this ajax? or dhtml?

And if so, are there any known tutorials on this particular function?

thanks!

bpat1434

To be brief:

It's a "one of two ways" approach.

1.) You use CSS to align the elements of the form into tabs, and javascript to "hide" and "show" the proper containing <div>.

2.) You use ajax to send smaller forms to the server and save them in a session rather than submit one huge form.

Obviously option 1 is easier to implement (as you don't have to worry about responses) and can be done quickly.

If I get a chance (and someone hasn't given an example) I'll post one later today.

sneakyimp

I would wager this will vary by browser. Doing a show or hide (setting the style.display to "none" or "block" or "inline" for certain page elements) may or may not preserve the contents of form inputs--data may be lost when you hide a form input. Also, form inputs with display:none might not be submitted to the server when you click 'submit'. I think I had this problem with Safari on a mac or something at one point.

If you find that hiding a form input loses data, you could consider using javascript to store values in hidden form inputs when you click tabs. when you return to that tab, it's simply a matter of repopulating your form from the hidden inputs.

bpat1434

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Multi-Tab Form</TITLE>
	<script type="text/javascript"><!--
		var prevObj = null;

	function $()
	{
		var elements = new Array();
		for (var i = 0; i < arguments.length; i++) {
			var element = arguments[i];
			if (typeof element == 'string')
				element = document.getElementById(element);
			if (arguments.length == 1)
				return element;
			elements.push(element);
		}
		return elements;
	}

	function showHide(elmID, obj)
	{
		var rt = $('root');
		var child = rt.childNodes;
		var elms = child.length;

		for(var i=0; i<elms; i++)
		{
			if(child[i].id)
			{
				if(child[i].id == elmID)
				{
					child[i].style.display='block';
					obj.className = 'tab current';
					if(prevObj != null)
					{
						prevObj.className = 'tab';
						prevObj = obj;
					}
				}
				else
				{
					child[i].style.display='none';
				}
			}
		}
	}
--></script>
<style type="text/css"><!--
	#wrapper { width: 98%; padding: 0; margin: 10px auto; }
	#root { width: 100%; padding: 0; margin: 0; float: left; }

	a.tab { text-decoration: none; font-weight: bold; font-variant: small-caps; background-color: #ccc; padding: 3px; float: left; margin: 10px 5px; }
	a.current { background-color: #abd; }

	#personal,
	#contact,
	#work { width: 100%; }
--></style>
 </HEAD>

 <BODY>
  <div id="wrapper">
	<form name="mutliForm" action="multi.php" method="post">
		<div id="root">
			<div style="width: 100%; float: left;">
				<a href="javascript:showHide('personal', this);" class="tab"><h3>Personal</h3></a>
				<a href="javascript:showHide('contact', this);" class="tab"><h3>Contact</h3></a>
				<a href="javascript:showHide('work', this);" class="tab"><h3>Work</h3></a>
			</div>

		<div id="personal" style="display: none;">
			<label for="iName">Name:</label> <input type="text" id="iName" name="name" /><br />
			<label for="iAge">Age:</label> <input type="text" id="iAge" name="age" /><br />
			<label for="iGender">gender:</label>
			<select name="gender"><option value="Female">Female</option><option value="Male">Male</option></select>
		</div>
		<div id="contact" style="display: none;">
			<label for="iAddress">Address:</label> <input type="text" id="iAddress" name="address" /><br />
			<label for="iAddress2">Address 2:</label> <input type="text" id="iAddress2" name="address2" /><br />
			<label for="iPhone">Phone Number:</label> <input type="text" id="iPhone" name="phone" />
		</div>

		<div id="work" style="display: none;">
			<label for="iCompany">Company:</label> <input type="text" id="iCompany" name="company" /><br />
			<label for="iCphone">Phone Number:</label> <input type="text" id="iCphone" name="compPhone" />
		</div>
	</div>
	<div style="width: 100%; float: left;">
		<input type="submit" name="submit" value="Submit" />
	</div>
</form>
  </div>
 </BODY>
</HTML>

Works for me on my server: http://www.bpatterson.net/multiForm.html

Try it out. A printout of all the submitted data is the resulting page, but it proves that you can use it 🙂

Working using FF 2.0.0.4 and IE 7