Hi all.
I use the following js function to dynamically create an new <tr> and <td> in my table. Then I insert an <input>. :
function testName(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//firstname
var cell1 = row.insertCell(0);
var element = document.createElement("input");
element.type = text';
element.name = 'testname';
element.id = "testname";
cell1.appendChild(element);
}
On the target php, I do $testNames = $_POST['testname'];
This gives me : Notice: Undefined index: testname
If I define this <input> manually in my table, it works fine.
Any suggestions will be appreciated!
thanks
aristos
aristos32 0 Newbie Poster
code739 17 Posting Whiz in Training
im not sure if its a javascript error
look at line 14 missing quote.
Biiim 182 Junior Poster
Just tested this and it works for me:
<?php
var_dump($_POST);
?><html>
<head>
<script type="text/javascript">
function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML="New";
cell2.innerHTML="New";
var element = document.createElement("input");
element.type = 'text';
element.name = 'testname';
element.id = "testname";
cell1.appendChild(element);
}
</script>
</head>
<body>
<form method=post>
<table id="myTable" border="1">
<tr>
<td><input type=text name=cell1 value=3/>cell 1</td>
<td><input type=text name=cell2 value=14/>cell 2</td>
</tr>
<tr>
<td><input type=text name=cell3 value=1/>cell 3</td>
<td><input type=text name=cell4 value=7/>cell 4</td>
</tr>
</table>
<input type=submit value=submit/>
</form>
<br />
<button type="button" onclick="displayResult()">Insert new row</button>
</body>
</html>
I noticed your line 14 has a quote missing element.type = text';
code739 17 Posting Whiz in Training
if its not then
look @ this code below for testing
<script>
function testName(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//firstname
var cell1 = row.insertCell(0);
var element = document.createElement("input");
element.type = 'text';
element.name = 'testname';
element.id = "testname";
cell1.appendChild(element);
}
</script>
<form method="post" action="probs.php">
<table id="mt">
</table>
<input type="submit" value="submit to show post"/>
</form>
<button onclick="testName('mt')">click to append input text</button>
<?php
if(isset($_POST['testname'])){
echo $_POST['testname'];
}
?>
niranga 9 Junior Poster
The mistake in your javascript function is, you are giving the same "name" to every input you dynamically create.
Try assigining input element's name and id as below
element.name = "testname_"+table.rows.length;
element.id = "testname_"+table.rows.length;
Now you can refer each input value by
echo $_POST["testname_1"];
echo $_POST["testname_2"];
echo $_POST["testname_3"];
...
code739 17 Posting Whiz in Training
yah! dat is the point if you create it dynamically
better check if theres an error to the client side script which cause not to read the name of an element thats why when you inputed it as <input > in html
and provide a unique name as niranga says
aristos32 0 Newbie Poster
people, thanks to all of your replies.
@code739 : missing quote is a copy-paste error, not a real one.
I try to narrow the problem down to the example I posted. I only create one element, with one name and one Id. But still fails.
Does the js function need to be in the same file as the form? I have the form in one file, calling a php function in another php file, and my javascript functions are in another php file.
thanks!
Biiim 182 Junior Poster
try just adding an alert(tableID);. I cant see any difference to the one i did and that worked for me, the only difference in mine is it had a call to innerHTML but even so that was before the input was created - could still make a difference.
function testName(tableID)
{
alert(tableID);
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//firstname
var cell1 = row.insertCell(0);
cell1.innerHTML="New";
var element = document.createElement("input");
element.type = text';
element.name = 'testname';
element.id = "testname";
cell1.appendChild(element);
}
Going to have to give more code if you still can't get it working, i dont think the error is with the function its likely your html structure or incorrect tableID - also what browser you use?
aristos32 0 Newbie Poster
Biiim I use Chrome. But it fails also in FF.
Its very strange. I use a js debugger and the <input> is added well on the table. It gets and Id, and with the getElemenetsById I can find it. Also with the getElementsByName I can find it. But just not submitted, like it's outside of the form. I agree that this is probably something with the html structure, just don't know how to debug this...
on a simple file that only has a <form> and <table> this works fine.
But my php has a <form>, inside another table, and also this table that I actually modify. If you have any hints, on what to look for, it will be very appreciated!
thanks
aristos32 0 Newbie Poster
I attach the part of code that is not working. Any ideas will be appreciated. I try to modify the table with id='medicalInsuredPersonsTable':
!-- main content - left side -->
<div id="main-content">
<table>
<!-- this form cannot be inside the main form -->
<tr>
<td class="col10Per"></td>
<td colspan="4"><h1 id="contract1">
<?php
$updateStateId = "update_".$contract->stateId; ?>
<!-- create hidden forn, to send the action as a POST. Each form has a different name, since in the loop-->
<form action="./office.php" id="<?php echo $updateStateId;?>" method="POST" style="display: none;">
<input type="text" name="action" value="updateClientDataForm" />
<input type="text" name="stateId" value="<?php echo $contract->stateId;?>" />
</form>
<a href="javascript:;" onclick="javascript: document.getElementById('<?php echo $updateStateId;?>').submit()"><?php echo $contract->firstName." ".$contract->lastName; ?></a>
</h1></td>
<td colspan="3"><h1 id="contract2"><?php echo $contract->regNumber; ?></h1></td>
</tr>
<form name="updateContractData" action="./office.php" method="POST" onSubmit="return checkUpdateContractDataForm('medicalInsuredPersonsTable')" >
<input type="hidden" name="action" value="updateContractDataProcess">
..... some <trs>
<!-- MEDICAL -->
<tbody id="medical-info" style="display:none;">
<tr>
<td class="col10Per" colspan="8"><h4><?php echo $_SESSION['medicalDetails']; ?></h4></td>
</tr>
..... some <trs>
<tr>
<td colspan=8>
<table id="medicalInsuredPersonsTable">
<tr>
<td class="col10Per" colspan="2"><h4><?php echo $_SESSION['insuredPersons']; ?></h4></td>
<td class="col10Per"><INPUT type="button" value="<?php echo $_SESSION['addPerson'];?>" onclick="testFunction('medicalInsuredPersonsTable')" /></td>
<td class="col10Per"><INPUT type="button" value="<?php echo $_SESSION['deletePerson'];?>" onclick="deleteRowFromTable('medicalInsuredPersonsTable')" /></td>
</tr>
</table>
</td>
</tr>
</tbody>
<tr>
<td class="col10Per"><input type="submit" name="send" class="button" value="<?php echo $_SESSION['updateButton'];?>" size="50" /></td>
<td class="col10Per"><input type="button" value="<?php echo $_SESSION['print']; ?>" onclick="printpage()" /></td>
</form>
<td class="col10Per">
<!-- display all client contracts -
create hidden forn, to send the action as a POST -->
<form action="./office.php" id="retrieveAllClientContracts" method="post" style="display: none;">
<input type="text" name="action" value="retrieveAllClientContracts" />
<input type="text" name="stateId" value="<?php echo $contract->stateId;?>" />
</form>
<a href="javascript:;" onclick="javascript: document.getElementById('retrieveAllClientContracts').submit()"><?php echo $_SESSION['contractsTab']; ?></a>
</td>
</tr>
</table>
</div>
aristos32 0 Newbie Poster
guys, thanks to the IE debugger I solved my issue. Thanks to Biiim for pointing me towards that direction of bad html format.
Seems like intermixing forms and tables is not a good practice after all. they should be distinctly defined.
thanks!
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.