0

これをできる限り説明しようと思います。ユーザーが入力するフォームがあり、ユーザー情報を確認すると、テーブルに出力され、ユーザーは contendEditable 属性を使用してテーブルで直接編集できます。私が抱えている問題は、ユーザーが自分のメールアドレスを編集すると、ブラウザーがそれをメールアドレスとして検出し (入力要素にないため)、メールをフォームに渡さないことです。他のすべての値は問題なく通過します。私は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);

?>

名、姓、ユーザー名、および電話番号は常に正しく出力されます。電子メールが編集されていない場合は正しく印刷され、電子メールが編集されている場合は null として印刷されます。

4

1 に答える 1

0

これは正しくありません。値はテキストとして解析されます。コードを確認し、httpリクエストオブジェクトから正しいフォーム名を解析していることを確認してください。それはあなたの問題を修正するはずです。

于 2013-02-15T20:55:59.193 に答える