We Keep Coding

html form's action method is not taking to the file

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:

Pop up window won't show up for button action

I am currently working on a web application that required a registration form. After the data entered in and click the button to submit the data, a pop up window will show up with specific data entered in the form and then the form can be reset for new entry.
I am working the project in VS 17 and I've used MVC empty project template to make my web application.
The coding as follow:
HTML code used for button action
<button type="submit" class="registerbtn" id="register" onclick="button_action()">Register</button>
<script>button_action();</script>
JS file for pop up window :
function button_action() {
$(document).ready(function () {
$("#register").submit(function () {
$("#myModal").modal();
});
});
}
HTML code used to create pop up window modal :
#* model *#
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
#* model content *#
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px" ;>
<h3> THANK YOU FOR REGISTERING WITH NIKINI LEARNING </h3>
</div>
#* body of the model *#
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
#* Customer Registration Reference No. display*#
<div class="form-group">
<label for="crf">
<span class="glyphicon glyphicon-user"></span>
Customer Registration No. :
</label>
<input type="text" class="form-control" id="crf" />
</div>
#* Customer Name DIsplay*#
<div class="form-group">
<label for="name">
<span class="glyphicon glyphicon-user"></span>
Customer Name :
</label>
<input type="text" class="form-control" id="name" />
</div>
#* Customer Contact No. Display*#
<div class="form-group">
<label for="contact">
<span class="glyphicon glyphicon-user"></span>
Contact No. :
</label>
<input type="text" class="form-control" id="contact" />
</div>
#* Customer Email Display*#
<div class="form-group">
<label for="email">
<span class="glyphicon glyphicon-user"></span>
Email address :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered course display*#
<div class="form-group">
<label for="course">
<span class="glyphicon glyphicon-user"></span>
Registered course :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered date display*#
<div class="form-group">
<label for="date">
<span class="glyphicon glyphicon-user"></span>
Registered date :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course duration display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course duration :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course price display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course price :
</label>
<input type="text" class="form-control" id="email" />
</div>
<h4><i>Please use your Customer Registration Reference Number (CRF) to do the payment </i></h4>
</form>
#* footer of the model *#
<div class="modal-footer">
#* edit button *#
<button type="button" class="btn btn-submit btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-edit"></span> edit
</button>
#* new button *#
<button type="reset" class="btn btn-submit btn-default pull-right" data-dismiss="modal">
<span class="glyphicon glyphicon-ok"></span> New
</button>
</div>
</div>
</div>
</div>
</div>
</div>
When I click the button without filling the fields in the form, pop up window showed up. So, I've changed the click function in the JS code with submit. Then the pop up window won't show up when the data is not filled in required field but even after the data is filled and click the submit button, the form just reset and pop up window won't show up.
I need some advice to rectify this problem since this took so much time to complete my project.
Any other methods that I can use to do the same job also preferred.
Here's the whole code of the view for those who need:
#{
ViewBag.title = "Customer Registration";
Layout = "~/Views/Shared/Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/register.css" rel="stylesheet" />
<link href="~/Content/nav.css" />
<script src="~/Scripts/layout.js"></script>
<script src="~/Scripts/register.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<navbar>
<div class="topnav" id="myTopnav">
Login
Payment
Customer Registration
Course Details
User Info
<a href="javascript:void(0);" class="icon" onclick="myfunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</navbar>
#* Register form *#
<form>
#* Main container *#
<div class="container">
#* form heading *#
<p class="my_heading1">
<b>
Customer Registration Form
</b>
</p>
<p class="my_text_type1">
<i>
Please fill out the form to Register in Nikini Learning Courses.
</i>
</p>
#* Data entry container *#
<div class="entry_container">
#* status entry *#
<label for="status"><b>Status</b></label>
<input type="text" name="status" required />
#*Name Entry *#
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required />
#*Name with initials entry *#
<label for="namei"><b>Name with initials</b></label>
<input type="text" placeholder="Your name with initials" name="namei" required />
#*NIC entry*#
<label for="nic><b>NIC / Passport No. </b></label>
<input type="text" placeholder="Enter your NIC / Passport No." name="nic" required />
#*Contact No entry*#
<label for="contact"><b>Contact No.</b></label>
<input type="text" placeholder="Enter your Mobile / Land line No." name="contact" required />
#*Email entry*#
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
#*Involvement type entry*#
<label for="type"><b>Type:</b></label>
<div class="checkboxes">
<input type="checkbox" name="person" value="person" /><label>Personal</label>
<input type="checkbox" name="comp" value="comp" /><label>Company</label>
</div>
#*Address entry*#
<label for="address"><b>Address</b></label>
<input type="text" placeholder="Enter your address here" name="address" required />
#*Company / Institute Name entry*#
<label for="Com_In"><b>Company / Institute Name</b></label>
<input type="text" placeholder="Enter your Company / Institute Name" name="Com_In" required />
#*Job / Field of Study entry*#
<label for="job_field"><b>Job title / Field of study</b></label>
<input type="text" placeholder="Enter your Job title / Field of Study" name="job_field" required />
#*Course date entry*#
<label for="date"><b>Starting date of the course</b></label>
<input type="date" name="date" required />
#*Course Name entry*#
<label for="course"><b>Course Name</b></label>
<input type="text" placeholder="Enter the course name" name="course" required />
<p></p>
#*Price entry*#
<label for="price"><b>Course price</b></label>
<input type="text" name="price" required />
<p></p>
#*Duration entry*#
<label for="duration"><b>Duration of the course</b></label>
<input type="text" name="duration" required />
</div>
#* submit button :
- by clicking the button, a pop-up window will be displayed with the data entered to the database.
*#
<button type="submit" class="registerbtn" id="register" onclick="button_action()">Register</button>
<script>button_action();</script>
</div>
</form>
<div>
#* model *#
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
#* model content *#
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px" ;>
<h3> THANK YOU FOR REGISTERING WITH NIKINI LEARNING </h3>
</div>
#* body of the model *#
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
#* Customer Registration Reference No. display*#
<div class="form-group">
<label for="crf">
<span class="glyphicon glyphicon-user"></span>
Customer Registration No. :
</label>
<input type="text" class="form-control" id="crf" />
</div>
#* Customer Name DIsplay*#
<div class="form-group">
<label for="name">
<span class="glyphicon glyphicon-user"></span>
Customer Name :
</label>
<input type="text" class="form-control" id="name" />
</div>
#* Customer Contact No. Display*#
<div class="form-group">
<label for="contact">
<span class="glyphicon glyphicon-user"></span>
Contact No. :
</label>
<input type="text" class="form-control" id="contact" />
</div>
#* Customer Email Display*#
<div class="form-group">
<label for="email">
<span class="glyphicon glyphicon-user"></span>
Email address :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered course display*#
<div class="form-group">
<label for="course">
<span class="glyphicon glyphicon-user"></span>
Registered course :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Customer registered date display*#
<div class="form-group">
<label for="date">
<span class="glyphicon glyphicon-user"></span>
Registered date :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course duration display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course duration :
</label>
<input type="text" class="form-control" id="email" />
</div>
#* Course price display*#
<div class="form-group">
<label for="duration">
<span class="glyphicon glyphicon-user"></span>
Course price :
</label>
<input type="text" class="form-control" id="email" />
</div>
<h4><i>Please use your Customer Registration Reference Number (CRF) to do the payment </i></h4>
</form>
#* footer of the model *#
<div class="modal-footer">
#* edit button *#
<button type="button" class="btn btn-submit btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-edit"></span> edit
</button>
#* new button *#
<button type="reset" class="btn btn-submit btn-default pull-right" data-dismiss="modal">
<span class="glyphicon glyphicon-ok"></span> New
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

