Need help with dynamic form elements

climberusa

Hi,
I have a form that has a lot of dynamically added form fields. I am working on the validation now and am stumped on how to validate the fields. On the client side, a user can add a groups of input fields as need. The names and id's of these input fields are added dynamically and would be name1, name,2 etc depending on how many they have added. So how do i go about grabbing those values on the server side to validate and display them to the user upon succesful completion of the form?
I've just begun trying to use a foreach lop but i've never done it before. I appreciate you time and help.

LazyJones

I would name the input fields like this:
<input name="field[]" type="... >
Then grab those values:
$fields = $_POST['field'];

$fields is now an array that you can go through with foreach, if you like

climberusa

How many form input fields can I use that for?

climberusa

Well, i think the problem with doing that is that when the user clicks the 'add' button, the form javascript creates several form fields for the user on the fly. if the user clicks 'add' again, he/she gets another set of the form fields with each input having the same names except one number higher. ex.

<div id="1">
<input type="text" name="name1" />
<input type="text" name="address1" />
</div>

etc.
and if they add more they would be

<div id="2">
<input type="text" name="name2" />
<input type="text" name="address2" />
</div>

So my question is when I submit the form to process.php how can I check all the form fields when I won't know how many the user has added and how can I display the info the user entered back to the user?

SargeZT

$formArr = $_POST[]
$nameArr = array();
foreach ($formArr as $key => $value) {
   if (strpos($value, "name") || strpos($value, "address")) {
      $nameArr[] = $value;
   }
}

Then, simply perform the validation checks using a foreach similar to the one posted above on the $nameArr array.

climberusa

