0

我将尽力描述这一点。我有一个用户填写的表格，当它确认用户信息时，它会在表格上打印出来，用户可以使用竞争编辑属性直接在表格上编辑它。我遇到的问题是，如果用户编辑他/她的电子邮件地址，浏览器会将其检测为电子邮件地址（因为它不在输入元素中）并且不会通过表单传递电子邮件。所有其他值都很好。我正在使用 PHP 处理表单并打印出字段以确保它正确通过。

确认页面应该是这样的：

John,Smith,JSMITH,abc@123.com,111-222-3345

但它看起来像这样：

John,Smith,JSMITH,null,111-222-3345

有什么建议么？

如果我发布我的代码会更容易，所以这里是：

HTML：

<html>
  <head>
    <script type = "text/javascript" src = "ext.js"></script>
  </head>
  <body>
    <form name = "setupForm" id = "setupForm" action = "confirmSetup.php" method = "post">
      <div id = "confirmInfo"></div>
      <div id = "hiddenFields"></div>
    </form>
  </body>
</html>

/* I didn't put my full code on here as it is way too long.
   But this HTML document is what is shown after input fields 
   have been previously submit, and this page is just to confirm 
   the user input.
*/

JS：

function verifyInfo(){ // This function is called when user submits all his info
  var firstname = document.getElementById("txtFirstname").value;
  var lastname = document.getElementById("txtLastname").value;
  var username = document.getElementById("hdnUsername").value;
  var email = document.getElementById("txtEmail").value;
  var phone = document.getElementById("txtPhone").value;
  var output = "";
  output += "<table id = 'confirm'>";
  output += "<tr>";
  output += "  <th>Firstname</th>";
  output += "  <td id = 'tdFirstname'>";
  output += "    <div onkeyup = 'updateUsername()' contentEditable>" + firstname + "</div>";
  output += "  </td>";
  output += "</tr>";
  output += "<tr>";
  output += "  <th>Lastname</th>";
  output += "  <td id = 'tdLastname'>";
  output += "    <div onkeyup = 'updateUsername()' contentEditable>" + lastname + "</div>";
  output += "  </td>";
  output += "</tr>";
  output += "<tr>";
  output += "  <th>Username</th>";
  output += "  <td id = 'tdUsername'>" + username + "</td>";
  output += "</tr>";
  output += "<tr>";
  output += "  <th>Email</th>";
  output += "  <td id = 'tdEmail'>";
  output += "    <div style = 'min-width:1px;' onkeyup = 'verifyEmail(this.parentNode.id,event)' contentEditable>" + email + "</div>";
  output += "    <div id = 'validInvalid'>";
  output += "      <span class = 'dgreen'><br/>Valid email!</span>";
  output += "    </div>";
  output += "  </td>";
  output += "</tr>";
  output += "<tr>";
  output += "  <th>Phone</th>";
  output += "  <td id = 'tdPhone'>";
  output += "    <div style = 'min-width:1px;' onkeyup = 'verifyPhone(this.parentNode.id,event)' contentEditable>" + phone + "</div>";
  output += "    <div id = 'validInvalid1'>";
  output += "      <span class = 'dgreen'><br/>Valid phone!</span>";
  output += "    </div>";
  output += "  </td>";
  output += "</tr>";
  output += "</table>";
  output += "<input type = 'button' name = 'submitSetup' id = 'submitSetup' value = 'Get Set Up!' onclick = 'goToConfirm()'/>";
  document.getElementById("confirmInfo").innerHTML = output;
}

/* The way that function works is it takes the inputted text,
   and places it into the table. This table enables the user to dynamically make any
  changes necessary right onto the table. The username is created from first initial
  and last name, which is called on the 'updateUsername()' function, which I am leaving
  out.
*/