change button_action() function to below function
function button_action() {
$("#myModal").modal();
}

How can I seperate the errors if there is a two forms on the same page. Laravel/jquery

I have a login page, which has login and registration forms on the same page. When registration fails it is sending me to login form and error appear in both form. I am using defaul authentication with "make:auth" command.
I don't want to change the name fields name. I tried to make login form hidden but it doesn't work. May be I couldn't.
My question is that how can I handle when registration fails, it should redirect me to register form, not login form. And the errors should be spesific for each form. Also how can I use error bags? I am new on laravel.
If you can explain to me in detail I will be grateful. Many thanks.
Here the view code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:300,400,500,600" rel="stylesheet">
<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/vendor.bundle.css">
<link rel="stylesheet" href="assets/css/app.bundle.css">
<link rel="stylesheet" href="assets/css/theme-a.css">
</head>
<body id="auth_wrapper">
<div id="login_wrapper">
<div id="login_content">
<div class="logo">
<img src="assets/img/logo/ml-logo.png" alt="logo" class="logo-img">
</div>
<h1 class="login-title">
Sign In to your account
</h1>
<div class="login-body">
<form id="login" method="POST" action="{{ route('login') }}">
#csrf
<div class="form-group label-floating is-empty">
<label class="control-label">Email</label>
<input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Password</label>
<input type="password" name="password" class="form-control" required>
#if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
Forgot Password?
<div class="checkbox inline-block">
<label>
<input type="checkbox" class="checkbox-inline" value="">
Remember Me
</label>
</div>
{{--Sign In--}}
<button type="submit" class="btn btn-info btn-block m-t-40">Sign In</button>
<div class="login-options">
<span>OR</span>
<hr/>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-facebook btn-block"><i class="zmdi zmdi-facebook"></i> Sign In with
Facebook
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-google btn-block"><i class="zmdi zmdi-google-plus"></i> Sign In with
Google
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-twitter btn-block"><i class="zmdi zmdi-twitter"></i> Sign In with Twitter
</button>
</div>
</div>
</form>
</div>
<div class="login-footer p-15">
<p>
Don't have an account? Create an account
</p>
</div>
<div id="register_wrapper">
<ul class="card-actions icons right-top">
<li>
<a href="javascript:void(0)" data-toggle="register">
<i class="zmdi zmdi-close"></i>
</a>
</li>
</ul>
<div class="logo">
<img src="assets/img/logo/ml-logo.png" alt="logo" class="logo-img">
</div>
<h1 class="login-title">
Create an account
</h1>
<div class="login-body">
<div class="col-xs-12">
<button class="btn btn-facebook btn-block"><i class="zmdi zmdi-facebook"></i> Sign Up with Facebook
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-google btn-block"><i class="zmdi zmdi-google-plus"></i> Sign Up with Google
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-twitter btn-block"><i class="zmdi zmdi-twitter"></i> Sign Up with Twitter
</button>
</div>
<form id="register" class="clear-both" method="POST" action="{{ route('register') }}">
#csrf
<h2 class="text-center p-t-20">
Or sign up below
</h2>
<div class="form-group label-floating is-empty">
<label class="control-label">Name</label>
<input type="text" name="name" class="form-control" required>
#if ($errors->has('name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Email</label>
<input type="email" name="email" class="form-control" required>
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Password</label>
<input type="password" name="password" class="form-control" required>
#if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Confirm Password</label>
<input type="password" name="password_confirmation" class="form-control" required>
</div>
<div class="checkbox inline-block">
<label>
<input type="checkbox" class="checkbox-inline" value="">
I agree to the terms of services
</label>
</div>
{{--Create my account--}}
<button type="submit" name="submit" class="btn btn-info btn-block m-t-40">Create my account</button>
</form>
</div>
<div class="login-footer p-15">
<p>
Already have an account? Sign In
</p>
</div>
</div>
</div>
</div>
<script src="assets/js/vendor.bundle.js"></script>
<script src="assets/js/app.bundle.js"></script>
</body>
</html>