Thanks for your quick reply! I'm new to this and I have a question about the code if you don't mind. I don't understand how the 4th line works relating to my variables being named "name1, address1, city1" etc. the javascript that dynamically generates these form fields adds the 1,2,3 etc to the end of the input name so the names are not the same. I have about 6 form fields per generated div so each of them needs to be accounted for. What it looks like to me is that I'd have to check for every possible variable name with this code,

 if (strpos($value, "name") || strpos($value, "address")) {

is that correct?
The url is here here

LazyJones

oh, please don't use just numbered variable names, it's so much easier with arrays 😐 just dynamicly create as much input fields as you like. (This is php-syntax way to deal with it

for ($i=1; $i<5; $i++) {
echo "$i:<br>";	
echo 'Name: <input name="name[]" type="text"><br>';
echo 'Address <input name="address[]" type="text"><br>';
echo 'City: <input name="city[]" type="text"><br><hr>';
}

catch the arrays and go through the values

$names = $_POST['name'];
$addresses = $_POST['address'];
$cities = $_POST['city'];
$size = count($names);
for($i=0;$i<$size; $i++) {
	echo ("$i : $names[$i] - $addresses[$i]  - $cities[$i]<br>");	
}

climberusa

well, I don't think I've explained myself very well and so apologize. On the client side the form is done fairly well. The main reason I'm stumped is because I've nver used loops and so don't know how to validate this form. What I was trying to explain is that I am dynamically creating form fields in div's. Each form field is named dynamically by this script.

function addFlights() {
  var ni = document.getElementById('flight');
  var numi = document.getElementById('flightValue');
  var num = (document.getElementById('flightValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'flight '+num+'';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = '<div class="add"><h3>Flight '+num+'</h3><div class="r"><label for="from'+num+'">Departure City: </label>
<input type="text" name="from[]" id="from'+num+'" size="10" maxlength="30"  /></div>
<div class="r"><label for="to'+num+'">Arrival City: </label><input type="text" name="to'+num+'" id="to'+num+'"  size="10" maxlength="30" /></div>
<div class="r"><label for="date'+num+'">Departure Date: </label><input type="text" name="date'+num+'" id="date'+num+'" size="10" maxlength="10"  /></div></div>';
  ni.appendChild(newdiv);
}

This script adds the extra form fields. When it does so each input's name is something like name="to'+num+'" which would be "name1" for the first set and "name2" for the second and so on. Am I making sense yet?

So back to the validation. How can I display the form results back to the user after I validate it? This is what I have to display the results to the user so far. What I'm trying to do display the results to the user after validating them but I don't know how to do that when the number of the dynamically added divs is unknown to me. In reality the user will never add more than 5, but I don't want to have to write the following code out 5 times just in case because there are 5 areas in the form like this.

      if(!$error){ //check the  for any errors that occured
	  echo '<div id="success"><h2 class="success">The  Form was submitted successfully!</h2>
<div class="row">
						<span class="label">Departure City:</span>
						<span class="form">'.stripslashes($from[$i]).'</span>
					</div>
					<div class="row">
						<span class="label">Arrival City:</span>
						<span class="form">'.stripslashes($to1).'</span>
					</div>
					<div class="row">
						<span class="label">Departure Date:</span>
						<span class="form">'.$date1.'</span>
					</div>
					<div class="row">
						<span class="label">Preferred Time:</span>
						<span class="form">'.$time1.'</span>
					</div>
} else {
      echo "<div id=\"error\"><h2 class=\"summary\">The following errors need to be fixed:</h2><ul> ";

LazyJones

Why won't you just change the input name="to'+num+'" -> name="to[]", just like the name="from[]" and use the arrays. Then you don't really have mind if they insert 5, 50 or 500 values

climberusa

ok, I did as you said and changed the names to name="name[]" and have this on the backend to validate, but it's not working quite yet.

 $from = stripslashes($_POST['from']); 
	  $to = stripslashes($_POST['to']); 
	  $date = stripslashes($_POST['date']); 
	  $time = stripslashes($_POST['time']); 
	  $cta_air = stripslashes($_POST['cta_air']); 
	  $cta_air_exp = stripslashes($_POST['cta_air_exp']); 
	  $size = count($from);
	  for($i=1;$i<5; $i++) {

  if( ($from[$i]) || ($to[$i]) || ($date[$i]) || ($time[$i]) || ($cta_air[$i]) || ($cta_air_exp[$i]) ){	
  $flights = "yes";
  if(eregi("^([[:alpha:]])+$", $from[$i])){	  
  $d=true;
  }else{
  $d=false;
  $message[]="<li class=\"error\"><a href=\"javascript:history.go(-1)\">Please enter the departure city for $flight</a></li>";
  }

Then to display the form data upon successful validation I have this:

<h3 class="flt">Flight 1</h3>
					<div class="row">
						<span class="label">Departure City:</span>
						<span class="form">'.stripslashes($from[$i]).'</span>
					</div>
					<div class="row">
						<span class="label">Arrival City:</span>
						<span class="form">'.stripslashes($to).'</span>
					</div>
					<div class="row">
						<span class="label">Departure Date:</span>
						<span class="form">'.$date.'</span>
					</div>
					<div class="row">
						<span class="label">Preferred Time:</span>
						<span class="form">'.$time.'</span>
					</div>
					<div class="row">
						<span class="label">One Card or Air CTA#:</span>
						<span class="form">'.$cta_air.'</span>
					</div>
					<div class="row">
						<span class="label">Expiration Date:</span>
						<span class="form">'.$cta_air_exp.'</span>
					</div>';

I'm not getting the values from the variables with this code yet, can you see what I'm missing? How can I do this so I don't have to write out the second bit of code above more than once?

LazyJones

In the latter code (after validation) are you sure you are printing those in a loop? With $i?

climberusa

No I'm not actually. Would I do that the same as above? would I use foreach?

LazyJones

use for because you are dealing with multiple arrays.

climberusa

so like this?

for($i=0;$i<$size; $i++) {
					echo '

				<h3 class="flt">'.$flight.'</h3>
				<div class="row">
					<span class="label">Departure City:</span>
					<span class="form">'.stripslashes($from[$i]).'</span>
				</div>
				<div class="row">
					<span class="label">Arrival City:</span>
					<span class="form">'.stripslashes($to[$i]).'</span>
				</div>

etc.

climberusa

well, clearly i don't know what i'm doing yet, but i am trying. with the code above, I'm getting "Array" as the result of $from[$i] instead of the city i entered. Why is that?

climberusa

ok, i'm making progress! I'm getting random (it seems) numbers and letters (just one) as the ouput for the form variables instead of what I entered into it. It's really weird. I've go no idea what is causing it. Has anyone seen this before??

LazyJones

It would indicate that your $from array contains arrays, go through your code and make sure you are not 'double signing' the arrays.

In form:
<input type='text' name='from[]'>

In php:
$from = $_POST['from'];

for($i;$i<count($from); $i++) {
echo $from[$i];
}

climberusa

I greatly appreciate all of your help. It's nice to be able to go somewhere when you're learning and stumped on something. I finally figured it out just before you posted. Thanks!!!