Member Avatar for emhmk1

Hi i have another query i would like to run by you.

I have a javascript code which i would like to implement in my site but i have come across an error.

The JS generates a new input text field once a button is clicked but i'm uncertain of how to pull the data from the php side. there are 4 fields to start with and the button 'adds another field'. how do i get php to use $_POST on the generated fields when i don't know how many there are going to be? the code is below

</head> 
 
<script language="javascript" type="text/javascript"> 
 
    function addField() { 
    var tbody = document.getElementById("tblBody"); 
    var ctr = tbody.getElementsByTagName("input").length + 1; 
    var input; 
   
    if ( ctr > 15 ) { 
          alert ("If you want to tell the whole world, dont do it all at once please"); 
    }else{ 
   
        if (document.all){ //input.name doesn't work in IE 
            input = document.createElement('<input name="field_'+ctr+'"> x <input name="field_'+ctr+'">'); 
        }else{ 
            input = document.createElement('input'); 
            input.name = "marquee_"+ctr; 
        } 
  
        input.id = input.name; 
        input.type = "text"; 
        input.value = ""; 
        input.className = "textfield"; 
        var cell = document.createElement('td'); 
        cell.style.height = '30px'; 
        cell.appendChild(document.createTextNode(ctr+". ")); 
        cell.appendChild(input); 
        var row = document.createElement('tr'); 
        row.appendChild(cell); 
        tbody.appendChild(row); 
   
        window.document.the_form.count.value = ctr; 
   
    } 
}  
</script> 
 
 
 
<body> 
 
 
 
 
    <form name="the_form" id="the_form" method="post" action=""> 
     
          <table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
          <tbody id="tblBody"> 
            <tr> 
              <td height="30"> 
                1. <input name="marquee_1" type="text" class="textfield" id="field_1" /> 
              </td> 
            </tr> 
            <tr> 
              <td height="30"> 
                2. <input name="marquee_2" type="text" class="textfield" id="field_2" /> 
              </td> 
            </tr> 
            <tr> 
              <td height="30"> 
                3. <input name="marquee_3" type="text" class="textfield" id="field_3" /> 
              </td> 
            </tr> 
            
             
        <tbody 
        </table> 
          <input name="count" type="hidden" id="count" value="4"/>         
          <input name="add" type="button" class="button" id="add" value="Add Another" onClick="addField();"/>           
			<input type="submit" name="submit" value="Get Components" />
           
    </form>

The limit goes to 15 fields so should i just create the 15 $_POST; or is there a better way of achieving this??!!??
Thanks Guys
Chris

  • 2 Contributors
  • 2 Replies
  • 98 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by emhmk1
Member Avatar for nav33n

You are almost there! I have modified your code, very small changes.

<?php
if(isset($_POST['submit'])) {
	for($i=1;$i<=$_POST['count'];$i++) {
		$textfieldname = "marquee_".$i;
		print $_POST[$textfieldname];
		print "<br />";
	}
}
?>
<html>
<head>
 
<script language="javascript" type="text/javascript"> 
 
    function addField() { 
    var tbody = document.getElementById("tblBody"); 
    var ctr = tbody.getElementsByTagName("input").length + 1; 
    var input; 
   
    if ( ctr > 15 ) { 
          alert ("If you want to tell the whole world, dont do it all at once please"); 
    }else{ 
   
        if (document.all){ //input.name doesn't work in IE 
            input = document.createElement('<input name="field_'+ctr+'"> x <input name="field_'+ctr+'">'); 
        }else{ 
            input = document.createElement('input'); 
            input.name = "marquee_"+ctr; 
        } 
  
        input.id = input.name; 
        input.type = "text"; 
        input.value = ""; 
        input.className = "textfield"; 
        var cell = document.createElement('td'); 
        cell.style.height = '30px'; 
        cell.appendChild(document.createTextNode(ctr+". ")); 
        cell.appendChild(input); 
        var row = document.createElement('tr'); 
        row.appendChild(cell); 
        tbody.appendChild(row); 
   		document.getElementById('count').value = ctr;   
    } 
}  
</script> 
</head>  
 
 
<body> 
 
 
 
 
    <form name="the_form" id="the_form" method="post" action=""> 
     	<input type="hidden" name="count" id="count">
          <table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
          <tbody id="tblBody"> 
            <tr> 
              <td height="30"> 
                1. <input name="marquee_1" type="text" class="textfield" id="field_1" /> 
              </td> 
            </tr> 
            <tr> 
              <td height="30"> 
                2. <input name="marquee_2" type="text" class="textfield" id="field_2" /> 
              </td> 
            </tr> 
            <tr> 
              <td height="30"> 
                3. <input name="marquee_3" type="text" class="textfield" id="field_3" /> 
              </td> 
            </tr> 
            
             
        </tbody>
        </table> 
          <input name="add" type="button" class="button" id="add" value="Add Another" onClick="addField();"/>           
			<input type="submit" name="submit" value="Get Components" />
           
    </form>
    </body>
    </html>

(P.S. If count value is empty, then it means, 'Add another' button wasn't clicked and no fields were added).

Member Avatar for emhmk1

Thanks for the quick reply, the code has just one flaw!

When i hit submit after adding a couple of fields it echo's out nothing, the spaces are there just no text from the form.

Please could someone take a quick gander as i'm pretty stuck!!

Cheers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.