function verifyEmail(id,e){
  var unicode = e.charCode ? e.charCode : e.keyCode;
  if((unicode < 37 || unicode > 40) && unicode != 9){ // This doesn't allow email to be verified if the arrow keys, or tab key is pressed
    var email = document.getElementById(id).firstChild.firstChild.nodeValue;
    var emailFilter = /^[^0-9][A-z0-9_]+([.]A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/;
    if(!emailFilter.test(email)){ // Checks if valid email
      document.getElementById("validInvalid").innerHTML = "<span class = 'red'><br/>Not a valid email!</span>";
    }else{
      document.getElementById("validInvalid").innerHTML = "<span class = 'dgree'><br/>Valid email!</span>";
    }
  }
  disableButton(); //If email or phone is invalid, button will be disabled
}

function verifyPhone(id,e){
  var unicode = e.charCode ? e.charCode : e.keycode;
  if((unicode < 37 || unicode > 40) && unicode != 9)){
    var phone = document.getElementById(id).firstChild.firstChild.nodeValue;
    if(phone.length > 12){ // Doesn't let user put it more than 12 characters (xxx-xxx-xxxx)
      var difference = phone.length - 12;
      phone = phone.substr(0,phone.length - difference);
      document.getElementById(id).firstChild.firstChild.nodeValue = phone;
    }
    var phoneFilter = /\d{3}\-\d{3}\-\d{4}/;
    if(!phoneFilter.test(phone)){ // Checks for valid phone number
      document.getElementById("validInvalid1").innerHTML = "<span class = 'red'><br/>Not a valid phone!</span>";
    }else{
      document.getElementById("validInvalid1").innerHTML = "<span class = 'dgreen'><br/>Valid phone!</span>";
    }
  }
  disableButton();
}

function disableButton(){
  var email = document.getElementById("tdEmail").firstChild.nextSibling.firstChild.className;
  var phone = document.getElementById("tdPhone").firstChild.nextSibling.firstsChild.className;
  if(email == "red" || phone == "red"){
    document.getElementById("submitSetup").disabled = true;
  }else{
    document.getElementById("submitSetup").disabled = false;
  }
}

function goToConfirm(){ //This is the function that goes to confirmsetup.php. it works fine if email isn't edited in table, but if email is edited, it doesn't work
  var firstname = document.getElementById("tdFirstname").firstChild.firstChild.nodeValue;
  var lastname = document.getElementById("tdLastname").firstChild.firstChild.nodeValue;
  var username = document.getElementById("tdUsername").firstChild.nodeValue;
  var email = document.getElementById("tdEmail").firstChild.firstChild.nodeValue;
  var phone = document.getElementById("tdPhone").firstChild.firstChild.nodeValue;
  var hiddenfields = document.getElementById("hiddenFields");
  var input = "<input type = 'hidden' name = 'hdnFirstname' id = 'hdnFirstname' value = '"+firstname+"'/>";
     input += "<input type = 'hidden' name = 'hdnLastname' id = 'hdnLastname' value = '"+lastname+"'/>";
     input += "<input type = 'hidden' name = 'hdnUsername' id = 'hdnUsername' value = '"+username+"'/>";
     input += "<input type = 'hidden' name = 'hdnEmail' id = 'hdnEmail' value = '"+email+"'/>";
     input += "<input type = 'hidden' name = 'hdnPHone' id = 'hdnPhone' value = '"+phone+"'/>";
  hiddenFields.innerHTML = input;
  document.setupForm.submit();
}

/* That is the end of my javascript file, it's a lot,
   but hopefully you can understand it
*/

最后，最终的 php 脚本很简单：

<?php

$fn = $_POST['hdnFirstname'];
$ln = $_POST['hdnLastname'];
$un = $_POST['hdnUsername'];
$em = $_POST['hdnEmail'];
$ph = $_POST['hdnPhone'];

die($fn.",".$ln.",".$un.",".$em.",".$ph);

?>

名字、姓氏、用户名和电话总是正确打印出来。当电子邮件未编辑时，它会正确打印，当电子邮件被编辑时，它会打印为空。

4

1 回答 1

0

这是不正确的，值被解析为文本。请检查代码并确保从 http 请求对象解析正确的表单名称。它应该可以解决您的问题。

于 2013-02-15T20:55:59.193 回答