CODEWITHSUNDEEP
phpjavascriptforms
ndwaldner
ndwaldner

Reputation: 31

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

General overview:

I have three php pages:

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.

Upvotes: 3

Views: 1339

Answers (4)

benten
benten

Reputation: 31

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.

Upvotes: 0

Marlon Cruces
Marlon Cruces

Reputation: 1

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

Upvotes: 0

Serdar
Serdar

Reputation: 1516

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

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186672

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.

Upvotes: 5

Related Questions