Hey need help with this
I'm try to coding simple login page
and im trying to pass the email and password as post to login.php
when I click on submit only send me to the page without "email and password " value
<div class="logo signin-label fade-in"> <style="width: 100px;"> </div>
</div>
<form action="login.php" method="POST" id="Login">
<div class="form-group">
<input class="form-control" placeholder="email id" id="email" type="email">
</div>
<div class="form-group">
<input class="form-control" id="password" placeholder="email password" type="password">
</div>
<div class="forgot">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
Form field need "name" attribute, please try with this:
<form action="login.php" method="POST" id="Login">
<div class="form-group">
<input class="form-control" placeholder="email id" id="email" name="email" type="email">
</div>
<div class="form-group">
<input class="form-control" name="password" id="password" placeholder="email password" type="password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
Related
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>
I have created a simple form for contact-us section on a website. For submit button, initially I used type=submit but later came across a suggestion to change it to type=button. However the code is not working for submit as well as reset. Can someone please help to point out whats wrong in my code below.
function submitForm() {
var frm = document.getElementById('contactFormAP');
alert('H2');
frm.submit(); // Submit the form
alert('H3');
frm.reset(); // Reset form data
return false;
}
<form class="contactForm" action="email_form.php?do=send" method="post" role="form" id="contactFormAP">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" id="contactnumber" placeholder="Contact Number" data-rule="minlen:10" data-msg="Please enter correct contact number with country code" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="text-center">
<input type="button" value="Submit" id="submitbtn" onclick="submitForm()">
</div>
</form>
Use the OnSubmit-Listener instead:
https://www.w3schools.com/jsref/event_onsubmit.asp
Hi I have a website which was developed using php and it contains contact form where users submit their data. Down below is the code for contact form
<div class="form">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm" >
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id ="ss" class="text-center" >
<button type="submit" value="submit" name="submit" title="Send Message" >SUBMIT</button>
</div>
</form>
</div>
After submitting the form I want to clear the fields and I tried the below code
<script>
function myFunction() {
document.getElementById("innov-contact").reset();
}
</script>
From the above when I try to save the form it refreshes the fields but it does not save in database and even I tried the below code
<script type="text/javascript">
$("#innov-contact")[0].reset();
</script>
But it does not clear the form and even I tried the below code
$(document).ready(function() {
var options = {
target: '#output1',
clearForm: true // clear all form fields after successful submit
};
// bind form using 'ajaxForm'
$('#innov-contact').ajaxForm(options);
});
Please let me any other method to clear the form
you can use trigger() to reset the form with jQuery
$('#form_id').trigger("reset");
This is from the jQuery Form Plugin docs.
$('#innov-contact').clearForm();
If you want to clear any specific fields.
$('#innov-contact #email').clearFields();
$('.form-control').val('');
This will clear all form fields with the class form-control.
Add 1 input type reset in form and click after ajax request:
$(document).ready(function() {
$('#innov-contact').submit((e) => {
e.preventDefault();
//Ajax...
$("#reset").click();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm">
<div class="form-row">
<div class="form-group col-lg-6">
<input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
</textarea>
<div class="validation"></div>
</div>
<p style="-webkit-margin-collapse: discard;">Captcha: </p>
<p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
<div class="validation"></div>
<div id="ss" class="text-center">
<button type="submit" value="submit" name="submit" title="Send Message">SUBMIT</button>
</div><input type="reset" id="reset">
</form>
use this $("#fname").val(""); it will clear the value in the 'fname' input field. Like this you can clear every field.
I am making form and I have some problems validating it.
HTML:
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Javascript:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email")=="" || document.getElementById("password") || document.getElementById("last_name") || document.getElementById("first_name"))
return false;
});
</script>
Even with this javascript code added the form still submits to signup.php.
And should I add extre checks in php aswell.
//add return function on it
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="button" onclick="return validation()" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
<script>
public function validation(){
if(document.getElementById("email").value=="" || document.getElementById("password").value="" || document.getElementById("last_name").value="" || document.getElementById("first_name")).value==""{
return false; }
else {
document.getElementById("regForm").submit();
}
}
</script>
or use this
//add required on input it will automatically return message
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email" required>
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass" required>
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass" required>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name" required>
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Replace your code with this
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
You should only add "required" in the html tag in tags. It'll automatically add display text that the field is required.
Like this:
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
You forgot to add .value to check the values of inputs. Also, you have to use preventDefault in submit function to prevent form submission:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email").value == "" || document.getElementById("password").value == "" || document.getElementById("last_name").value == "" || document.getElementById("first_name").value == "")
event.preventDefault();
});
</script>
Since you're using jquery, you can also use its selector:
<script type="text/javascript">
$("#regForm").submit(function(event){
if($("#email").val() == "" || $("#password").val() == "" || $("#last_name").val() == "" || $("#first_name").val() == "")
event.preventDefault();
});
</script>
what about using event.preventDefault() like this:
<script type="text/javascript">
$("#regForm").submit(function(event){
event.preventDefault();
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
return false;
});
</script>
Hi I am new to Angular Js and I am trying to make a Login page where I Have three forms which are as follows:
Login Form
Create New Account form
Forgot password Form.
All this forms are present in one HTML Page.HTML page for the login(login.html) is as follows:
<form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController" >
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn-success uppercase">Login</button>
Forgot Password?
</div>
<div class="create-account">
<p>
Create an account
</p>
</div>
</form>
<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
<h3>Sign In</h3>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
</div>
</form>
<form class="register-form" action="select_pricing.html" method="post">
<h3>Create Account</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Full Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc" /> I agree to the <a href="#">
Terms of Service </a> & <a href="#">
Privacy Policy </a>
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
</div>
</form>
The Angular Controller for the Forget password is as follows
var myApp = angular.module('Login_Upquire_Angular',[]);
myApp.controller("ForgetPassword",['$scope',function($scope){
$scope.passwordGenerator=function(){
var email_id=$scope.ForgetPassEmailId;
if (email_id=="abc#gmail.com"){
console.log("Reset Request is accepted");
window.location="/login.html";
}
}
}]);
As you can see based on my Angular js File, I want to check whether the given password matches with abc#gmail.com, if yes then it should print on my console "REset Request is accepted" and take me back to login page(/login.html) and to the form element namely login-form. Yet I am getting the following error
Cannot POST /login.html
Can somebody help me with this? I have tried but couldn't find a solution for it.
You'll have to do some asynchronous validation. Something like this: http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/