Develop Reference

QuerySelectorAll identifying all but not adding effect to all

I ve created simple html form and I want to animate the input fields labels using javascript. I used querySellectorAll method to identify the objects and console logged querySelectorAll(object).length to check the value and it logged correctly. But effect only working only for first 4 input fields (.form__row) . Why is that and also in the console shows error
Cannot read property 'value' of null
const FloatLabel = (() => {
// add active class
const handleFocus = e => {
const target = e.target;
target.parentNode.classList.add('active');
};
// remove active class
const handleBlur = e => {
const target = e.target;
if (!target.value.trim()) {
target.parentNode.classList.remove('active');
target.value = '';
}
};
// register events
const bindEvents = element => {
const floatField = element.querySelector('.form__input');
floatField.addEventListener('focus', handleFocus);
floatField.addEventListener('blur', handleBlur);
};
// get DOM elements
const init = () => {
const floatContainers = document.querySelectorAll('.form__row');
console.log(floatContainers);
if (floatContainers.length) {
floatContainers.forEach((element) => {
if (element.querySelector('.form__input').value) {
element.classList.add('active');
}
bindEvents(element);
});
};
}
return {
init: init
};
})();
FloatLabel.init();
<main class="signin">
<form action="" class="form__signin">
<section class="form__section">
<span class="form__section-title">
Account information
</span>
<div class="form__container">
<div class="form__row">
<label for="uname" class="form__label">User name</label>
<input type="text" class="form__input" name="uname" id="uname" required/>
</div>
<div class="form__row">
<label for="email" class="form__label">Email</label>
<input type="email" class="form__input" name="email" id="email" required/>
</div>
<div class="form__row">
<label for="password" class="form__label">Password</label>
<input type="password" class="form__input" name="password" id="password" required/>
</div>
<div class="form__row">
<label for="confirm" class="form__label">Confirm password</label>
<input type="password" class="form__input" name="confirm" id="confirm" required/>
</div>
</div>
</section>
<section class="form__section">
<span class="form__section-title">
Personal information
</span>
<div class="form__container">
<div class="form__row">
<label for="mr" class="form__label-radio">Master</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
<label for="ms" class="form__label-radio">Miss</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
</div>
<div class="form__row">
<label for="fname" class="form__label">First name</label>
<input type="text" class="form__input" name="fname" id="fname" required/>
</div>
<div class="form__row">
<label for="lname" class="form__label">Last name</label>
<input type="text" class="form__input" name="lname" id="lname" required/>
</div>
<div class="form__row">
<label for="bdate" class="form__label-select-group">Date of birth</label>
<select name="bdate" id="bdate" class="form__input-select"></select>
<select name="bmonth" id="bmonth" class="form__input-select"></select>
<select name="byear" id="byear" class="form__input-select"></select>
</div>
<div class="form__row">
<label for="bdate" class="form__label">Country</label>
<select name="country" id="country" class="form__input-select"></select>
</div>
</div>
</section>
<section class="form__section">
<span class="form__section-title">
Contact information
</span>
<div class="form__container">
<div class="form__row">
<label for="housenonstreet" class="form__label">House no and street no</label>
<input type="text" class="form__input" name="housenonstreet" id="housenonstreet" required/>
</div>
<div class="form__row">
<label for="city" class="form__label">City</label>
<input type="text" class="form__input" name="city" id="city" required/>
</div>
<div class="form__row">
<label for="postal" class="form__label">Postal Code</label>
<input type="text" class="form__input" name="postal" id="postal" required/>
</div>
<div class="form__row">
<select name="ccode" id="ccode" class="form__input-select"></select>
<label for="" class="form__label">Mobile no</label>
<input type="text" class="form__input">
</div>
</div>
</section>
</form>
</main>

You have a form__row that doesn't have a form__input in it.
<div class="form__row">
<label for="mr" class="form__label-radio">Master</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
<label for="ms" class="form__label-radio">Miss</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
</div>
So you need to check that element.querySelector(".form__input") returns something before trying to use its value.
floatContainers.forEach((element) => {
let input = element.querySelector('.form__input');
if (!input) {
return;
}
if (input.value) {
element.classList.add('active');
}
bindEvents(element);
});
You should have a similar check in bindEvents(). Or you could just change it so that it receives the input as a parameter, rather than the DIV.

JQuery AJAX serialize getting null values

