adding INPUT form fields by users

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
mis2o
Forum Newbie
Posts: 10
Joined: Sat Dec 13, 2003 2:04 pm

adding INPUT form fields by users

Post by mis2o »

hi,
i need to achieve that the user could ADD blank input form fields into a form in a way that the fields that he has already edited remain remembered and display themselves on the screen together with a new blank input field.

i was thinking about one way to solve it, but can't implement it. my idea was to use 2 submit buttons, one would submit the form to next page to handle it and the other would submit the page to itself(along with edited values) with a different parameter that would tell it to add one more blank input field. what i can't solve is to make the form submit the data to two different pages.
is it possible at all?

please give me any suggestions, not just concerning my idea.
thanx in advance, miso
ps: hope you understood what i was trying to say, i'm not a native english speaker.
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

as long as javascript is enabled and the browser supports domhtml you can do it with something like

Code: Select all

<html>
	<head>
		<title>dynamic form test</title>
		<script type="text/javascript">
			var numFields = 1;
			function addInputField(idOfParent, sName)
			&#123;
				objParent = document.getElementById(idOfParent);
				
				if (objParent!=null)
				&#123;
					newNode = document.createElement("input");
					newNode.type = "text";
					newNode.name= sName;
					
					newText = document.createTextNode("field #"+(++numFields));
					
					newDiv = document.createElement("div");
					newDiv.appendChild(newNode);
					newDiv.appendChild(newText);
					
					objParent.appendChild(newDiv);
				&#125;
			&#125;
		</script>
	</head>
	<body>
		<button onClick="addInputField('myFields', 'myInput&#1111;]');">add field</button>
		<form method="post" action="whatsoever.php" id="myForm">
			<p>
				<div id="myFields">
					<div>
						<input type="text" name="myInput&#1111;]" />field #1
					</div>
				</div>
			</p>
			<input type="submit" id="submitButton" />
		</form>
	</body>
</html>
mis2o
Forum Newbie
Posts: 10
Joined: Sat Dec 13, 2003 2:04 pm

Post by mis2o »

thank you, but do you know any PHP only solution(without using javascript?)
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

you cannot have two action-properties for one form (ok, javascript might change the property...)
But you can have two submit buttons with different values.
Only the value of the button pressed is submitted, so you can let the script perform different actions depending on this value, e.g.

Code: Select all

<html>
	<head>
		<title>server-side field-add
	</head>
	<body>
	<?php
	switch(@$_POST['mode'])
	{
	case 'process':
		// that's up to you
		break;
	case 'add field':
		$fields = array();
		if ( isset($_POST['lalala']) && is_array($_POST['lalala']) )
		{
			foreach($_POST['lalala'] as $field)
				$fields[] = $field;
			$fields[] = '';

		}
		break;
	default:
		$fields = array('');
	}
	?>
		<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
			<?php foreach($fields as $field) { ?>
				<input type="text>" name="lalala[]" value="<?php echo $field['value']; ?>" /><br />
			<?php } ?>
			<input type="submit" name="mode" value="add field"/>&nbsp;
			<input type="submit" name="mode" value="proceed"/>
		</form>
	</body>
</html>
mis2o
Forum Newbie
Posts: 10
Joined: Sat Dec 13, 2003 2:04 pm

Post by mis2o »

thanx a lot, i haven't tried it yet, but it looks good.
Post Reply