Develop Reference

Unable to read event Content from a form in HTML

I am new to HTML and Javascript. I was working on creating a basic login screen.
As I am trying to print the value of the email and the password in the console, I get nothing. Can someone help me out?
document.querySelector('.form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
console.log(email, password);
});
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form"></form>
<div class="form__group">
<label class="form__label" for="email">Email address</label
><input
class="form__input"
id="email"
type="email"
placeholder="you#example.com"
required=""
/>
</div>
<div class="form__group ma-bt-md">
<label class="form__label" for="password">Password</label
><input
class="form__input"
id="password"
type="password"
placeholder="••••••••"
required=""
minlength="8"
/>
</div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</div>
<!-- <script src="/js/login.js"></script> -->

That's because <form class="form"></form> is empty, you should put the inputs inside it.
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form">
<div class="form__group"><label class="form__label" for="email">Email address</label><input class="form__input" id="email" type="email" placeholder="you#example.com" required="" /></div>
<div class="form__group ma-bt-md"><label class="form__label" for="password">Password</label><input class="form__input" id="password" type="password" placeholder="••••••••" required="" minlength="8" /></div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</form>
</div>

Stop form from submitting values to php file if empty

I want to stop my form from submitting and taking an action on going to another php file if the form has no value from at least one of its variables.
<form id="advform" class="" action="advancedsearching.php" method="GET" onsubmit = "return validate()" autocomplete="off" >
<div class="modal-header align-items-center justify-content-center py-2 ">
<h4 class="modal-title">Advanced Search</h4>
</div>
<div class="modal-body ">
<div class="form-group">
<label>Title:</label>
<input type="text" name="title" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>Author:</label>
<input type="text" name="author" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>ISBN:</label>
<input type="text" name="isbn" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>Publisher:</label>
<input type="text" name="publisher" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>Keyword:</label>
<input type="text" name="keyword" class="form-control" autocomplete="off" autocomplete="false" >
</div>
</div>
<div class="modal-footer justify-content-center ">
<input type="submit" class="btn btn-dark" value="Search" style="width:100%;border:1px solid black;">
</div>
</form>
tried adding
<script>
function validate() {
var x;
x = document.getElementById("advform").value;
if (x == "") {
alert("Please Enter a Value");
return false;
};
}
</script>
but it is still submitting

function validate() {
var inputs = document.getElementById('advform').getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].type != "submit" && inputs[i].value != "")
{
return true;
}
alert("Please Enter a Value");
return false;
}
}
<form id="advform" class="" action="advancedsearching.php" method="GET" onsubmit = "return validate()" autocomplete="off" >
<div class="modal-header align-items-center justify-content-center py-2 ">
<h4 class="modal-title">Advanced Search</h4>
</div>
<div class="modal-body ">
<div class="form-group">
<label>Title:</label>
<input type="text" name="title" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>Author:</label>
<input type="text" name="author" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>ISBN:</label>
<input type="text" name="isbn" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>Publisher:</label>
<input type="text" name="publisher" class="form-control" autocomplete="off" autocomplete="false" >
</div>
<div class="form-group">
<label>Keyword:</label>
<input type="text" name="keyword" class="form-control" autocomplete="off" autocomplete="false" >
</div>
</div>
<div class="modal-footer justify-content-center ">
<input type="submit" class="btn btn-dark" value="Search" style="width:100%;border:1px solid black;">
</div>
</form>

Try to do this using an event assigned to the submit button:
document.getElementById("submitBtnId").addEventListener("click", function(event){
// event.preventDefault() will stop your submit.
event.preventDefault();
});
To proceed submitting you can use:
event.currentTarget.submit();

it doesn't work because you have the id in your form, it should be in the input that you want to validate.
other way its to use the required Attribute in the input
<input type="text" name="publisher" class="form-control" autocomplete="off" autocomplete="false" required>
https://www.w3schools.com/tags/att_input_required.asp

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.

Function is not executed when leaving the website

What I am trying to achieve is that if user clicks on close button a function Exit is triggered which displays a form before user leaves the website.But my form is not getting displayed
Javascript
<script type="text/javascript">
window.onbeforeunload = Exit;
function Exit()
{
setTimeout(function() {
setTimeout(function() {
document.getElementById('form').style.display="block";
window.location.href="register.html";
}, 1000);
},1);
return "Message";
}
</script>
Html code
<div class="container">
<form role="form" id="form" method="post" action="register.php" style="display:none">
<div class="form-group">
<label for="username">Name:</label>
<input type="text" name="username" class="form-control" id="username" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="number" name="phone" class="form-control" id="phone" placeholder="Enter phonenumber">
</div>
<div class="form-group">
<label for="reason">Reason to leave:</label>
<textarea class="form-control" name="reason" rows="5" id="comment"></textarea>
</div>
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</form>
</div>

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