I have an html form where there are input fields for username, password, confirm-password and email. When i submit the button which is input type="submit" it does not take me to the action method's file rather it refreshes the file. I also wrote javascript to stop refresh by e.preventDefault() but same thing is happening.
This is the stupid html.
<div id="container">
<form action="includes/register.inc.php" method="post" id="form-container" class="register-form">
<h1 id="linklist">Register</h1>
<div class="input-container">
<input type="text" name="username" id="username" placeholder="Username">
<i class="fas fa-user" id="username-logo"></i>
</div>
<div class="input-container">
<input type="password" name="password" id="password" placeholder="Password">
<i class="fas fa-lock" id="password-logo"></i>
</div>
<div class="input-container">
<input type="password" name="confirm_password" id="confirm-password" placeholder ="Confirm password">
<i class="fas fa-lock" id="password-logo"></i>
</div>
<div class="input-container">
<input type="email" name="email" id="email" placeholder="Email">
<i class="fas fa-envelope" id="email-logo"></i>
</div>
<input type="submit" name = 'register' class="submit" value="Register">
<p id="login">
Have an account? Log in
</p>
</form>
</div>
This is the stupid extra javascript which didn't worked.
$(function() {
$('.register-form').on('submit', function(e) {
e.preventDefault();
})
});
This is the file where the form should take me.
<?php
if (isset($_POST["submit"])) {
echo "Am i stupid";
}
else{
header("location: ../register.php");
}
?>
Input type submit has name: register .
Then you only can check next parameters with $_POST[..].
Parameters:
Related
Hello I am creating a Login / Registration system on the same page using PHP and MySQl I am having trouble with the post method and action as it is on the same page. Someone knows how I can resolve this problem.
Below is my code for the login and registration/ signup system the page is separated with a slider using JavaScript, my problem is that I cannot use the Post method and action to save the form in my DB
<html>
<!--WEB-APP Login / Register Page Title-->
<title>Envision: Login/Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--External styling CSS / Font-Family Style / Swiper CSS-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
<!--Custom Styling CSS-->
<link rel="stylesheet" type="text/css" href="CSS/Access.css">
<!--Font Awesome Script -->
<script src="https://kit.fontawesome.com/26011c24ac.js" crossorigin="anonymous"></script>
<!--Custom js script-->
<script defer src="js/Custom_JS/log_slider.js"></script>
<script defer src="js/Custom_JS/selector.js"></script>
</html>
<body>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--Back Button to Landing Page-->
<div class="back">
<button onClick="location.href='Main.php'" class="back-btn">
<i class="fas fa-arrow-alt-circle-left" style="font-size: 36px;">
<div class="back_text">
Back
</div>
</i>
</button>
</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--CONTAINER CONTAINS LOGIN / SIGN-UP SECTIONS-->
<div class="container">
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" action="php/check_login.php" method="post">
<form id="login" class="login_input">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SLIDER TO TOGGLE BTW LOGIN SECTION AND SIGN-UP SECTION-->
<div class="slider_form">
<div class="slider">
<div class="slide_text user_signup">
<h2>
Don't have an account ?
</h2>
<p>
Sign-Up and get instant access to Envision skill & personal competency project management web-application
</p>
</div>
<div class="slide_text user_login">
<h2>
Already have an Account ?
</h2>
<p>
Login and get access to your projects !
</p>
</div>
<div class="slide_btn">
<span class="user_signup">Sign-up</span>
<span class="user_login">Login</span>
</div>
</div>
<!--SLIDER ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
</div>
</body> ``
Your action attribute in the login form is misplaced and is missing in signup. It should be in the form tag.
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" >
<form id="login" class="login_input" action="php/check_login.php" method="post">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
Similarly assuming your signup script is php/signup.php the signup form will be
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" action="php/signup.php" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
In the example above the scripts to handle the signup and login will be done on two separate scripts check_login.php and signup.php. Please change the action attribute with the actual location of the scripts responsible for managing signup and login
I have following html form in ejs file.
How do I pass password and confirmPassword input to checkPassword(javascript function) in another ejs?
the ejs include is done fine.
<% include ./registeruserutil %>
<form action="/user/register" method="POST" onSubmit="return <% checkPassword(this) %>"> <-- This is not form! -->
<div class="input-group mr-2 mb-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-key fa-fw"></i>
</span>
</div>
<input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
</div>
<div class="input-group mr-2 mb-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-key fa-fw"></i>
</span>
</div>
<input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="Confirm Password" required>
</div>
function in other ejs file
<%
checkPassword = function(form)
{
console.log(form);
return true;
}
%>
I actually followed this example.
https://www.geeksforgeeks.org/password-matching-using-javascript/
Why to use ejs for this? Ejs is server-side javascript and we use it for server-side rendered values. You may as well use the javascript code in the same file like this.
<form onSubmit="return checkPassword(this) ">
<div class="input-group mr-2 mb-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-key fa-fw"></i>
</span>
</div>
<input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
</div>
<div class="input-group mr-2 mb-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-key fa-fw"></i>
</span>
</div>
<input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="Confirm Password" required>
</div>
<input type = submit value = "Submit">
</form>
<script>
function checkPassword(form) {
console.log(form.password.value);
console.log(form.confirmPassword.value);
//return true;
}
</script>
I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.
Trying to get Angular-ui-validate to work with my form with bootstrapcss
Here is the HTML
<div class='container' ng-controller='RegisterController as ctrl'>
<form class="form-register" ng-submit="ctrl.register()">
<h2 class=form-user-details">General Information</h2>
<div class="form-group">
<label for="inputEmail1">Email address</label> <input type="email"
class="form-control" ng-model='inputEmail' id="inputEmail1"
placeholder="Email" required autofocus> <span
style='font-size: 10px; color: red'>Note: Your email will
serve as your username!</span>
</div>
<div class="form-group" ng-class="{'has-error': !form.confirm_password.$error.validator}">
<label for="inputPassword">Password</label> <input name='password'
type="password" id='inputPassword' ng-model='password'
class="form-control" placeholder="Enter Password" ng-minlength="6" ng-maxlength="30" required>
<input type="password" class="form-control" name='confirm_password'
placeholder="Re-enter Password" ui-validate="'$value==password'"
ui-validate-watch="'password'">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Create
Account</button>
</form>
</div>
Link to angular-ui-validate https://github.com/angular-ui/ui-validate/blob/master/dist/validate.min.js
Link to example I saw:
password-check directive in angularjs
3rd example down
Seems easy enough but !form.confirm_password.$error.validator is always true without exception
Few things actually happened... First I am stupid and forgot to put ui-validate in my model dependencies...
Then I needed to add a ng-model to the confirm_password field...
And finally I needed to add the name form to my form.
Then it worked...
I want to run this html code only when I click a button:
<div class="modal-bg">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
The button's html code is:
<span class="button" onclick="javascript:buttonClicked();">Sign In</span>
I want to create the buttonClicked() function in order to load the html code above (the form etc).
Any ideas?
<button id="showdiv">Show</button>
<div class="modal-bg hide">
<div id="modal">
<span>Sign In×</span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
<script>
$(document).on("ready", function(e){
$("#showdiv").on("click", function(){
$("div.modal-bg").removeClass("hide");
});
});
</script>
Class hide should have valid css to hide the div. in div with class modal-bg.