javascript - document.getElementById().value 返回空字符串而不是文本字段的值

Question

我很惊讶地发现我之前工作正常的代码突然停止返回 document.getElementById('email').value 的值，而是返回一个空字符串。

元素正确加载:

即使在文本框中输入值，元素值也是空字符串:

我不明白，我检查了是否包含冗余链接或文件，并尝试了 HTML 中的不同元素，但没有成功。

请帮忙解决这个问题。

这是 JavaScript 代码

var flagforvalidforPhone = false;
var flagforvalidforPass = true;
var flagforvalidforConfirm = true;
var flagforvalidforCompany = false;
var flagforvalidforAddr = false;
var flagforvalidforName = false;
var flagforvalidforEmail = true;
var flagforidentification = false;

function Details() {
  this.email = "",
    this.firstname = "",
    this.companyname = "",
    this.address = "",
    this.city = "",
    this.state = "",
    this.zip = "",
    this.txtPhone = "",
    this.password = "",
    this.confirm = "",
    this.usertype = ""
}


function registerSuccess(val) {
  if (val[0] == 1) {
    $("#successmessage").show();
    $("#successmessage").empty();
    $("#successmessage").append('<strong>Success! </strong>' + val[1]);
    $("#form1 :input").prop("disabled", true);
  }
  if (val[0] == 0) {

    $("#errormessage").show();
    $("#errormessage").empty();
    $("#errormessage").append('<strong>Error! Some values are incorrect. </strong>' + val[1]);
  }
}

function Fail(val) {

  $("#errormessage").show();
  $("#errormessage").empty();
  $("#errormessage").append('<strong>Error! Some values are incorrect. </strong>' + val[1]);
}

function enabledisableSubmitbutton() {
  $('#registerUserForm input').on('keyup blur', function() {
    if (flagforvalidforPhone && flagforvalidforPass && flagforvalidforConfirm && flagforvalidforCompany && flagforvalidforAddr && flagforvalidforName && flagforvalidforEmail) {
      $('button.btn').prop('disabled', false);
    } else {
      $('button.btn').prop('disabled', 'disabled');
    }
  });
}

