Help required urgently

Bigmous · #1 10-22-2009, 09:03 AM

I'm in need of some help. currently working on a major php project for uni and am slightly stuck on a form feature that is required.

i've got a drop down menu and an input box next to it. once the user clicks the add button, I need a new drop down and input box to be generated under it. this new row of fields will occur each time they click on the add.

coothead · #2 10-22-2009, 10:26 AM

Hi there Bigmous,

here is an example that I have just knocked up...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#theForm div {
    clear:both;
    width:320px;
    height:20px; 
    padding:10px;
    border:1px solid #333;
    margin:4px auto;
 }
#theForm input,#theForm select {
    float:left;
    margin:0 5px 10px;
 }
.blue {
    background-color:#ccf;
 }
.red {
    background-color:#fcc;
 }
</style>

<script type="text/javascript">
if(window.addEventListener){
   window.addEventListener('load',init,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',init);
  }
 }

function init(){

  c=0;
  d=2
  optLength=3;
  opt=[];
  df=document.forms[0];

df[2].onclick=function(){
  addElements();
  }
 }

function addElements() {

   c++;
   dv=document.createElement('div');
   dv.setAttribute('id','container'+c);
if(c%2==0) {
   dv.className='blue';
 }
else {
   dv.className='red';
 }
   sel=document.createElement('select');
   sel.setAttribute('name','select'+c);

for(k=0;k<optLength;k++){
   d++;
   opt[k]=document.createElement('option');
   opt[k].setAttribute('value',d);
if(k==0){
   opt[k].appendChild(document.createTextNode('---options---'));
 }
else {
   opt[k].appendChild(document.createTextNode('option '+d));
 }
   sel.appendChild(opt[k]);
 }
   dv.appendChild(sel);

   inp=document.createElement('input');
   inp.setAttribute('name','input'+c);
   inp.setAttribute('type','text');

   dv.appendChild(inp);

   document.forms[0].appendChild(dv);
 }
</script>

</head>
<body>

<form id="theForm" action="#">

<div id="container0" class="blue">

<select name="select0">
 <option value="0">---options---</option>
 <option value="1">option 1</option>
 <option value="2">option 2</option>
</select>

<input name="input0" type="text">
<input type="button" value="add">

</div>

</form>

</body>
</html>

Bigmous · #3 10-24-2009, 07:02 AM

Thanks heaps mate, the only problem i'm trying to figure out now is how i can keep the add button next to or under the last 1

Cheers,

Mous

coothead · #4 10-24-2009, 07:45 AM

Hi there Mous,

this can be easily done with a slight modification.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#theForm {
    margin:0;
 }
#theForm div {
    clear:both;
    width:264px;
    height:20px; 
    padding:10px;
    border:1px solid #333;
    margin:4px auto;
 }
#theForm input,#theForm select {
    float:left;
    margin:0 5px 10px;
 }
#button {
    width:284px;
    margin:auto;
 }
#add  {
    float:right;
 }
.blue {
    background-color:#ccf;
 }
.red {
    background-color:#fcc;
 }
</style>

<script type="text/javascript">
if(window.addEventListener){
   window.addEventListener('load',init,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',init);
  }
 }

function init(){

  c=0;
  d=2
  optLength=3;
  opt=[];
  df=document.forms[0];

document.getElementById('add').onclick=function(){
  addElements();
  }
 }

function addElements() {

   c++;
   dv=document.createElement('div');
   dv.setAttribute('id','container'+c);
if(c%2==0) {
   dv.className='blue';
 }
else {
   dv.className='red';
 }
   sel=document.createElement('select');
   sel.setAttribute('name','select'+c);

for(k=0;k<optLength;k++){
   d++;
   opt[k]=document.createElement('option');
   opt[k].setAttribute('value',d);
if(k==0){
   opt[k].appendChild(document.createTextNode('---options---'));
 }
else {
   opt[k].appendChild(document.createTextNode('option '+d));
 }
   sel.appendChild(opt[k]);
 }
   dv.appendChild(sel);

   inp=document.createElement('input');
   inp.setAttribute('name','input'+c);
   inp.setAttribute('type','text');

   dv.appendChild(inp);

   document.forms[0].appendChild(dv);
 }
</script>

</head>
<body>

<form id="theForm" action="#" >

<div id="container0" class="blue">

<select name="select0">
 <option value="0">---options---</option>
 <option value="1">option 1</option>
 <option value="2">option 2</option>
</select>

<input name="input0" type="text">

</div>

</form>

<div id="button">
<input id="add" type="button" value="add">
</div>

</body>
</html>

Bigmous · #5 10-24-2009, 07:58 AM

omg ofcourse, so very simple!!! lol thanks heaps, i think lack of sleep and all my c++, java and php projects are finally getting to me. haha how could i of missed that.

thanks again

coothead · #6 10-24-2009, 08:05 AM

No problem, you're very welcome, Mous.