I had a similar issue recently on a site I was building. This may not be the best solution but the solution I came up with was to flash a variable to the session depending on the form that was submitted. Then also check for that variable when checking for errors.
So in the method that handles the login method, add session()->flash('form', 'login'). Then do something similar in the method that handles the register form.
Then in your view when checking for errors, you need to do something like...
#if ($errors->has('password') && session()->get('form') == 'login')

_self is not working with a href

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.

jQuery to trigger HTML5 form validation

I have the following HTML code of the form:
<form id="login_information_form" class="form uniformForm validateForm">
<div class="field-group">
<label for="email">Email:</label>
<div class="field">
<input type="text" class="validate[required,custom[email]" size="32" id="email" name="email" value="">
</div>
</div>
<div class="field-group">
<label for="oldpass">Old Password:</label>
<div class="field">
<input type="password" class="validate[required]" size="32" id="oldpass" name="oldpass" value="">
</div>
</div> <!-- .field-group -->
<div class="field-group">
<label for="newpass">New Password:</label>
<div class="field">
<input type="password" class="validate[required]" size="32" id="newpass" name="newpass">
</div>
</div> <!-- .field-group -->
<div class="field-group">
<label for="newpassr">Repeat New Password</label>
<div class="field">
<input type="password" class="validate[required]" size="32" id="newpassr" name="newpassr">
</div>
</div> <!-- .field-group -->
<div class="actions">
<button class="btn btn-blue" id="save_login_info" type="submit">Save Password</button>
</div> <!-- .actions -->
</form>
Currently HTML5 triggers validation once the input looses its focus.
Is it possible to trigger validation with jQuery for this form when I click on Save Password button ?
EDIT:
My question was wrong. Can I trigger a prompt bubble for specific input field. For example: New password and Repeat new password is not correct. So I want to show a bubble on those input fields displaying the Error message