Combining PHP with my javascript

[Schlo_50]

I need to create a fairly large form, and to keep the page from becoming very lengthy i want to display text fields with a button at the top of each option which will add an extra text field when clicked. I have a javascript version of this, but want to know as my first question if it's possible in php?

 

I have provided the javascript code so you can see what i mean to do. My next question is if i use this method af adding additional text fields how do i go about collecting the information typed by the user? If i use the javascript example, could someone point out how in php i would grab the data?

 

<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 ("15 is the maximum amount of orders you are allowed.");
}else{

if (document.all){ //input.name doesn't work in IE
input = document.createElement('<input name="field_'+ctr+'">');
}else{
input = document.createElement('input');
input.name = "field_"+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>

<form action="<?php $_SERVER[php_SELF]; ?>" method="post" name="form">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody id="tblBody">
<tr>
<td height="30">
1. <input name="field_1" type="text" class="textfield" id="field_1" />
</td>
</tr>
<tr>
<td height="30">
2. <input name="field_2" type="text" class="textfield" id="field_2" />
</td>
</tr>
<tr>
<td height="30">
3. <input name="field_3" type="text" class="textfield" id="field_3" />
</td>
</tr>
<tr>
<td height="30">
4. <input name="field_4" type="text" class="textfield" id="field_4" />
</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();"/><br /><br />
<input name="submit" type="submit" value="Submit" />
</form>

 

Thanks phpfreaks!

[Schlo_50]

Maybe something like this would catch the data? But really need some help clearing it up!

 

<?php
if ($_POST[submit])
{

$arrData = array();
for($i=0;$i<15;++$i)
{
	if $var = (isset($_POST['field_'.$i]))
	{
		echo "$var";
	}

?>

 

Thanks

[rajivgonsalves]

should be like this

 

if (isset($_POST['submit']))
{

$arrData = array();
while (1)
{
	if (isset($_POST['field_'.$i]))
	{
		$var = $_POST['field_'.$i];
		echo "$var";
		$i++;
	}
	else
	{
		break;
	}
}
}

 

some assumptions are that the input files will always come in sequence like field_1,field_2 and so on... also you have to keep a javascript validation for it,

 

I would not recommend a while loop as I have done above better is use a for loop and pass the number of fields from the previous page.

 

hope its helpful

[Schlo_50]

Thanks!

[Schlo_50]

ok now, i have:

 

</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+'">');
}else{
input = document.createElement('input');
input.name = "field_"+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="field_1" type="text" class="textfield" id="field_1" />
</td>
</tr>
<tr>
<td height="30">
2. <input name="field_2" type="text" class="textfield" id="field_2" />
</td>
</tr>
<tr>
<td height="30">
3. <input name="field_3" type="text" class="textfield" id="field_3" />
</td>
</tr>
<tr>
<td height="30">
4. <input name="field_4" type="text" class="textfield" id="field_4" />
</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 name="submit" type="submit" value="Submit" />
</form>
<?php
if (isset($_POST['submit']))
{

$arrData = array();
while (1)
{
	if (isset($_POST['field_'.$i]))
	{
		$var = $_POST['field_'.$i];
		echo "$var";
		$i++;
	}
	else
	{
		break;
	}
}
}
?>

</body>
</html>

 

This isn't outputting errors, nor echoing the data entered into the text boxes?

[rajivgonsalves]

actually that code is for when you submit the page it will retrive values for insertion into the db

[Schlo_50]

So it won't echo out what the user inserts into the text fields when submit is pressed then?

[rajivgonsalves]

nope there is no live link between html/javascript and php if you want something like that you will have to do it in AJAX.