Can't get the posted value of an array of dynamically generated textboxesL

[Yahya]

I have a form that has 2 dropdown lists (Diplomas, Fields), a submit button and an "Add" button that copies the selected values of the dropdownlists to some dynamically generated textboxes as long as the number of the textboxes is lower than 5 This is the code of the dipSecSelection.php file included inside the form:

<!----------- The dipSecSelection File ------------->
<div id="dipSecSelection">
<table>
<tr>
<td><label for="diplomes">Diplome:</label></td>
<td>
<select name="Diplomes" id="Diplomes">
<option value="na">--Diplome--</option>
<option value="Technician">Technician</option>
<option value="Master">Master</option>
<option value="PhD">PhD</option>
</select>
</td>
<td id="separator">|</td><!-- Separator -->
<td><label for="secteurs">Secteur:</label></td>
<td>
<select name="Secteurs" id="Secteurs">
<option value="na">--Secteur--</option>
<option value="Software Dev">Software Dev</option>
<option value="Engineering">Engineering</option>
<option value="Physics">Physics</option>
</select>
</td>
<td>
<a href="#" Onclick="addDipSec()" value="Add" class="button">Add</a>
</td>
</tr>
</table>
<table>
<tr>
<td><div id='DipTextBoxesGroup'></div></td>
<td><div id='SecTextBoxesGroup'></div></td>
</tr>
</table>
</div>

<script type="text/javascript">
//Diplomas textBoxes!!!
var counterdip = 1;
var countersec = 1;
function addDipSec(){
if(counter>5){
alert("Only 5 Diplomas allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counterdip);
newTextBoxDiv.after().html('<label>Diplome #'+ counterdip + ' : </label>' +
'<input type="text" name="dipBox[]" id="textboxdip' + counterdip + '" value="" >');
newTextBoxDiv.appendTo("#DipTextBoxesGroup");
$('#textboxdip'+counterdip).val($('#Diplomes option:selected').html());
counter++;

//Secteurs textBoxes
if(countersec>5){
alert("Only 5 Setors are allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + countersec);
newTextBoxDiv.after().html('<label>Secteur #'+ countersec + ' : </label>' +
'<input type="text" name="secBox[]" id="textboxsec' + countersec + '" value="" size="35">');
newTextBoxDiv.appendTo("#SecTextBoxesGroup");
$('#textboxsec'+countersec).val($('#Secteurs option:selected').html());
countersec++;
alert(secBox[0].val);
}
</script>

 

 

This is the php code:

<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="POST" enctype="multipart/form-data">
<?php include'includes/dipSecSelection.php'?>
<?php
if(isset($_POST['dipBox']) && isset($_POST['secBox'])){
if(!empty($_POST['dipBox'])&&!empty($_POST['secBox'])){
$dip= $_POST['dipBox'];
$sec= $_POST['secBox'];
$N = count($dip);
for($i=0; $i < $N; $i++){
$add_AnnDipSec = "INSERT INTO annDipSec VALUES('$dip[$i]','$sec[$i]')";
if(mysqli_query($connection, $add_AnnDipSec)){
echo'Successfully Added to AnnDipSec';
}else{echo'Error while trying to insert into AnnDipSec';}
}
}else{echo"Dip and Sec were Empty";}
}
?>
<input type="submit" name="submit" value="Submit" class='button'>
</form>

 

 

Problem is that dipBox[] and secBox[] never get set and always return nothing so they never get inserted to the database table.

 

 

 

[lemmin]

I think you want the value of the select element, not of the option. You should be able to just do this:

$('#textboxdip'+counterdip).val($('#Diplomes').val())