function validatefields() {
  $('#txtPhone').blur(function(e) {
    if (document.getElementById('txtPhone').value != "") {
      if (validatePhone('txtPhone')) {
        $('#txtPhone').closest('.input-group').removeClass('has-error').addClass('has-success');
        $('#txtPhoneerror').text("");
        flagforvalidforPhone = true;
      } else {
        $('#txtPhone').closest('.input-group').removeClass('success').addClass('has-error');
        $('#txtPhoneerror').text("Please enter correct telephone number");
        flagforvalidforPhone = false;
      }
    }
  });
  $('#password').blur(function(e) {
    if (document.getElementById('password').value != "" && document.getElementById('confirm').value != "") {
      if (validatePassword()) {
        $('#confirm').closest('.input-group').removeClass('has-error').addClass('has-success');
        $('#confirmerror').text("");
        flagforvalidforPass = true;
      } else if (document.getElementById('password').value.length < 8) {
        $('#password').closest('.input-group').removeClass('success').addClass('has-error');
        $('#passworderror').text("");
        flagforvalidforPass = false;
      } else {
        $('#confirm').closest('.input-group').removeClass('success').addClass('has-error');
        $('#confirmerror').text("Passwords do not match");
        flagforvalidforPass = false;
      }
    }
  });
  $('#confirm').blur(function(e) {
    if (document.getElementById('password').value != "") {
      if (validatePassword()) {
        $('#confirm').closest('.input-group').removeClass('has-error').addClass('has-success');
        $('#confirmerror').text("");
        flagforvalidforConfirm = true;
        flagforvalidforPass = true;
      } else {
        $('#confirm').closest('.input-group').removeClass('success').addClass('has-error');
        $('#confirmerror').text("Passwords do not match");
        flagforvalidforConfirm = false;
        flagforvalidforPass = false;
      }
    }
  });
  $('#companyName').blur(function(e) {
    if (document.getElementById('companyName').value.length < 2) {
      $('#companyName').closest('.input-group').removeClass('success').addClass('has-error');
      $('#companyNameerror').text("Please enter a valid company name");
      flagforvalidforCompany = false;
    } else {
      $('#companyName').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#companyNameerror').text("");
      flagforvalidforCompany = true;
    }
  });
  $('#Address').blur(function(e) {
    if (document.getElementById('Address').value.length < 2) {
      $('#Address').closest('.input-group').removeClass('success').addClass('has-error');
      $('#Addresserror').text("Please enter a valid Address");
      flagforvalidforAddr = false;
    } else {
      $('#Address').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#Addresserror').text("");
      flagforvalidforAddr = true;
    }
  });
  $('#name').blur(function(e) {
    if (document.getElementById('name').value.length < 2) {
      $('#name').closest('.input-group').removeClass('success').addClass('has-error');
      $('#nameerror').text("Please enter a valid name");
      flagforvalidforName = false;
    } else {
      $('#name').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#nameerror').text("");
      flagforvalidforName = true;
    }
  });
  $('#zipCode').blur(function(e) {
    if (document.getElementById('zipCode').value.length < 5) {
      $('#zipCode').closest('.input-group').removeClass('success').addClass('has-error');
      $('#zipCodeerror').text("Please enter a valid zipcode");
      return false;
    } else {
      $('#zipCode').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#zipCodeerror').text("");
    }
  });
  $('#email').blur(function(e) {
    if (document.getElementById('email') != null && !isValidEmailAddress(document.getElementById('email').value)) {
      $('#email').closest('.input-group').removeClass('success').addClass('has-error');
      $('#emailerror').text("Please enter a correct email address");
      flagforvalidforEmail = false;
    } else {
      $('#email').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#emailerror').text("");
      flagforvalidforEmail = true;
    }
  });
  $('#state').blur(function(e) {
    if (document.getElementById('state') != null && document.getElementById('state').value == "") {
      $('#state').closest('.input-group').removeClass('success').addClass('has-error');
      $('#stateerror').text("Please select a state");
      return false;
    } else {
      $('#state').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#stateerror').text("");
    }
  });
  $('#city').blur(function(e) {
    if (document.getElementById('city') != null && document.getElementById('city').value == "") {
      $('#city').closest('.input-group').removeClass('success').addClass('has-error');
      $('#cityerror').text("Please select a city");
      return false;
    } else {
      $('#city').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#cityerror').text("");
    }
  });
  $('#identification').blur(function(e) {
    if (document.getElementById('identification').value.length < 6) {
      $('#identification').closest('.input-group').removeClass('success').addClass('has-error');
      $('#identificationerror').text("Please enter valid identification number");
      return false;
    } else {
      $('#identification').closest('.input-group').removeClass('has-error').addClass('has-success');
      $('#identificationerror').text("");
    }
  });

}

function validatePassword() {
  if (document.getElementById('password').value.length < 8 || document.getElementById('password').value != document.getElementById('confirm').value) {
    return false;
  } else {
    return true;
  }
}

function isValidEmailAddress(emailAddress) {
  var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
  return pattern.test(emailAddress);
}

function Signup() {
  var atLeastOneIsChecked = $('input:checkbox:checked').map(function() {
    return this.value;
  }).get();
  alert(atLeastOneIsChecked);
  if (atLeastOneIsChecked == null) {
    confirm("Please select the type of user..!!")
  } else {
    var det = null;
    det = new Details();
    det.email = document.getElementById('email').value;
    det.firstname = document.getElementById('name').value;
    det.companyname = document.getElementById('companyName').value;
    det.address = document.getElementById('Address').value;
    det.city = document.getElementById('city').value;
    det.state = document.getElementById('state').value;
    det.zip = document.getElementById('zipCode').value;
    det.txtPhone = document.getElementById('txtPhone').value;
    det.password = document.getElementById('password').value;
    det.confirm = document.getElementById('confirm').value;
    var usertypeVal = atLeastOneIsChecked[0];
    for (var usrtype = 1; usrtype < atLeastOneIsChecked.length; usrtype++) {
      usertypeVal += "," + atLeastOneIsChecked[usrtype];
    }
    det.usertype = usertypeVal;
    var str = JSON.stringify(det);
    PageMethods.RegisterUserDetails(str, onSucess, onError);
    setTimeout(fade_out, 200);

    function fade_out() {
      $("#errormessage").fadeOut().empty();
      $("#successmessage").fadeOut().empty();
    }
  }

}

