Develop Reference

How to disable the button if the input field and file is empty?

I'm here at Stackoverflow again asking for help that will make it a lot easier for me, I want to do the following
I want to disable a button if the two inputs that are (Field and File) are empty
Here is the HTML code
<form method="post" action="#" enctype="multipart/form-data">
<div class="form-group">
<label for="artist_name">Artist name</label>
<textarea type="text" name="artist_name" class="form-control" id="artist_name" aria-describedby="emailHelp" placeholder="Enter artist name"></textarea>
</div>
<div class="form-group">
<label for="artist_biography">Artist biography</label>
<textarea name="artist_biography" class="form-control" id="artist_biography" placeholder="Add biography artist"></textarea>
</div>
<div class="form-group">
<label for="artist_social_fb">Artist Social Facebook</label>
<textarea style="resize:none;" name="artist_social_fb" class="form-control" id="artist_social_fb" placeholder="Enter artist social facebook"></textarea>
</div>
<div class="form-group">
<label for="artist_social_fb">Artist Social Instagram</label>
<textarea style="resize:none;" name="artist_social_ig" class="form-control" id="artist_social_ig" placeholder="Enter artist social instagram"></textarea>
</div>
<div class="form-group">
<label for="artist_social_fb">Artist Social Twitter</label>
<textarea style="resize:none;" name="artist_social_tw" class="form-control" id="artist_social_tw" placeholder="Enter artist social twitter"></textarea>
</div>
<div class="file-upload">
<label style="background-image: linear-gradient(to right, rgb(240, 152, 25) 0%, rgb(237, 222, 93) 51%, rgb(240, 152, 25) 100%);" for="upload" class="file-upload__label">Upload Photo Artist to <?php echo $wo['config']['msc_site_name']; ?> Music</label>
<input type="file" accept=".png,.jpg,.jpeg,.gif,image/*" name="artist_photo" class="file-upload__input" id="artist_photo">
</div>
<img style="text-align: initial;display: none;width: 170px;border-radius: 8px;" id="blah" src="#" alt="your image" />
<button id="button" type="submit" class="btn btn-primary m-t-15 waves-effect">Add new artist</button>
</form>
Here is the JAVASCRIPT Code
$(document).ready(function () {
$('button').attr('disabled', true);
$('textarea').on('keyup', function () {
var text_1 = $("#artist_name").val();
var text_2 = $("#artist_biography").val();
var text_3 = $("#artist_social_fb").val();
var text_4 = $("#artist_social_ig").val();
var text_5 = $("#artist_social_tw").val();
if (text_1 != '' && text_2 != '' && text_3 != '' && text_4 != '' && text_5 != '') {
$('button').attr('disabled', false);
} else {
$('button').attr('disabled', true);
}
});
});

