Form elements created with JavaScript do not $_POST in php when the form is submitted

Question

General overview:

I have three php pages:

• one is the data-entry page which has a text field which onkeydown changes the URL of a iFrame,
• the iFrame contains a page that searches an LDAP and mySQL database for email addresses. When a search result is clicked on it adds a disabled text input to the data-entry page.
• and there is an action page which receives the form information and sends emails.

The problem is that none of the form data is being passed to the action page, from either the static form elements or the dynamic ones created by JavaScript.

form.php

<SCRIPT type="text/javascript">
// <!--

function delRecipient(object) {
    var answer = window.confirm("Remove recipient?")
    if (answer){
        countChildren = object.parentNode.parentNode.childNodes.length;
        oldName = "recipient" + countChildren;
        newName = object.parentNode.id;
        object.parentNode.parentNode.removeChild(object.parentNode);
        document.getElementById(oldName).id = newName;
    }
}

function iFrameHeight(id) {
  var content_height=document.getElementById(id).contentWindow.document.body.scrollHeight;
  document.getElementById(id).height=content_height;
  document.getElementById(id).style.display='block';
}

function iFrameOpen(id) {
    document.getElementById(id).style.display='block';
    iFrameHeight(id);
}

function iFrameClose(id) {
    var dt = new Date();
    while ((new Date()) - dt <= 250) { /* Do nothing for 250 miliseconds. */ }
    document.getElementById(id).style.display='none';
}

var selectNum=-1;
function iFrameSearch(e) {
    var keynum;
    var keychar;
    var numcheck;

    if(window.event) {
        keynum = e.keyCode;
    }
    else if(e.which) {
        keynum = e.which;
    }

//  Use up and down arrow keys to select recipient:
//  Keynum  38 is the up arrow key,
//      40 is the down arrow key
//      13 is the enter key (for future use...)
    if(keynum==38) { --selectNum; }
    else if(keynum==40) { ++selectNum; }
    else {
        selectNum=-1;
    }

    keychar = String.fromCharCode(keynum);
    keychar = keychar.replace(/([^- 'a-zA-Z])/gi,"");

    document.getElementById('members').src='iframe.php?keyword=' + document.getElementById('search').value + keychar + '&select=' + selectNum;
    iFrameHeight('members');

    return false;
}

// -->
</SCRIPT>

<div class="content">
    <form name="form" id="form" method="post" action="action.php">
    <h3>Select Recipients</h3>

    To:
    <div id="recipients" class="recipients"></div>
    <input type="text" id="search" class="search" autocomplete="off" onfocus="iFrameOpen('members'); iFrameHeight('members'); if(this.value=='Type name here to add a recipient...'||this.value=='Type name here to add another recipient...'){this.value='';}" onblur="if(this.value==''&&document.getElementById('recipients').getElementsByTagName('div').length>0){this.value='Type name here to add another recipient...';} else if(this.value==''){this.value='Type name here to add a recipient...';}" value="Type name here to add a recipient..." onkeydown="iFrameOpen('members'); iFrameSearch(event); iFrameHeight('members');" /><br>
    <iframe src="" id="members" width="400" height="0" frameborder="0" scrolling="no" onmouseout="iFrameClose('members')" style="display: none; position:relative; top:0px; left:0px;"></iframe>

    <input type="hidden" name="message" value="<?php $_REQUEST['var_from_previous_page'] ?>" />

    <input type="submit" value="Send" />

    </form>
</div>

iFrame.php

<SCRIPT type="text/javascript">
// <!-- 

function newRecipient(name,email) {
    var recipientNumber = parent.document.getElementById("recipients").childNodes.length++;

    var recipient = document.createElement("DIV");
    recipient.id = "recipient" + recipientNumber;
    recipient.className = "recipient";
    recipient.innerHTML = "<INPUT type=\"text\" name=\"recipient" + recipientNumber + "\" value=\"" + name + " <" + email + ">\"  disabled=\"disabled\" /><div class=\"delete\" onclick=\"javascript:delRecipient(this)\">&nbsp;</div>";
    parent.document.getElementById("recipients").appendChild(recipient);
    parent.document.forms[0].search.value = "";
    parent.document.forms[0].search.focus();
    parent.document.getElementById("members").style.display="none";
}

// -->
</SCRIPT>

<?php

// CUT-OUT A BUNCH OF IRRELEVANT PHP which searches the LDAP and mySQL databases, sorts, formats, etc.

echo "<TABLE cellspacing=\"0\" callpadding=\"0\" width=\"1000\">\n";

for ($i=0; $i<$returned; $i++) {
    $row_type = ($i%2 == 0) ? "even" : "odd";
    $select = $_REQUEST['select'] % $returned;
    if($i == $select) { $row_type .= " selected"; $selected = true; }
    else { $selected = false; }
    $name = explode(" (",$info[$i]["cn"][0]);
    $name_boldkeyword = nameCapitalize(str_ireplace(strtolower($_REQUEST['keyword']), "<b>" . strtolower($_REQUEST['keyword']) . "</b>", $name[0]));
    $email_boldkeyword = strtolower(str_ireplace( $_REQUEST['keyword'], "<b>" . $_REQUEST['keyword'] . "</b>", $info[$i]["mail"][0]));
    echo '<tr class="' . $row_type . '" onclick="newRecipient(\'' . addslashes(ucwords($name[0])) . '\',\'' . $info[$i]["mail"][0] . '\');"><td height="20" style="overflow: hidden;">' . ucwords($name_boldkeyword) . ' &lt;' . $email_boldkeyword . "&gt;</td></tr>\n";
}

echo '<tr class="last"><td>Showing ' . $returned . ' of ' . $info["count"] . " entries.</td></tr>\n";
echo "</table>";

action.php

var_dump($_REQUEST) contains only session cookies and advertising cookies. No $_POST variables.

If you play with the URL it will dump the variables you add.

Answer 1

You don't seem to be specifying any name="" parameters other than on the <form>, where it's not really useful.

Try doing that and you should be good.

Answer 2

I had the same problem. My solution was also adding the name attribute.

this is the way I create my element

var myElement = document.createElement('input');
myElement.setAttribute('type', 'text');
myElement.setAttribute('id', 'txtElement');
myElement.setAttribute('name', 'txtElement');
myElement.setAttribute('style', 'margin:5px;width:120px;');
myElement.setAttribute('value', 'my value');

this is the way I add my element to a div in the form.

document.getElementById("myDiv").appendChild(myElement);