Dynamic form fields not submitted

JavaScript
1

Hello,

I have a form with fields created dynamically using javascript.

But these are not submitted…

The submitting shows only these:

selectedProvider yahoo
email mittiprovence@yahoo.se
password nesquick
formSubmitted 1

with the php code:


  $selectedContacts = array();
  foreach ($_POST as $key => $val) {
print("<br>$key $val");
    if (strpos($key, 'check_') !== false) {
      $selectedContacts[$_POST['email_' . $val]] = $_POST['name_' . $val];
    }
  }

The form is built with the code:


$str = '';

$str .= "\
<div class='system'>";

$str .= "\
<div class='system_title'>$mlText[0]</div>";

$str .= $utils->renderWarningMessages($warnings);

$str .= "\
<div class='system_comment'>$mlText[1]</div>";

$str .= "\
<div class='system_comment'>$mlText[2]</div>";

$str .= "\
<table border='0' width='100%' cellpadding='0' cellspacing='0'>";

$str .= "\
<form name='invite_form' id='invite_form' action='$PHP_SELF' method='post'>";

$openInviter = new OpenInviter();
$openInviterServices = $openInviter->getPlugins();
$list = "<select name='selectedProvider'><option value=''></option>";
foreach ($openInviterServices as $openInviterType => $providers) {
  $list .= "<optgroup label='{$openInviter->pluginTypes[$openInviterType]}'>";
  foreach ($providers as $providerId => $providerDetails) {
    $list .= "<option value='{$providerId}'" . ($selectedProvider == $providerId ? ' selected' : '') . ">{$providerDetails['name']}</option>";
  }
  $list .= "</optgroup>";
}
$list .= "</select>";

$str .= "\
<tr>";
$str .= "\
<td><div class='system_label'>$mlText[8]</div>";
$str .= $separator;
$str .= "\
<div class='system_field'>$list</div></td>";
$str .= "\
</tr>";

$str .= "\
<tr>";
$str .= "\
<td><div class='system_label'>$mlText[3]</div>";
$str .= $separator;
$str .= "\
<div class='system_field'><input class='system_input' type='text' id='email' name='email' value='$email' size='25' maxlength='255' /></div></td>";
$str .= "\
</tr>";

$str .= "\
<tr>";
$str .= "\
<td><div class='system_label'>$mlText[4]</div>";
$str .= $separator;
$str .= "\
<div class='system_field'><input class='system_input' type='password' id='password' name='password' value='' size='25' maxlength='20' /></div></td>";
$str .= "\
</tr>";

$str .= "\
</table>";

$str .= <<<HEREDOC
<script type='text/javascript'>

  $(document).ready(function() {
    $("#email").keypress(function(event) {
      if (event.keyCode == 13) {
        event.preventDefault();
        return false;
      }
    });
    $("#password").keypress(function(event) {
      if (event.keyCode == 13) {
        if ($("#password").val() != '') {
          getContacts();
        }
        event.preventDefault();
        return false;
      }
    });
  });

  // Toggle all checkboxes
  function toggleAllCheckboxes() {
    $('input:checkbox').each(function() {
      this.checked = !this.checked;
    });
  }

  // Get the contacts
  function getContacts() {
    var email = document.invite_form.email.value;
    var password = document.invite_form.password.value;
    var selectedProvider = document.invite_form.selectedProvider.value;
    email = encodeURIComponent(email);
    password = encodeURIComponent(password);
    selectedProvider = encodeURIComponent(selectedProvider);
    var url = '$gInviterUrl/get_contacts.php?email='+email+'&password='+password+'&selectedProvider='+selectedProvider;
    ajaxAsynchronousRequest(url, renderContactList);
  }

  // Render a list of contacts with checkboxes
  function renderContactList(responseText) {
    var response = eval('(' + responseText + ')');
    var error = response.error;
    var contacts = response.contacts;

    // Prevent the typing of words if the number of typed in words exceeds the specified limit
    if (contacts.length > 0) {
//      var str = "<table cellspacing='0' cellpadding='0'>";
      var table = document.createElement("TABLE");
      i = 0;
      for (var i in contacts) {
        var email = contacts[i].email;
        var name = contacts[i].name;
//        if (document.createElement) {
          var tr = document.createElement("TR");
          var td0 = document.createElement("TD");
          var checkboxInput = document.createElement("input");
          checkboxInput.type = "checkbox";
          checkboxInput.name = "check_" + i;
          checkboxInput.value = i;
          checkboxInput.checked = true;
          td0.appendChild(checkboxInput);
          var hiddenEmail = document.createElement("input");
          hiddenEmail.type = "hidden";
          hiddenEmail.name = "email_" + i;
          hiddenEmail.value = email;
          td0.appendChild(hiddenEmail);
          var hiddenName = document.createElement("input");
          hiddenName.type = "hidden";
          hiddenName.name = "name_" + i;
          hiddenName.value = name;
          td0.appendChild(hiddenEmail);
          var td1 = document.createElement("TD");
          td1.appendChild(document.createTextNode(name));
          var td2 = document.createElement("TD");
          td2.appendChild(document.createTextNode(email));
          tr.appendChild(td0);
          tr.appendChild(td1);
          tr.appendChild(td2);
          table.appendChild(tr);
//        } else {
//          str += "<tr><td><input name='check_"+i+"' value='"+i+"' type='checkbox' checked><input type='hidden' name='email_"+i+"' value='"+email+"'><input type='hidden' name='name_"+i+"' value='"+name+"'></td><td>"+name+"</td><td>"+email+"</td></tr>";
//        }

        i++;
      }
//      str += "</table>";
      document.getElementById("contactListItems").appendChild(table);
//      document.getElementById("contactListItems").innerHTML = str;
      document.getElementById("errorMessage").innerHTML = '';
      document.getElementById('contactList').style.display = 'block';
      document.getElementById('boutonGetContacts').style.display = 'none';
    } else {
      document.getElementById("errorMessage").innerHTML = error;
    }
  }

</script>
HEREDOC;

$str .= "\
<div id='boutonGetContacts' class='system_okay_button'><a href='javascript:getContacts();' style='text-decoration:none; vertical-align:middle;'><img src='$gImagesUserUrl/" . IMAGE_COMMON_OKAY . "' style='vertical-align:middle;' /> $mlText[5]</a></div>";

$str .= "\
<div id='errorMessage' class='system_warning' ></div>";

$str .= "\
<div id='contactList' style='display:none;'>"
  . "<div class='system_okay_button'><a onclick='toggleAllCheckboxes(); return false;'>$mlText[13]</a></div>"
  . "<div id='buttonInvite' class='system_okay_button'><input type='image' src='$gImagesUserUrl/" . IMAGE_COMMON_OKAY . "' style='vertical-align:middle;' /> <a href='#' onclick=\\"document['invite_form'].submit(); return false;\\" style='text-decoration:none; vertical-align:middle;'>$mlText[14]</a></div>"
  . "<pre id='contactListItems' style='overflow-y:auto; overflow-x:hidden; white-space:normal; max-height:200px;'></pre>"
  . "</div>";

$str .= "\
<div><input type='hidden' name='formSubmitted' value='1' /></div>";

$str .= "\
</form>";

$str .= "\
</div>";

Any idea why the field values are not seen in the submit ?

Thanks

2

I solved the issue. I had a form element inside a table one. Wrong. A form element can only be within a td one, that is, the opening and closing form tags have to be within the td element. But this defeats the purpose of using a table to position the form fields.
Therefore, the form element has to be outside of the table element. Then, the form fields can each be placed within a td element.