I can't find it out why this is not working.I have done this before a lot of times but this time this is not event working seriously don't know please help me find it out
HTML(signup.html)
<form role="form" id="signupForm">
<div class="form-group">
<label for="first_name" class="control-label"><span
class="glyphicon glyphicon-user"></span> First Name</label> <input
type="text" class="form-control" name="first_name" id="firstName"
for="first_name" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="last_name" class="control-label"><span
class="glyphicon glyphicon-user"></span> Last Name</label> <input
type="text" class="form-control" name="last_name" id="lastName"
for="last_name" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label for="username" class="control-label"><span
class="glyphicon glyphicon-user"></span> Username</label> <input
type="text" class="form-control" name="user_name" id="username"
for="user_name" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="email"><span
class="glyphicon glyphicon-envelope"></span> Email</label> <input
type="email" class="form-control" name="email" id="email"
for="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="mobile_number"><span
class="glyphicon glyphicon-phone"></span> Mobile Number</label> <input
type="text" class="form-control" name="mobile_number"
id="mobile_number" for="mobile_number"
placeholder="Enter Mobile Number">
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-lock"></span>
Password</label> <input type="password" class="form-control"
name="password" id="password" for="password"
placeholder="Enter Password">
<!--<ul>
<li class="help-block red"> *password must be 8 characters long</li>
<li class="help-block red"> *password must contain an Uppercase letter </li>
<li class="help-block red"> *password must contain an Lowercase letter </li>
<li class="help-block red"> *password must contain a special character </li>
<li class="help-block red"> *password must contain a number </li>
</ul>-->
</div>
<div class="form-group">
<label for="confirm_password"><span
class="glyphicon glyphicon-lock"></span> Confirm Password</label> <input
type="password" class="form-control" name="confirm_password"
id="confirmPassword" for="confirm_password"
placeholder="Enter Password again">
</div>
<div class="dropdown form-group">
<label for="security_question"><span class="secQue"></span>
Security Questions </label><br> <select name="security_question"
id="secQue" class="btn btn-default">
<option value=""> security Question? </option>
<option value="what is your school name?"> what is your school name? </option>
<option value="what is your native place name?"> what is your native place name? </option>
<option value="what is your favourite place?"> what is your favourite place? </option>
<option value="what is your favourite food?"> what is your favourite food? </option>
<option value="what is your pet name?"> what is your pet name? </option>
</select>
</div>
<div class="form-group">
<label for="answer"><span class="glyphicon glyphicon-pencil"></span>
Answer</label> <input type="answer" class="form-control" name="answer"
id="answer" for="answer" placeholder="Enter Answer">
</div>
<div class="form-group">
<label for="user_city"><span
class="glyphicon glyphicon-record"></span> City</label> <input type="text"
class="form-control" name="user_city" id="city" for="city"
placeholder="Enter city">
</div>
<div class="form-group">
<button id="createAccount" class="btn btn-info">Submit</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
JQuery(accounts.js)
$(function(){
var bCreateAccount = $('#createAccount');
//Invokes createAccount function
bCreateAccount.on('click',createAccount);
//calls the SignupServlet AJAX request
function createAccount(){
$("#signupForm").on('submit' , function(e) {
e.preventDefault();
$.ajax({
url : 'SignupServlet',
type:'POST',
contentType: 'application/json; charset=utf-8',
data : $('#signupForm').serializeArray(),
success : function(response){
console.log('Response :' +response);
},
error : function(){
console.log('Error :' +error);
}
});
});
}
});
SignupServlet
private void getParameters(HttpServletRequest request,HttpServletResponse response) {
firstName = request.getParameter("first_name");
lastName = request.getParameter("last_name");
userName = request.getParameter("user_name");
email = request.getParameter("email");
mobileNumber = request.getParameter("mobile_number");
password = request.getParameter("password");
confirmPassword = request.getParameter("confirm_password");
securityQuestion = request.getParameter("security_question");
answer = request.getParameter("answer");
userCity = request.getParameter("user_city");
}
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Inside SignupServlet");
getParameters(request, response);
System.out.println("Username : "+userName);
}
I am not able to find out whats the problem with this code.Guyz please help me to get the solution.It will be really helpful.

Your content type is for json but you're not posting the data as json nor is your server expecting json.
Remove the content type parameter from the ajax request so it will be application/x-www-form-urlencoded which is what your server side code seem to be expecting.

ng-submit doesnt work correct in my form with AngularJS

