Member Avatar for MDanz

i have a form that i'd like to duplicate on the press of a button?

echo "<form enctype='multipart/form-data' action='rapidinsert.php' method='post' name='changer'>
         <br /><br />
		  <font color='#D99C29' face='Arial' size='3px'>Add Noun </font><input type='text' name='noun' value='' size='30' />       <input type='submit'  value='Submit' style='font-size:10px' />
		  
		  
		  <input type='submit'  value='Add form' style='font-size:10px' />
		  
		  </form>";

How do i duplicate this form every time i press Add form button?

So it lists multiple forms.

  • 3 Contributors
  • 4 Replies
  • 97 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Stefano Mtangoo
Member Avatar for Stefano Mtangoo

Is this a PHP Question?
I would suggest you learn AJAX.
you can also do that with plain Javascript but I'm too lazy to do it manually while a lot of JS libraries are there.
JQuery is my choice.

Member Avatar for MDanz

i tried this but it's not working.

<?php
echo "<form enctype='multipart/form-data' action='rapidinsert.php' method='post' id='Add'>
<br /><br /><font color='#D99C29' face='Arial' size='3px'>Add Noun </font><input type='text' name='noun' value='' size='30' /><input type='submit'  value='Submit' style='font-size:10px' /><div onclick='Addform()'>Add Form</div></form>";
		
?>
<script type="text/javascript">
	function Addform(){
	var container = document.getElementById('Add');
var newfield = document.createElement('input');
newfield.type = 'text';
newfield.id = someCounter+'_suffix';
container.appendChild(newfield);

}
	</script>
Edited by MDanz because: n/a
Member Avatar for hielo

try:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$('input.addForm').live('click',function(){
				var f=$(this).closest('form').clone(true);
				$(f).insertAfter($(this).closest('form'));
				
			});
		});
		</script>
	</head>
	<body>
<?php
	echo "<form enctype='multipart/form-data' action='rapidinsert.php' method='post' name='changer'>
         <br /><br />
		  <font color='#D99C29' face='Arial' size='3px'>Add Noun </font><input type='text' name='noun' value='' size='30' />       <input type='submit'  value='Submit' style='font-size:10px' />
		  <input type='button' class="addForm" value='Add form' style='font-size:10px' />
		  </form>";
?>

	</body>
</html>
Member Avatar for Stefano Mtangoo

try:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$('input.addForm').live('click',function(){
				var f=$(this).closest('form').clone(true);
				$(f).insertAfter($(this).closest('form'));
				
			});
		});
		</script>
	</head>
	<body>
<?php
	echo "<form enctype='multipart/form-data' action='rapidinsert.php' method='post' name='changer'>
         <br /><br />
		  <font color='#D99C29' face='Arial' size='3px'>Add Noun </font><input type='text' name='noun' value='' size='30' />       <input type='submit'  value='Submit' style='font-size:10px' />
		  <input type='button' class="addForm" value='Add form' style='font-size:10px' />
		  </form>";
?>

	</body>
</html>

Hielo,
as I suggested, he/she should learn one of JS libraries as it will easy complex stuffs. I myself have found JQuery to meet all my needs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.