提交表单时，使用JavaScript创建的表单元素在PHP中不会$ _POST

Question

General overview:

I have three php pages:

• one is the which has a text field which onkeydown changes the URL of a iFrame,
• the 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 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);

Answer 3

i had this issue... search and search for a resolve this fix and dont dont find nothing...

after of many minutes... i fix that.

first u should to create the form as same way that u create or will create the form elements.. but this process when y load u page:

var formGrabar = document.createElement('form');

now.. u can to create a table and fill it with u form objects... remember always with document.create

so important is create the input type button dynamically too.

Conclusion:

for submit form elements created with JavaScript by POST, everything elements should be create dynamically, because when u create elements those ones are an object different from those who are created with html directly.

@m4rloncs @3inlabs

Answer 4

I'm pretty sure the problem arises from you making the input "disabled". Disabled form fields are not submitted along with the post data. Perhaps rather make the input a "hidden" input, or alternatively include a hidden input alongside the disabled text input.