POST cannot read a variable created by javascript

Question

aristos32 0 Newbie Poster

12 Years Ago

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

first-post javascript php

4 Contributors
10 Replies
293 Views
22 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by aristos32

All 10 Replies

Biiim 182 Junior Poster

12 Years Ago

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';

niranga 9 Junior Poster

12 Years Ago

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"];
...

Biiim 182 Junior Poster

12 Years Ago

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?

Reply to this topic

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.

code739 17 Posting Whiz in Training · Answer 1 · 2012-06-28T08:29:29+00:00

code739 17 Posting Whiz in Training

12 Years Ago

im not sure if its a javascript error
look at line 14 missing quote.

code739 17 Posting Whiz in Training · Answer 2 · 2012-06-28T08:34:15+00:00

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'];
}
?>

code739 17 Posting Whiz in Training · Answer 3 · 2012-06-28T09:13:16+00:00

code739 17 Posting Whiz in Training

12 Years Ago

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 · Answer 4 · 2012-06-28T13:30:19+00:00

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!

aristos32 0 Newbie Poster · Answer 5 · 2012-06-28T20:00:45+00:00

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 · Answer 6 · 2012-06-29T05:40:20+00:00

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 · Answer 7 · 2012-06-29T07:04:37+00:00

aristos32 0 Newbie Poster

12 Years Ago

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!

Edited 12 Years Ago by aristos32

POST cannot read a variable created by javascript

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers