DaniWeb Forum Index > Web Development > PHP

posting from onClick generated fields

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2008

Posts: 44

Reputation: emhmk1 is an unknown quantity at this point

Solved Threads: 0

emhmk1

Offline

Light Poster

posting from onClick generated fields

Oct 7th, 2009

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

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
</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>
</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

•

Join Date: Nov 2007

Posts: 3,746

Reputation: nav33n is a jewel in the rough

Solved Threads: 331

nav33n

Offline

Senior Poster

-1

Oct 7th, 2009

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

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?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>
<?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).

Ignorance is definitely not bliss!

*PM asking for help will be ignored*

•

Join Date: Feb 2008

Posts: 44

Reputation: emhmk1 is an unknown quantity at this point

Solved Threads: 0

emhmk1

Offline

Light Poster

Oct 7th, 2009

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