0

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
3
Views
8 Years
Discussion Span
Last Post by emhmk1
-1

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).

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.