SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic form fields not submitted

    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:

    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:

    Code:
    $str = '';
    
    $str .= "\n<div class='system'>";
    
    $str .= "\n<div class='system_title'>$mlText[0]</div>";
    
    $str .= $utils->renderWarningMessages($warnings);
    
    $str .= "\n<div class='system_comment'>$mlText[1]</div>";
    
    $str .= "\n<div class='system_comment'>$mlText[2]</div>";
    
    $str .= "\n<table border='0' width='100%' cellpadding='0' cellspacing='0'>";
    
    $str .= "\n<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 .= "\n<tr>";
    $str .= "\n<td><div class='system_label'>$mlText[8]</div>";
    $str .= $separator;
    $str .= "\n<div class='system_field'>$list</div></td>";
    $str .= "\n</tr>";
    
    $str .= "\n<tr>";
    $str .= "\n<td><div class='system_label'>$mlText[3]</div>";
    $str .= $separator;
    $str .= "\n<div class='system_field'><input class='system_input' type='text' id='email' name='email' value='$email' size='25' maxlength='255' /></div></td>";
    $str .= "\n</tr>";
    
    $str .= "\n<tr>";
    $str .= "\n<td><div class='system_label'>$mlText[4]</div>";
    $str .= $separator;
    $str .= "\n<div class='system_field'><input class='system_input' type='password' id='password' name='password' value='' size='25' maxlength='20' /></div></td>";
    $str .= "\n</tr>";
    
    $str .= "\n</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 .= "\n<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 .= "\n<div id='errorMessage' class='system_warning' ></div>";
    
    $str .= "\n<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 .= "\n<div><input type='hidden' name='formSubmitted' value='1' /></div>";
    
    $str .= "\n</form>";
    
    $str .= "\n</div>";
    Any idea why the field values are not seen in the submit ?

    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •