Page 1 of 1

adding INPUT form fields by users

Posted: Sat Dec 13, 2003 2:04 pm
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.

Posted: Sat Dec 13, 2003 3:32 pm
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>

Posted: Sun Dec 14, 2003 7:46 am
by mis2o
thank you, but do you know any PHP only solution(without using javascript?)

Posted: Sun Dec 14, 2003 8:04 am
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>

Posted: Sun Dec 14, 2003 12:52 pm
by mis2o
thanx a lot, i haven't tried it yet, but it looks good.