Page 1 of 1

Adding additional fields

Posted: Tue Oct 30, 2007 2:05 pm
by clang
Right now I have a form that takes in information. This form is set up to take 10 sets of the same information. If you fill in none, or some of the sets, it continues on. If you fill in all 10, it also continues on, but there is no option to enter in more than 10.
What I would like to have happen is the default sets you enter in be 1. Then if you need more you press an "Additional" button, or something, and it updates to give you another set that you can fill in.
The form will then be processed by a php script, which will need to know how many sets were created.

I'll attach the code for what I have already.

This is the processing script. Notice the use of $numberOfAdditionalRows to determine how many rows exist. This is just a static value right now.

Code: Select all

$numberOfAdditionalRows=10;
if($_SESSION['documentInfoSet'])
{
	if(isset($_POST['Enter']))
	{
		$documentInfo=$_SESSION['documentInfo'];
		$county=$documentInfo[1][0];
		$c=2;
		for($b=0;$b<$numberOfAdditionalRows;$b++)
		{
			$wasSet=FALSE;
			
			$_POST['documentNumber'.$b]=removeBlankSpaces($_POST['documentNumber'.$b]);
			
			if($_POST['documentNumber'.$b]!='')
			{
				if(validNumber($_POST['documentNumber'.$b]))
				{
					$documentInfo[$c][1]=$_POST['documentNumber'.$b];
					$wasSet=True;
				}
				else
				{
					$error='Invalid Entry. Please make sure to only use numbers for Document Number, Volume, and Page.';
				}
			}

			if($wasSet)
			{
				$documentInfo[$c][0]=$county;
				$c++;
			}	
		}
		if(!isset($error))
		{
			if(isset($_SESSION['documentInfoSet']))
			{
				unset($_SESSION['documentInfoSet']);
			}
			$_SESSION['documentInfoSet']=TRUE;
			$_SESSION['documentInfo']=$documentInfo;
			header("Location: ./Upload.php", true, 302 );
		}
	}
}
?>

This is the front end which displays the html form. $numberOfAdditionalRows is used again here.

Code: Select all

<form action="./Additional.php" method="post" name="form">
<table align="center" border="1">
<?php
	for($a=0;$a<$numberOfAdditionalRows;$a++)
	{
?>
<tr><th colspan="4"><?php echo ($a+1); echo ")";?></th></tr>
<tr>
<th> Document Number: </th>
<td> <input type="text" name="documentNumber<?php echo $a;?>"></td>
</tr>
<?php
	}
?>
<tr>
<td colspan="10" align="center">
<input type="submit" name="Enter" value="Enter" >
</td>
</tr>
</table>
</form>
I know php fairly well, but I'm not at all experienced with AJAX or JavaScript. All help is appreciated.

Posted: Wed Oct 31, 2007 8:36 pm
by califdon
I don't think your existing code will work. When you run your form script, $numberOfAdditionalRows will not have been set, to begin with. But that's not what you want to do anyway, is it? You want to have one set of inputs, then perhaps two buttons, one that says, in effect, Save this record and Enter Another One, and the other that says, Save this record and Quit. Is that right?

So design your form script with one set of inputs and two buttons. (Alternatively, I guess it could be done with a dropdown box with 2 values or 2 radio buttons.) Both buttons could call the same Javascript function, defined in the <head> section of the script, with a different paramater, depending on whether the user wanted to enter more records after the current one. If you wanted to do it with traditional (non-Ajax) methods, you could simply create an input with the type='hidden' that contains a flag for the processing script to pick up. Something like:

Code: Select all

. . .
<head>
   . . .
<script type="text/javascript">
<!--
function mysave( more ) {
   if (more==0) {
      document.getElementById('more').value = 0
      document.myform.submit( )
   } else if (more==1) {
      document.getElementById('more').value = 1
      document.myform.submit( )
   } else {
      alert ("Invalid value!")
   } 
}
//-->
</script>
</head>
<body>
. . .
   <form name="myform" method="post" action="dataentry.php">
   . . .  [all the rest of your inputs] . . .
   <input type="hidden" id="more" value="0" />
   <input type="button" value="Save and Exit" onClick="mysave(0);"> 
   <input type="button" value="Save and Enter Another" onClick="mysave(1);"> 
   </form>
So clicking one of the buttons will set the value of the hidden input, then submit the form to the processing script, which will look for the value in the POST data for the hidden 'more' input and use that to determine whether to return to the form html page for another record, or to another page which indicates that the data entry cycle is complete.

You could use Ajax, but there would be some more code and you would want to be careful that you give some positive response to the user to indicate that the previous record had been saved, rather than just emptying all the inputs and leave the user to wonder if the previous record was really saved.