Hi everyone. I have a issue. Basically I have no clue how to send form data, which has been dynamically created to my php mail script. I have no problems sending the details of the original form in the mail, however, when it comes to retrieving details from dynamically created forms, i have no clue! here is my javascript function to create the dynamic form.
Javascript:
<script type=”text/javascript”>
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById(‘childinfo’).cloneNode(true);
newFields.id = ‘clone + counter’;
newFields.style.display = ‘block’;
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName){
newField[i].name = theName.substring(0,theName.length-1) + counter;
}
var insertHere = document.getElementById(‘inject’);
insertHere.parentNode.insertBefore(newFields,insertHere);
//document.getElementById(‘titles’).innerHTML = 1 + counter;
}
}
</script>
html:
<div align=”left” id=”page3″>
<table width=”635″ border=”0″>
<tr>
<th colspan=”2″ scope=”col”><div align=”left”>Section 3: Your child/children’s information <br /></div></th>
</tr>
</table><br />
<div id =”childinfo” style=”display: none”>
<table width=”635″ border=”0″ >
<tr>
<td><u><strong>Child #
<label id=”titles”>1</label>
</strong>
<label id=”titles”></label></u></td>
<td> </td>
</tr>
<tr>
<td width=”157″><strong>Title: </strong></td>
<td width=”468″><select name=”select2″ size=”1″>
<option value=”0″>Please Select…</option>
<option>Mr</option>
<option>Mrs</option>
<option>Miss</option>
<option>Ms</option>
</select></td>
</tr>
<tr>
<td><strong>First Name: <br />
</strong></td>
<td><input type=”text” name=”textfield29″ /></td>
</tr>
<tr>
<td><strong>Surname:</strong></td>
<td><input type=”text” name=”textfield30″ /></td>
</tr>
<tr>
<td><strong>D.O.B:</strong></td>
<td><input name=”textfield52″ type=”text” onfocus=”if (this.value == ‘dd/mm/yyyy’) {this.value=”}” onblur=”if(this.value == ”) { this.value=’dd/mm/yyyy’};return checkdate(this);” value=”dd/mm/yyyy” maxlength=”10″/></td>
</tr>
<tr>
<td><strong>Chosen sport: </strong></td>
<td><select name=”select4″ size=”1″>
<option>Please Select…</option>
<option>Football</option>
<option>Tennis</option>
<option>Basketball</option>
<option>Athletics</option>
<option>Badminton </option>
</select> </td>
</tr>
</table>
<input type=”button” value=”Remove child” onclick=”this.parentNode.parentNode.removeChild(this.parentNode);” /></div>
<table width=”635″ border=”0″ >
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<span id=”inject”></span>
<tr>
<td><input type=”button” name=”Button” onclick= “collapseElem(‘page3’); expandElem(‘page2’); scrollTo(0,0);” value=”< Previous” />
<input type=”button” name=”Button7″ onclick=” moreFields()” value=”Add child” />
<input name=”Button” type=”button” value=”Next >” /></td>
<td> </td>
</tr>
</table>
</div>