Ive got a form with ng-submit registrating new user,it should update the registration window when the submit button is pressed.But it doesnt do it correct:(
Can you watch my code and say whats wrong?I`m new with AngularJs
Here's the html:
<div class="registration-box" ng-show="registrationShow">
<form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate>
<div class="input-registration-fields">
<label>Enter login:</label>
<input type="text" name="login" class="form-input" ng-model="newUser.login" ng-pattern="loginPattern" required>
<div class="error" ng-if="registrationForm.login.$error.pattern">Enter correct login</div>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>-->
<br>
<label>Enter email:</label>
<input type="text" name="email" class="form-input" ng-model="newUser.email" ng-pattern="emailPattern" required>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>-->
<div class="error" ng-if="registrationForm.email.$error.pattern">Enter correct email</div>
<br>
<label>Enter password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.password" ng-pattern="passwordPattern" required>
<label>Confirm password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-pattern="passwordPattern" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required>
<div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div>
<br> </div>
<div class="registration-checkbox">
<input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> I accept all terms and conditions </div>
<div class="registration-box__logic-buttons">
<button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button>
<button id="cancelRegistrationButton">Cancel</button>
</div>
</form>
</div>
Here's angular function:
$scope.addNewUser = function (userDetails, isvalid) {
if (isvalid) {
$scope.userlist.push({
username: userDetails.login
, password: userDetails.password
, email: userDetails.email
})
// $scope.resetRegistration();
}
console.log($scope.userlist)
}

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.addNewUser = function (userDetails, isvalid) {
$scope.userlist= [];
if (isvalid) {
$scope.userlist.push({
username: userDetails.login,
password: userDetails.password,
email: userDetails.email
});
// $scope.resetRegistration();
}
console.log($scope.userlist);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="registration-box">
<form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate>
<div class="input-registration-fields">
<label>Enter login:</label>
<input type="text" name="login" class="form-input" ng-model="newUser.login" required>
<div class="error">Enter correct login</div>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>-->
<br>
<label>Enter email:</label>
<input type="text" name="email" class="form-input" ng-model="newUser.email" required>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>-->
<div class="error">Enter correct email</div>
<br>
<label>Enter password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.password" required>
<label>Confirm password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required>
<div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div>
<br> </div>
<div class="registration-checkbox">
<input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> I accept all terms and conditions </div>
<div class="registration-box__logic-buttons">
<button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button>
<button id="cancelRegistrationButton">Cancel</button>
</div>
</form>
</div>
</div>
</div>
see the snippet, you might be getting error "cannot set property of undefined" while you push the object in your scope.userlist.

data submitted into database if the informations are invalid using jquery,Ajax

I am new to Jquery and ajax.I want to check if mail id is already exist in database. So I use Ajax to check email is exist or not. I check this condition during submitting a form, so I use onSubmit event.
when I enter submit button the above condition is checked and then inserted into database.but If condition fails that email also inserted into database.
what is the error? I cannot find this error please help me!
my html code is:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form class="form-horizontal" method="post" action = "" onSubmit=" return checkmail();">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
my Jquery function is
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
return true;
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
</script>
check.php
<?php
$con = new mysqli('localhost','root','','registration'); //set coonection to db
$mail = $_POST['emailid'];
$query = mysqli_query($con, "select email from user where email='".$mail."' ");
if(mysqli_num_rows($query) > 0)
{
echo '1'; // if mail exist
}
?>
thank you in advance.

You should do something like this:
<form class="form-horizontal" method="post" action = "" onSubmit="checkmail()">
And put the script right after body tag starts.
I will recommend you to do this from jquery
$("#form-id").on('submit',function(e){
e.preventDefault();
// Validation for data
});

use below code with few modification.
The HTML
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form id="myForm" class="form-horizontal" method="post" action="">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" onClick="checkmail();" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
JQuery Code
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
$("#myForm").submit();
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
Change the id of form accordingly, which kept as myForm

How to submit a form using jQuery?

I want to submit a form using jQuery, so I have 4 fields that needed to be checked, but when I submit, it displays the first alert submit but i doesn't check if the fields are valid or not. What's the error in my code? Much appreciated.
$(document).ready(function(){
$('input[name=subdomain]').keyup(subdomain_check);
$('input[name=password]').keyup(password_strenght);
$('input[name=c_password]').keyup(password_check);
$('input[name=email]').keyup(email_check);
$('#install').on('submit', function(){
alert("submit");
if ($('input[name=subdomain]').valid() == true && $('input[name=password]').valid() == true && $('input[name=c_password]').valid() == true && $('input[name=email]').valid() == true){
alert("TRUE");
return true;
} else {
alert("FALSE");
return false;
}
});
});
Here's The HTML form :
<form class="form-horizontal" method="post" id="install" action="etape2.html" role="form">
<input type="hidden" id="install-element-0" value="install" name="form">
<input type="hidden" id="install-element-1" value="insert" name="action">
<div class="col-md-6">
<input type="text" id="install-element-2" required="" name="title" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-3" required="" name="first_name" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-4" required="" name="last_name" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-5" required="" name="email" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="password" id="install-element-6" required="" class="form-control input-md col-md-6" name="password">
</div>
<div class="col-md-6">
<input type="password" id="install-element-7" required="" class="form-control input-md col-md-6" name="c_password">
</div>
<div class="col-md-6"><input type="text" required="" placeholder="" id="subdomain" name="subdomain" class="form-control input-md col-md-6">
<div class="form-actions col-md-9 col-md-offset-3 text-right">
<input type="submit" id="install-element-9" class="btn btn-primary" name=""value="Valider">
</div>
</div>
</form>
Is there a way to check by the functions return and not by validate ?

Add:
$('#install').on('submit', function(e){
e.preventDefault();
[..]
}
to your code