Need help with adding fields to a form using add another button....

[Sparrz]

I have a form done up with ajax that I need to have a certain field have options to add additonal clones of the field added using an "Add another" button...

 

Here is the full form...

<form action='' method='post' class='assessment'>
<h1>Create User</h1>
<div class='label'>First Name</div>
<div class='field'><input type='text' name='firstname' value='<?=$preUser->firstname?>' /></div>
<div class='cb'></div>
<div class='label'>Last Name</div>
<div class='field'><input type='text' name='lastname'  value='<?=$preUser->lastname?>' /></div>
<div class='cb'></div>
<div class='label'>Password</div>
<div class='field'><input type='text' name='password'  value='<?=$preUser->password?>' /></div>
<div class='cb'></div>
<div class='label'>Company</div>
<div class='field'><input type='text' name='company'  value='<?=$preUser->company?>' /></div>
<div class='cb'></div>
<div class='label'>Job Title</div>
<div class='field'><input type='text' name='job'  value='<?=$preUser->job?>' /></div>
<div class='cb'></div>
<div class='label'>Group Name</div>
<div class='field'><select name='group'><?=$groupSelect?></select></div>
<div class='cb'></div>
<div class='label'>Address</div>
<div class='field'><input type='text' name='street1'  value='<?=$preUser->street1?>' /></div>
<div class='cb'></div>
<div class='label'>Address (optional)</div>
<div class='field'><input type='text' name='street2'  value='<?=$preUser->street2?>' /></div>
<div class='cb'></div>
<div class='label'>City</div>
<div class='field'><input type='text' name='city'  value='<?=$preUser->city?>' /></div>
<div class='cb'></div>
<div class='label'>State</div>
<div class='field'><input type='text' name='state'  value='<?=$preUser->state?>' /></div>
<div class='cb'></div>
<div class='label'>Postal Code</div>
<div class='field'><input type='text' name='postal'  value='<?=$preUser->postal?>' /></div>
<div class='cb'></div>
<div class='label'>Country</div>
<div class='field'><input type='text' name='country'  value='<?=$preUser->country?>' /></div>
<div class='cb'></div>
<div class='label'>Fax</div>
<div class='field'><input type='text' name='fax'  value='<?=$preUser->fax?>' /></div>
<div class='cb'></div>
<div class='label'>Phone</div>
<div class='field'><input type='text' name='phone1'  value='<?=$preUser->phone1?>' /></div>
<div class='cb'></div>
<div class='label'>Phone 2</div>
<div class='field'><input type='text' name='phone2'  value='<?=$preUser->phone2?>' /></div>
<div class='cb'></div>
<div class='label'>Email</div>
<div class='field'><input type='text' name='email'  value='<?=$preUser->email?>' /></div>
<div class='cb'></div>
<div class='label'>Website</div>
<div class='field'><input type='text' name='website'  value='<?=$preUser->website?>' /></div>
<div class='cb'></div>
<div class='label'>Photo</div>
<div class='field imgupload'>
	<input type='hidden' name='photo' />
	<? if( $preUser->photo ){ ?>
		<img src="../<?=$preUser->photo?>" style="height:300px; float:left;" />
		<span class="rmimage" style="color:red; cursor:pointer; font-size:20px;padding-left:15px;" alt="<?=$preUser->photo?>">x</span>
	<? }else{ ?>
		<iframe src="../view/photo_upload.php" frameborder="0" scrolling="no" width="300" height="30"></iframe>
	<? } ?>
</div>
<div class='cb'></div>
<div class='label'>Payment Option</div>
<div class='field'>
	<input type='radio' name='payment' value='Pay' <? if( $preUser->payment == 'Pay' ) echo "checked='checked'"; ?> />Pay<br />
	<input type='radio' name='payment' value='NonPaid' <? if( $preUser->payment == 'NonPaid' ) echo "checked='checked'"; ?> />NonPaid
</div>
<div class='cb'></div>
<div class='label'>Dashboard Options</div>
<div class='field'>
	<div><input type='checkbox' name='mysteps' <? if( $preUser->mysteps ) echo "checked='checked'"; ?> value='1' />My Steps</div>
	<div><input type='checkbox' name='mycalendar' <? if( $preUser->mycalendar ) echo "checked='checked'"; ?> value='1' />My Calendar</div>
	<div><input type='checkbox' name='myprofiles' <? if( $preUser->myprofiles ) echo "checked='checked'"; ?> value='1' />My Profile</div>
	<div><input type='checkbox' name='myplans' <? if( $preUser->myplans ) echo "checked='checked'"; ?> value='1' />My Plans</div>
</div>
<div class='cb'></div>
<div class='submit_assessment'><input type='submit' name='create_user' class='submit' value='Create User' /> <input type='button' value='Back' class='back' name='admin_create' /></div>
<div class='cb'></div>
</form>
<script>
function setUploadedImage(flink){
	$('.imgupload > input:first').after('<img src="../'+flink+'" style="height:300px; float:left;" /><span class="rmimage" style="color:red; cursor:pointer; font-size:20px;padding-left:15px;" alt="'+flink+'">x</span>');
	$('.imgupload > iframe:first').remove();
	$('.imgupload > input:first').val(flink);
}
$('.rmimage').live('click', function (){
	$(this).prev().prev().val('');
	$(this).prev().remove();
	$(this).after('<iframe src="../view/photo_upload.php" frameborder="0" scrolling="no" width="300" height="30"></iframe>');
	$.post('../ajax/admin.php',{remove_image:$(this).attr("alt")});
	$(this).remove();
});
</script>

 

The field in question is this one...

<div class='label'>Group Name</div>
<div class='field'><select name='group'><?=$groupSelect?></select></div>

 

The field is populated from the MySQL DB from another form and all DB connections are in place.

 

What I need this to do is right next to this field have a button to add the same field but when the form is filled out the info from this newly created field is stored in a new column in the DB table...

 

Currently the info populating this field is coming from one table called Groups, this form is filling out a table called Users.

 

So in short, I need this form that saves to the Users Table have the option of creating a new Group selection field that if used would create a new column in the Users table.

 

The current info used in the User Table for this field is using the ID info from the Group table as the populated data.

 

Can anyone help me???

 

 

[trq]

Can anyone help me???

 

Where exactly are you stuck?

[Sparrz]

I am stuck on having this button create a clone of the group field directly under the current field, and then when the form is submitted having the extra or extra fields create a new column in the User Table within the DB.

 

Currently it works in the User Table by getting the ID from the Group table and placing that in the User Table, but I need this to allow for additional grabs from the Group table. The other Groups have already been created and are showing in the properly in the Group table.

 

I just need to be able to dynamically add more field to this form as the users would eventually have multiple groups added. And I need all the groups showing in new columns.