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 = /^([az\\d!#$%&'*+\\-\\/=?^_`{|}~\ -\퟿\豈-\﷏\ﷰ-\￯]+(\\.[az\\d!#$%&'*+\\-\\/=?^_`{|}~\ -\퟿\豈-\﷏\ﷰ-\￯]+)*|"((([ \\t]*\\r\\n)?[ \\t]+)?([\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x7f\\x21\\x23-\\x5b\\x5d-\\x7e\ -\퟿\豈-\﷏\ﷰ-\￯]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f\ -\퟿\豈-\﷏\ﷰ-\￯]))*(([ \\t]*\\r\\n)?[ \\t]+)?")@(([az\\d\ -\퟿\豈-\﷏\ﷰ-\￯]|[az\\d\ -\퟿\豈-\﷏\ﷰ-\￯][az\\d\\-._~\ -\퟿\豈-\﷏\ﷰ-\￯]*[az\\d\ -\퟿\豈-\﷏\ﷰ-\￯])\\.)+([az\ -\퟿\豈-\﷏\ﷰ-\￯]|[az\ -\퟿\豈-\﷏\ﷰ-\￯][az\\d\\-._~\ -\퟿\豈-\﷏\ﷰ-\￯]*[az\ -\퟿\豈-\﷏\ﷰ-\￯])\\.?$/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不能为“电子邮件”，密码字段的ID不能为“密码”，因为我猜这是JavaScript保留的关键字。