我很惊讶地看到我之前工作正常的代码突然停止返回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">×</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>
答案 0 :(得分:1)
发现问题.. !!
电子邮件字段的ID不能是“电子邮件”,类似的密码字段也不能是“密码”,因为这些是javascript保留的关键字我想。!!