hi,
i have a form with n number of dynamically generated input fields.all of them have unique ids. but my problem is since the fields are being generated dynamically i don’t know the names or ids. on submitting the form i need to display the value of each field.
how can i do this?this is very very urgent. any help will be highly appreciated.
my working code which is generating the unique fields:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
var addInput_count = 0;
var addSec_count = 0;
function addInput() {
var c = addInput_count++;
var parent = document.getElementById('myform')
var objBr = document.createElement('br');
var objNew = document.createElement('div');
objNew.setAttribute('name', 'mod_div_' + c);
objNew.setAttribute('id', 'mod_div_' + c);
var mod_id = 'mod_div_' + c ;
var objInputx = document.createElement('input');
objInputx.setAttribute('type', 'hidden');
objInputx.setAttribute('name', 'module_id')
objInputx.setAttribute('id', 'module_id');
objInputx.setAttribute('value', mod_id);
var objInput1 = document.createElement('input');
objInput1.setAttribute('type', 'text');
objInput1.setAttribute('name', 'module_' + c);
objInput1.setAttribute('value', 'module_' + c);
/*var objA = document.createElement('a');
objA.setAttribute('href', 'javascript: onclick=addInput();');
objA.appendChild(document.createTextNode('add another module'));*/
var objB = document.createElement('button');
objB.setAttribute('type', 'button');
objB.setAttribute('name', 'addSec');
objB.setAttribute('value', c);
objB.setAttribute('onclick', 'javascript:addSec(this.value);');
objB.appendChild(document.createTextNode('add section'));
objNew.appendChild(document.createTextNode('Add Module:'));
objNew.appendChild(objInput1);
objNew.appendChild(objB);
objNew.appendChild(document.createElement('br'));
objNew.appendChild(objInputx);
objNew.appendChild(document.createElement('br'));
parent.appendChild(objNew);
}
function addSec(c) {
//alert(c);
var count=0;
var s = addSec_count++;
var parent1 = document.getElementById('mod_div_' + c)
var objNewsec = document.createElement('div');
objNewsec.setAttribute('name', 'sec_div_' + c+'_'+s);
objNewsec.setAttribute('id', 'sec_div_' + c+'_'+s);
var objInput1 = document.createElement('input');
objInput1.setAttribute('type', 'hidden');
objInput1.setAttribute('name', 'sec_id' );
objInput1.setAttribute('value', 'id' );
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'addSec');
objC.setAttribute('value', s);
objC.setAttribute('onclick', 'javascript:addSubSec(this.value);');
objC.appendChild(document.createTextNode('add sub section'));
objNewsec.appendChild(document.createTextNode('Add Section:'));
var objInput2 = document.createElement('input');
objInput2.setAttribute('type', 'text');
objInput2.setAttribute('name', 'sec_div_'+c +'_'+s);
objInput2.setAttribute('value','sec_div_'+c +'_'+s);
objInput2.setAttribute('style','margin-left:25px;');
objNewsec.appendChild(objInput1);
objNewsec.appendChild(objInput2);
objNewsec.appendChild(document.createTextNode('sec_div_'+ c +'_'+s));
/*objNewsec.appendChild(document.createElement('br'));
objNewsec.appendChild(objInputx);*/
objNewsec.appendChild(document.createElement('br'));
parent1.appendChild(objNewsec);
}
/*function addSubSec(c) {
alert(c);
var id="";
var s = addSubSec_count++;
var parent1 = document.getElementById('sec_div_' + c+'_'+s)
var objNewsec = document.createElement('div');
objNewsec.setAttribute('name', 'sub_sec_div_' + c+'_'+s);
objNewsec.setAttribute('id', 'sub_sec_div_' + c+'_'+s);
var objInput1 = document.createElement('input');
objInput1.setAttribute('type', 'hidden');
objInput1.setAttribute('name', 'sub_sec_id' );
objInput1.setAttribute('value', 'id' );
objNewsec.appendChild(document.createTextNode('Add Sub Section:'));
var objInput2 = document.createElement('input');
objInput2.setAttribute('type', 'text');
objInput2.setAttribute('name', 'sub_sec_div_'+c +'_'+s);
objInput2.setAttribute('value','sub_sec_div_'+c +'_'+s);
objInput2.setAttribute('style','margin-left:25px;');
objNewsec.appendChild(objInput1);
objNewsec.appendChild(objInput2);
objNewsec.appendChild(document.createTextNode('sub_sec_div_'+c +'_'+s));
parent1.appendChild(objNewsec);
}
*/
</script>
<form action="form_dyn.php" method="post" name="form1">
<div style="border:thin solid #000000; overflow:scroll; width:800px; height:300px;">
<input name="moreMods" type="button" id="moreMods" onclick="addInput();" value="Add another Module" />
<div id="myform"></div>
</div>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
thanks in advance.
Suk
