JS and php

PHP
1

I’m learning php here, but my project requires javascript. Now I’m forced to do JS thing.

I downloaded a code that can dynamically add textbox, my problem is how php can get the value of the generated textbox.
For validation and submission.
I don’t even know how to make a submit button upon clicking the link.
any help? thank you.


<SCRIPT language="javascript">
var intTextBox=0;

//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Serial numbers "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";

contentID.appendChild(newTBDiv);

}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
</SCRIPT>
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement();" >Add</a> <a href="javascript:removeElement();" >Remove</a></p>
<div id="content"></div>
2

Hello,

Wrap the area with the inputs in a <form> and a <input type=“submit”> And all the values will get posted to the server and can be processed by PHP.

3

As Mark said, use a form; keep in mind that PHP and JS operate in completely different spaces and runtimes - neither one knows about the other.

(Simplified quite a bit)
Page is requested.
The Server identifies the script as PHP, and the PHP engine does what it needs to do. The result is HTML.
The HTML is then sent to the browser.
The browser then interprets the HTML, and starts any Javascript it needs to.
Javascript does whatever it needs to do; in this case, dynamically create form elements.
When the Submit button is pushed, the browser gathers all the data for that form, and sends another page request to the server. And the process starts again.

4 

<html> 
<head> 
<title>Adding and Removing Text Boxes Dynamically</title> 
<SCRIPT language="javascript"> 
var intTextBox=0; 

//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement() 
{ 
intTextBox = intTextBox + 1; 
var contentID = document.getElementById('content'); 
var newTBDiv = document.createElement('div');
var submit = document.getElementById('submit').style.visibility="visible";
newTBDiv.setAttribute('id','strText'+intTextBox); 
//newTBDiv.innerHTML = "Serial numbers "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/><br/><br/>";
newTBDiv.innerHTML = "Serial numbers "+intTextBox+": <input type='text' id='" + intTextBox + "' name='sn[]'/><br/><br/>";
contentID.appendChild(newTBDiv);
//contentID.appendChild(submit);
} 

//FUNCTION TO REMOVE TEXT BOX ELEMENT 
function removeElement() 
{ 
if(intTextBox != 0) 
{ 
var contentID = document.getElementById('content'); 
contentID.removeChild(document.getElementById('strText'+intTextBox)); 
intTextBox = intTextBox-1; 
} 
} 
</SCRIPT> 
</head> 
<body> 
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p> 
<p><a href="javascript:addElement();" >Add</a> <a href="javascript:removeElement();" >Remove</a></p>
<form action='test.php' method='post'>
<div id="content"></div>
<div id="submit" style="visibility: hidden;">
 <input type='submit' value='submit'>   
    
</div>
</form>
</body> 
</html>

this works fine. Thank you.

5

HI Guys

I have seen ur code… I am using it but there is one problem.

I have added one checkbox and two textboxes, and my code looks like this

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<SCRIPT language=“javascript”>
var intTextBox=0;

//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById(‘content’);
var newTBDiv = document.createElement(‘div’);
var submit = document.getElementById(‘submit’).style.visibility=“visible”;
newTBDiv.setAttribute(‘id’,‘strText’+intTextBox);
newTBDiv.innerHTML = "Serial numbers "+intTextBox+ “<input type=‘checkbox’ id='cb” + intTextBox + “’ name=‘cb’/>” + “: <input type=‘text’ id='nm” + intTextBox + “’ name=‘nm’/> – <input type=‘text’ id='vl” + intTextBox + “’ name=‘vl’/><br/><br/>”;
contentID.appendChild(newTBDiv);
}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById(‘content’);
contentID.removeChild(document.getElementById(‘strText’+intTextBox));
intTextBox = intTextBox-1;

if(intTextBox &lt; 1) {
    document.getElementById('submit').style.visibility="hidden";

}

}
}
</SCRIPT>
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>

<form action=‘post.php’ method=‘post’>
<div id=“content”></div>
<div id=“submit” style=“visibility: hidden;”>
<input type=‘submit’ value=‘submit’>

</div>
</form>
<p><a href=“javascript:addElement();” >Add</a> <a href=“javascript:removeElement();” >Remove</a></p>
</body>
</html>

And I am getting an output like the following.

Array
(
[cb] => Array
(
[0] => on
[1] => on
)

[nm] =&gt; Array
    (
        [0] =&gt; a
        [1] =&gt; b
    )

[vl] =&gt; Array
    (
        [0] =&gt; 1
        [1] =&gt; 2
        [2] =&gt; 3
    )

)

Now, in the above output how do I know pragmatically which checkbox values were checked and which textbox were filledup?

If there is anyway we can use names of the elements instead of indexed arrays? For example

Array
(
[t_x] => 1
[t_y] => 2
[t_z] => 3
)

THanks