Need help with AJAX forms

Hi,

I’m very new to AJAX…help needed… I got this code from this site
http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html

<html>
	<head>		
		<script type="text/javascript" src="prototype.js"></script>
		<script>

			function sendRequest() {
				new Ajax.Request("test.php", 
					{ 
					method: 'post', 
					postBody: 'name='+ $F('name'),
					onComplete: showResponse 
					});
				}

			function showResponse(req){
				$('show').innerHTML= req.responseText;
			}
		</script>
	</head>

	<body>
		<form id="test" onsubmit="return false;">
			<input type="text" name="name" id="name" >
			<input type="submit" value="submit" onClick="sendRequest()">
		</form>
		
		<div id="show"></div>
	</body>

</html>

I need to make a form with 2 input fields… also i need to have 2 forms in one page… I tried this but dint work

<html>
	<head>		
		<script type="text/javascript" src="prototype.js"></script>
		<script>

			function sendRequest() {
				new Ajax.Request("test.php", 
					{ 
					method: 'post', 
					postBody: 'name='+ $F('name'),
					onComplete: showResponse 
					});
				}

			function showResponse(req){
				$('show').innerHTML= req.responseText;
			}
		</script>
<script>

			function sendRequest() {
				new Ajax.Request("test2.php", 
					{ 
					method: 'post', 
					postBody: 'name='+ $F('name'),
					onComplete: showResponse 
					});
				}

			function showResponse(req){
				$('show2').innerHTML= req.responseText;
			}
		</script>
	</head>

	<body>
		
		<form id="test" onsubmit="return false;">
			<input type="text" name="name" id="name" >
			<input type="submit" value="submit" onClick="sendRequest()">

		<div id="show"></div>
		</form>
<form id="test2" onsubmit="return false;">
			<input type="text" name="name" id="name" >
			<input type="submit" value="submit" onClick="sendRequest()">
		</form>

		
		<div id="show2"></div>
	</body>


</html>

Any help would be greatly appreciated,
:slight_smile:

This may not be perfect but should get you going. New items bolded.



<html>
	<head>		
		<script type="text/javascript" src="prototype.js"></script>
		<script>

			function sendRequest() {
				new Ajax.Request("test.php", 
					{ 
					method: 'post', 
				[B]postBody: 'name='+ $F('name')+'&second='+$F('second')[/B],
					onComplete: showResponse 
					});
				}

			function showResponse(req){
				$('show').innerHTML= req.responseText;
			}
		</script>
	</head>

	<body>
		<form id="test" onsubmit="return false;">
			<input type="text" name="name" id="name" >
                       [B]<input type="text" name="second" id="second" >[/B]
			<input type="submit" value="submit" onClick="sendRequest()">
		</form>
		
		<div id="show"></div>
	</body>

</html>


For the 2nd form just add 2 to all elements, variable ids, and javascript function names. You can’t have two functions with the same name nor page elements with the same id. or you can rename them entirely.

function sendRequest2()
name=“name2” id=“second2”
onClick=“sendRequest2()”