You can use the change event instead of keyup to include changes in any input type. To check if a file input is empty or not, you can check the file length:
var fileEmpty = $('#artist_photo').get(0).files.length === 0;
Now, you can add the same class in all your inputs and add an event listener to listen to changes.
So, your html/php and js would be like:
$(document).ready(function () {
$('button').prop('disabled', true);
$('.form-control').on('change', function () {
var text_1 = $("#artist_name").val();
var text_2 = $("#artist_biography").val();
var text_3 = $("#artist_social_fb").val();
var text_4 = $("#artist_social_ig").val();
var text_5 = $("#artist_social_tw").val();
var fileEmpty = $('#artist_photo').get(0).files.length === 0;
if (text_1 != '' && text_2 != '' && text_3 != '' && text_4 != '' && text_5 != '' && !fileEmpty) {
$('button').prop('disabled', false);
} else {
$('button').prop('disabled', true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" enctype="multipart/form-data">
<div class="form-group">
<label for="artist_name">Artist name</label>
<textarea type="text" name="artist_name" class="form-control" id="artist_name" aria-describedby="emailHelp" placeholder="Enter artist name"></textarea>
</div>
<div class="form-group">
<label for="artist_biography">Artist biography</label>
<textarea name="artist_biography" class="form-control" id="artist_biography" placeholder="Add biography artist"></textarea>
</div>
<div class="form-group">
<label for="artist_social_fb">Artist Social Facebook</label>
<textarea style="resize:none;" name="artist_social_fb" class="form-control" id="artist_social_fb" placeholder="Enter artist social facebook"></textarea>
</div>
<div class="form-group">
<label for="artist_social_fb">Artist Social Instagram</label>
<textarea style="resize:none;" name="artist_social_ig" class="form-control" id="artist_social_ig" placeholder="Enter artist social instagram"></textarea>
</div>
<div class="form-group">
<label for="artist_social_fb">Artist Social Twitter</label>
<textarea style="resize:none;" name="artist_social_tw" class="form-control" id="artist_social_tw" placeholder="Enter artist social twitter"></textarea>
</div>
<div class="file-upload">
<label style="background-image: linear-gradient(to right, rgb(240, 152, 25) 0%, rgb(237, 222, 93) 51%, rgb(240, 152, 25) 100%);" for="upload" class="file-upload__label">Upload Photo Artist to <?php echo $wo['config']['msc_site_name']; ?> Music</label>
<input type="file" accept=".png,.jpg,.jpeg,.gif,image/*" name="artist_photo" class="file-upload__input form-control" id="artist_photo">
</div>
<img style="text-align: initial;display: none;width: 170px;border-radius: 8px;" id="blah" src="#" alt="your image" />
<button id="button" type="submit" class="btn btn-primary m-t-15 waves-effect">Add new artist</button>
</form>
Take a look at this code pen or run the snippet here.

Form Validation using Javascript Regular Expression?

I'm creating a registration form which contains userid, name, email, password, confirm password and affiliation. These fields are validated using regular expression in javascript. I want the error to be displayed in the form and I'm using span tag to achieve this. I don't know where I'm going wrong since its not being validated.
function validation() {
var userid = document.getElementById('userid').value;
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var psw = document.getElementById('psw').value;
var psw_repeat = document.getElementById('psw_repeat').value;
var usercheck = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$/;
var fnamecheck = /^[A-Za-z. ]{3,20}$/;
var lnamecheck = /^[A-Za-z. ]{3,20}$/;
var emailcheck = /^[A-Za-z_]{3,}#[A-Za-z]{3,}[.]{1}[A-Za-z.]{2,6}$/;
var pswcheck = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9##$%^&*]{8,15}$/;
if (usercheck.test(userid)) {
document.getElementById('usererror').innerHTML = "";
} else {
document.getElementById('usererror').innerHTML = "**User id is invalid";
return false;
}
if (fnamecheck.test(fname)) {
document.getElementById('fnameerror').innerHTML = "";
} else {
document.getElementById('fnameerror').innerHTML = "**Should not contain digits and special characters";
return false;
}
if (emailcheck.test(email)) {
document.getElementById('mail').innerHTML = "";
} else {
document.getElementById('mail').innerHTML = "**Email-id is invalid";
return false;
}
if (pswcheck.test(psw)) {
document.getElementById('pass').innerHTML = "";
} else {
document.getElementById('pass').innerHTML = "**Should not contain digits and special characters";
return false;
}
if (psw.match(psw_repeat)) {
document.getElementById('conpass').innerHTML = "";
} else {
document.getElementById('conpass').innerHTML = "**Password doesnot match";
return false;
}
}
<html>
<body>
<form id="reg" method="post" onsubmit="return validation()">
<legend><b>Create an account</b></legend>
<div class="form-group">
<label for="userid">User id</label>
<input type="text" placeholder="Enter your User id" class="form- control" name="userid" id="userid">
<span id="usererror" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" placeholder="Enter your First name" class="form- control" name="fname" id="fname">
<span id="fnameerror" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="email">Email id</label>
<input type="email" placeholder="Enter your Email-id" class="form- control" name="email" >
<span id="mail" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="password" placeholder="Enter Password" class="form- control" id="psw">
<span id="pass" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="psw_repeat">Confirm Password</label>
<input type="password" placeholder="Re-enter Password" class="form-control" id="psw_repeat" >
<span id="conpass" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<div class="dropdown">
<label for="affiliation">Affiliation</label>
<select class="form-control">
<option value="alumni" name="affiliation">Alumni</option>
<option value="faculty" name="affiliation">Faculty</option> <option value="student" name="affiliation">Student</option>
</select>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" id="submit" name="submit">Register</button>
<button type="reset" class="btn btn-danger">Cancel</button>
</div>
</form>
</body>
</html>

#lname does not exist, so document.getElementById('lname') is null; trying to look up .value on that is breaking your function.

lname this filed is missing in js file and also some filed not have id value in html file.
<html>
<body>
<form id="reg" method="post" onsubmit="return validation()">
<legend><b>Create an account</b></legend>
<div class="form-group">
<label for="userid">User id</label>
<input type="text" placeholder="Enter your User id" class="form-control" name="userid" id="userid">
<span id="usererror" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" placeholder="Enter your First name" class="form-control" name="fname" id="fname">
<span id="fnameerror" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="email">Email id</label>
<input type="email" placeholder="Enter your Email-id" class="form-control" name="email" id="email">
<span id="mail" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="password" placeholder="Enter Password" class="form-control" id="psw">
<span id="pass" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<label for="psw_repeat">Confirm Password</label>
<input type="password" placeholder="Re-enter Password" class="form-control" id="psw_repeat">
<span id="conpass" class="text-danger font-weight-bold"></span>
</div>
<div class="form-group">
<div class="dropdown">
<label for="affiliation">Affiliation</label>
<select class="form-control">
<option value="alumni" name="affiliation">Alumni</option>
<option value="faculty" name="affiliation">Faculty</option>
<option value="student" name="affiliation">Student</option>
</select>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" id="submit" name="submit">Register</button>
<button type="reset" class="btn btn-danger">Cancel</button>
</div>
</form>
</body>
</html>
//Script file
function validation() {
var userid = document.getElementById('userid').value;
var fname = document.getElementById('fname').value;
// var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var psw = document.getElementById('psw').value;
var psw_repeat = document.getElementById('psw_repeat').value;
var usercheck = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$/;
var fnamecheck = /^[A-Za-z. ]{3,20}$/;
//var lnamecheck = /^[A-Za-z. ]{3,20}$/;
var emailcheck = /^[A-Za-z_]{3,}#[A-Za-z]{3,}[.]{1}[A-Za-z.]{2,6}$/;
var pswcheck = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9##$%^&*]{8,15}$/;
if (usercheck.test(userid)) {
document.getElementById('usererror').innerHTML = "";
} else {
document.getElementById('usererror').innerHTML = "**User id isinvalid";
return false;
}
if (fnamecheck.test(fname)) {
document.getElementById('fnameerror').innerHTML = "";
} else {
document.getElementById('fnameerror').innerHTML = "**Should not contain digits and special characters";
return false;
}
if (emailcheck.test(email)) {
document.getElementById('mail').innerHTML = "";
} else {
document.getElementById('mail').innerHTML = "**Email-id is invalid";
return false;
}
if (pswcheck.test(psw)) {
document.getElementById('pass').innerHTML = "";
} else {
document.getElementById('pass').innerHTML = "**Should not contain digits and special characters";
return false;
}
if (psw.match(psw_repeat)) {
document.getElementById('conpass').innerHTML = "";
} else {
document.getElementById('conpass').innerHTML = "**Password doesnot match";
return false;
}
}

Form validation change input value

I am using Javascript regualar expression for form validation in my project.Once the validation is completed without any error and while clicking submit button the form should submit and I need to change the submit value to 'please wait..'.
I have tried two methods.
Method 1:By changing the submit value
Method 2:Hide/show method using jquery
Both the methods are not working and i couldn't find the error to.Can anyone help me with this?
/*
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: 12.991011, lng: 77.721225};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
*/
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
//alert("ok");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
//document.getElementById("").innerHTML='Please wait..';
}
}
/*$(document).ready(function(){
$('form').submit(function(){
if(validationIsTrue()){
(":button").css('display':'none');
('#Button1').css('display':'block');
}
else{
return false;
}
});
});
$("#form_id").on("submit", function(e){
var $this = $(this);
if(this.checkValidity()) {
e.preventDefault();
alert('ok');
//$this.parents(".form-wrap").hide();
//$(".success-msg").removeClass("hidden")
}
});
*/
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* Demo styles */
.iframe-container{
margin-top:50px;
width:100%;
}
/*form */
.content{
background-image:url("contact-us (1).jpg");
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0 0 0 400px rgba(185, 212, 212, 0.35);
/* Needed to position the navbar */
}
.form-group{
color:white;
}
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
.contact{
color:#BF2626;
font-weight:bold;
margin-top:25px;
}
input,textarea{
margin-left:5px;
}
input:focus{
background-color:#b9dbe2;
color:black;
}
label{
color:black;
margin-top:4px;
}
.code{
color:black;
font-weight:bold;
margin-left:7px;
}
h3{
margin-left:-80px;
}
#securitycode{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="#" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>

function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!="") && (name.match(filt)) && (number.length==10) && (filter.test(email)) && (country.match(filt)) && (city.match(filt)) && (security == securitycode))
{
alert("ok");
$('#submit_btn').val("Please wait");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()" id="submit_btn"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>

Replace your pagetest() function with this function code below and check, I'm using jQuery call here after validation check:
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
$('#Button1').hide();
$('input[name=sub]').show();
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
$('#Button1').show();
$('input[name=sub]').hide();
// $('#form_id').submit(); //uncomment if want to submit after validation
}
}

document.getElementById().value returning empty string instead of value of textfield

I am surprised to see my code which was working fine earlier all of a sudden stopped returning value for document.getElementById('email').value and returning an empty string instead.
Element getting loaded properly :
Element value is coming empty string even with value being entered in textbox :
I don't understand I checked for redundant links or files being included and tried different elements in HTML but no luck.
Please help with this.
Here is the JavaScript code
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>

Found the issue..!!
The id of the email field cannot be 'email' and similarly for password field cannot be 'password' because these are reserved keywords by javascript I guess.!!

How to modify code to work with my database

New Code(not working) :
(index.php) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Workorder System</title>
<!-- Bootstrap core CSS -->
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Begin page content -->
<div class="container content">
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<h1 class="text-center title">Workorder System </h1>
</div>
<h2> </h2>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
<th width="15%">Model #</th>
<th width="38%">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td>
<input type="text" data-type="model" name="modelName[]" id="modelName_1" class="form-control autocomplete_txt" autocomplete="off">
</td>
<td>
<input type="text" data-type="category" name="category[]" id="categoryName_1" class="form-control autocomplete_txt" autocomplete="off">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='row'>
<div class='col-xs-12 col-sm-3 col-md-3 col-lg-3'>
<button class="btn btn-danger delete" type="button">- Delete</button>
<button class="btn btn-success addmore" type="button">+ Add More</button>
</div>
<div class='col-xs-12 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-sm-5 col-md-5 col-lg-5'>
<form class="form-inline">
<div class="form-group">
<label>Subtotal: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Tax: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="tax" placeholder="Tax" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Tax Amount: </label>
<div class="input-group">
<input type="number" class="form-control" id="taxAmount" placeholder="Tax" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
<div class="input-group-addon">%</div>
</div>
</div>
<div class="form-group">
<label>Total: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="totalAftertax" placeholder="Total" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Amount Paid: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control" id="amountPaid" placeholder="Amount Paid" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
<div class="form-group">
<label>Amount Due: </label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="form-control amountDue" id="amountDue" placeholder="Amount Due" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">
</div>
</div>
</form>
</div>
</div>
<h2>Notes: </h2>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>
<div class="form-group">
<textarea class="form-control" rows='5' id="notes" placeholder="Your Notes"></textarea>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/auto.js"></script>
</body>
</html>
(auto.js) :
//adds extra table rows
var i=$('table tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox"/></td>';
html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="model" name="modelName[]" id="modelName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" data-type="category" name="category[]" id="categoryName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '</tr>';
$('table').append(html);
i++;
});
//to check all checkboxes
$(document).on('change','#check_all',function(){
$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});
//deletes the selected table rows
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('#check_all').prop("checked", false);
calculateTotal();
});
//autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
type = $(this).data('type');
if(type =='productCode' )autoTypeNo=0;
if(type =='model' )autoTypeNo=1;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[autoTypeNo],
value: code[autoTypeNo],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#itemNo_'+id[1]).val(names[0]);
$('#modelName_'+id[1]).val(names[1]);
$('#cateogryName_'+id[1]).val(names[1]);
calculateTotal();
}
});
});
//price change
$(document).on('change keyup blur','.changesNo',function(){
id_arr = $(this).attr('id');
id = id_arr.split("_");
quantity = $('#quantity_'+id[1]).val();
price = $('#price_'+id[1]).val();
if( quantity!='' && price !='' ) $('#total_'+id[1]).val( (parseFloat(price)*parseFloat(quantity)).toFixed(2) );
calculateTotal();
});
$(document).on('change keyup blur','#tax',function(){
calculateTotal();
});
//total price calculation
function calculateTotal(){
subTotal = 0 ; total = 0;
$('.totalLinePrice').each(function(){
if($(this).val() != '' )subTotal += parseFloat( $(this).val() );
});
$('#subTotal').val( subTotal.toFixed(2) );
tax = $('#tax').val();
if(tax != '' && typeof(tax) != "undefined" ){
taxAmount = subTotal * ( parseFloat(tax) /100 );
$('#taxAmount').val(taxAmount.toFixed(2));
total = subTotal + taxAmount;
}else{
$('#taxAmount').val(0);
total = subTotal;
}
$('#totalAftertax').val( total.toFixed(2) );
calculateAmountDue();
}
$(document).on('change keyup blur','#amountPaid',function(){
calculateAmountDue();
});
//due amount calculation
function calculateAmountDue(){
amountPaid = $('#amountPaid').val();
total = $('#totalAftertax').val();
if(amountPaid != '' && typeof(amountPaid) != "undefined" ){
amountDue = parseFloat(total) - parseFloat( amountPaid );
$('.amountDue').val( amountDue.toFixed(2) );
}else{
total = parseFloat(total).toFixed(2);
$('.amountDue').val( total );
}
}
//It restrict the non-numbers
var specialKeys = new Array();
specialKeys.push(8,46); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode;
console.log( keyCode );
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
return ret;
}
//datepicker
$(function () {
$('#invoiceDate').datepicker({});
});
(ajax.php)
<?php
require_once 'config.php';
if(!empty($_POST['type'])){
$type = $_POST['type'];
$name = $_POST['name_startsWith'];
$query = "SELECT model, category FROM products where UPPER($type) LIKE '".strtoupper($name)."%'";
$result = mysqli_query($con, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$name = $row['model'].'|'.$row['category'];>>
array_push($data, $name);
}
echo json_encode($data);exit;
}
This is a sample of what I am trying to get to function. When you click in the "Model #" field, it should auto correct from a "products" database with the needed data. Right now it has "model,category" but the end result should have :
model, category, subcategory, description, cost, retail
I cannot for the life of me figure out how to fix this to where it autocompletes correctly :(

in the first code there are two required vars, the name and type with which the query is made in the database to return the information, as I see in the second code not you are considering .. before creating the query.. also you could check console log with dev tools on your browser to get error
if(!empty($_POST['type'])){
$type = $_POST['type'];
$name = $_POST['name_startsWith'];
} else { return false; }
$query = "SELECT ID, model, category, subcategory, description, cost, retail FROM products where UPPER($type) LIKE '".strtoupper($name)."%'";
....
the type var is the data-type in input type element using in js and send it as aditional post var .. check here:
html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
and here
$(document).on('focus','.autocomplete_txt',function(){
type = $(this).data('type');
the type and name vars are send here in the ajax call
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
and those vars are "captured" using php $_POST you see.. in the ajax call the data option make 2 vars name_startsWith, type and in the php code $type = $_POST['type']; $name = $_POST['name_startsWith'];