function onSucess(val) {
  if (val[0] == 1) {
    $("#successmessage").show();
    $("#successmessage").empty();
    $("#errormessage").empty();
    $("#successmessage").append('<strong>Success! </strong>' + val[1]);
    //disableCropForm();
    //setcolorforPolygon(drawnPolygon, valuefirst);
    //$('#registerCropForm').trigger("reset");
  }
  if (val[0] == 0) {

    $("#errormessage").show();
    $("#errormessage").empty();
    $("#errormessage").append('<strong>Error! Some values are incorrect. </strong>' + val[1]);
  }
}

function onError(val) {
  $("#errormessage").show();
  $("#errormessage").empty();
  $("#errormessage").append('<strong>Error! Some values are incorrect. </strong>' + val[1]);
}

$(document).ready(function() {
  validatefields();
  enabledisableSubmitbutton();

});
$(function() {
  $('#search').on('keyup', function() {
    var pattern = $(this).val();
    $('.searchable-container .items').hide();
    $('.searchable-container .items').filter(function() {
      return $(this).text().match(new RegExp(pattern, 'i'));
    }).show();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RegisterNewUser.aspx.cs" Inherits="WebContent_RegisterNewUser" %>

  <!DOCTYPE html>

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head id="Head1" runat="server">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/Register.css">
    <script type="text/javascript" src="../javascript/bootstrap.js"></script>

    <script type="text/javascript" src="/WebContent/Javascript/registerNew.js"></script>
    <script type="text/javascript" src="/WebContent/Javascript/countries.js"></script>
    <!-- Website Font style -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/landingPage.css">
    <title>Admin</title>
    <script>
      $.get("HeaderNav.html", function(data) {
        $("#header").replaceWith(data);
      });
    </script>
  </head>

  <body>
    <!-- /.header  -->
    <div id="header">
    </div>

    <!-- /.header end -->
    <div class="container">
      <div class="row main">
        <div class="panel-heading">
          <div class="panel-title text-center">
            <h1 class="title" style="color: #1d0000">Hit the Target</h1>
            <hr />
          </div>
        </div>
        <div class="main-login main-center">
          <div id="messages" class="hide" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
            </button>
            <div id="messages_content"></div>
          </div>
          <div class="alert alert-danger" id="errormessage" style="display: none"></div>
          <div class="alert alert-success" id="successmessage" style="display: none"></div>

          <form id="registerUserForm" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" EnablePageMethods="true"></asp:ScriptManager>

            <div class="form-group">
              <label for="name" class="cols-sm-2 control-label">Your Name</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                  <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" required="required" />
                </div>
                <span class="errorspan" id="nameerror"></span>
              </div>
            </div>

            <div class="form-group">
              <label for="email" class="cols-sm-2 control-label">Your Email</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                  <input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email" />
                </div>
                <span class="errorspan" id="emailerror"></span>
              </div>
            </div>

            <div class="form-group">
              <label for="companyName" class="cols-sm-2 control-label">Company Name</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
                  <input type="text" class="form-control" name="companyName" id="companyName" placeholder="Enter your Company Name" />
                  <span class="glyphicon form-control-feedback"></span>
                </div>
                <span class="errorspan" id="companyNameerror"></span>
              </div>
            </div>

            <div class="form-group">
              <label for="Address" class="cols-sm-2 control-label">Address</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-building fa" aria-hidden="true"></i></span>
                  <input type="text" class="form-control" name="Address" id="Address" placeholder="Enter your Address" required />
                </div>
                <span class="errorspan" id="Addresserror"></span>
              </div>
            </div>

            <div class="form-group">
              <label for="Address" class="cols-sm-2 "></label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon ">State</span>
                  <select onchange="print_city('city',this.selectedIndex);" id="state" name="state" class="form-control" required></select>
                  <span class="input-group-addon ">City</span>
                  <select id="city" name="city" class="form-control" required></select>
                  <script type="text/javascript ">
                    print_state("state");
                  </script>
                  <span class="input-group-addon">Zip</span>
                  <input type="text" class="form-control" name="zipCode" id="zipCode" placeholder="Enter your Zip" required />
                </div>
                <span class="errorspan" id="zipCodeerror"></span>
                <span class="errorspan" id="cityerror"></span>
                <span class="errorspan" id="stateerror"></span>
              </div>
            </div>



            <div class="form-group">
              <label for="txtPhone" class="cols-sm-2 control-label">Phone Number</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-phone fa" aria-hidden="true"></i></span>
                  <input type="password" class="form-control" name="txtPhone" id="txtPhone" placeholder="Enter your Phone Number" required />
                </div>
                <span class="errorspan" id="txtPhoneerror"></span>
              </div>


            </div>
            <div class="form-group">
              <label for="password" class="cols-sm-2 control-label">Password</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-lock fa" aria-hidden="true"></i></span>
                  <input type="password" class="form-control" name="password" id="password" placeholder="Enter your Password" required />
                </div>
                <span class="errorspan" id="passworderror"></span>
              </div>
            </div>

            <div class="form-group">
              <label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-lock fa" aria-hidden="true"></i></span>
                  <input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirm your Password" required />
                </div>
                <span class="errorspan" id="confirmerror"></span>
              </div>
            </div>
            <div class="form-group">
              <h5 style="font-weight: bold" class="control-label">Please select what type of user you are:- </h5>


              <div class="searchable-container">
                <div class="items col-xs-5 col-sm-5 col-md-3 col-lg-3">
                  <div class="info-block block-info clearfix">

                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                      <label class="btn btn-default">
                        <div class="bizcontent">
                          <input type="checkbox" name="var_id[]" autocomplete="off" value="1">
                          <span class="glyphicon glyphicon-ok glyphicon-lg"></span>
                          <h5>Producer</h5>
                        </div>
                      </label>
                    </div>
                  </div>
                </div>
                <div class="items col-xs-5 col-sm-5 col-md-3 col-lg-3">
                  <div class="info-block block-info clearfix">

                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                      <label class="btn btn-default">
                        <div class="bizcontent">
                          <input type="checkbox" name="var_id[]" autocomplete="off" value="2">
                          <span class="glyphicon glyphicon-ok glyphicon-lg"></span>
                          <h5>Applicator</h5>
                        </div>
                      </label>
                    </div>
                  </div>
                </div>
                <div class="items col-xs-5 col-sm-5 col-md-3 col-lg-3">
                  <div class="info-block block-info clearfix">

                    <div data-toggle="buttons" class="btn-group bizmoduleselect">
                      <label class="btn btn-default">
                        <div class="bizcontent">
                          <input type="checkbox" name="var_id[]" autocomplete="off" value="3">
                          <span class="glyphicon glyphicon-ok glyphicon-lg"></span>
                          <h5>Consultant</h5>
                        </div>
                      </label>
                    </div>
                  </div>
                </div>
              </div>


            </div>
            <div class="form-group" style="padding-top:7em">
              <label for="confirm" class="cols-sm-2 control-label">Enter your Identification number</label>
              <div class="cols-sm-10">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-lock fa" aria-hidden="true"></i></span>
                  <input type="text" class="form-control" id="identification" placeholder="Please provide your Identification number" required="required">
                </div>
                <span class="errorspan" id="identificationerror"></span>
              </div>
            </div>

            <div class="form-group ">
              <button type="button" class="btn btn-primary btn-lg btn-block login-button" id="userSubmit" disabled="disabled" onclick="Signup()">Register</button>
            </div>

          </form>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div id="footer">
    </div>
  </body>
  <script>
    $.get("footer.html", function(data) {
      $("#footer").replaceWith(data);
    });
  </script>

  </html>

Answer 1

发现问题..!!

电子邮件字段的 ID 不能是“电子邮件”，同样密码字段不能是“密码”，因为我猜这些是 javascript 的保留关键字。!!