I have an html page that contains 2 forms, one for sign up and the other for sign in, and each have a submit button. The problem is that when I click these buttons nothing happens despite that the form action pages have been set. I am using netbeans and wamp server and I tried to run the project directly from the php pages (instead of the html page) and I got the needed response "Connected successfully".
Here is the complete html page :
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!----------------------------------jQuery Validate---------------------------------->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<!------------------------------------------------------------------------------------------------>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">-->
<!-- Website Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="SignUpStyle.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h5>Sign Up</h5>
<form action="SignUp.php" method="post" id="signupForm">
<div class="form-group">
<label for="fn" class="cols-sm-2 control-label">Firstname</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="fn" id="fn"
placeholder="Enter your firstname"/>
</div>
</div>
</div>
<div class="form-group">
<label for="ln" class="cols-sm-2 control-label">Lastname</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="ln" id="ln"
placeholder="Enter your lastname"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="email" class="form-control" name="email" id="email"
placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password"
placeholder="Enter your Password"/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirm" id="confirm"
placeholder="Confirm your Password"/>
</div>
</div>
</div>
<div class="form-group">
<input id="submit" type="submit" value="Register" name="submit" form="signupForm"
class="btn btn-primary btn-lg btn-block login-button">
<div id="agreeDiv">
<input id="agreeId" type="checkbox" value="agree"/>
<label id="agreeLbl">I accept the terms and conditions</label>
</div>
</div>
<div class="form-group">
<span id="signInSpan">Already have an account?<button id="signInBtn">Sign In!!</button></span>
</div>
</form>
<form method="post" action="SignIn.php" id="signinForm">
<div class="form-group">
<label for="email2" class="cols-sm-2 control-label">Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="email" class="form-control" name="email2" id="email2"
placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password2" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password2" id="password2"
placeholder="Enter your Password"/>
</div>
</div>
</div>
<div class="form-group">
<button id="submit2" type="submit" class="btn btn-primary btn-lg btn-block login-button">Login</button>
</div>
<div class="form-group">
<span id="signUpSpan">Don't have an account?<button id="signUpBtn">Sign Up!!</button></span>
</div>
</form>
</div>
</div>
</div>
<script src="SignUpIn.js"></script>
</body>
And that's the signup.php page:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "projetpw";
$port = 3308;
$conn = mysqli_connect($servername, $username, $password, $db ,$port);
if(!$conn){
die("Connection failed : ".mysqli_connect_error());
}
else{
$jq = '<script type="text/javascript">'
. 'alert("Connected Successfully");'
. '</script>';
echo $jq;
}
Any help would be appreciated.
change the button html code to :
<button type="submit" form="form1" value="Submit">Submit</button>
just make sure to give the button type="submit"
I think the js file which you included at bottom maybe creating problem, otherwise no issue in submitting a form code.
<script src="SignUpIn.js"></script>
Related
I have an issue with BS modal (im using BS 3) and it is confirming form submission. But it is placed in accordion and when i click e.g. 5th element modal and validator works but shows error in first element. I dont know what can be the problem, maybe data-toggle is mixed (modal and validator).Below I put that part of code (with erased loop and other things connected with template viewer -> smarty)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form id="myForm" action="" method="post" data-toggle="validator" role="form">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="">
<input type="hidden" name="hash" value="">
<input type="button" name="btn" value="Utwórz" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn button btn-primary" />
</form>
</div>
</div>
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<p class="body" style="font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-weight: 400;">
<b> Klikając „Załóż konto/Aplikuj” akceptujesz
Regulamin Serwisu i potwierdzasz, że zapoznałeś się z
Polityką ochrony prywatności oraz
Polityką Cookies.
</b>
</p>
</div>
<div class="modal-footer">
<button type="submit" form="myForm" class="btn btn-success col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">Załóż konto/Aplikuj
</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I dont use any js file to this (only the validator, but its default code).
To clarify whats going on with this problem i attach video https://drive.google.com/file/d/1pYwLbxyZTZUFiGXny5LdO9Zg1S9_jKnr/view?usp=sharing
Earlier the code was without modals an validator was working correctly e.g i click submit on 5th element and validator runs in this element and so on.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="accordion_dotacja">
<div>
<b>Udostępnij kod pracownikowi:</b> <br>
<div class="row">
<div class="col-xs-9" style="padding-right:0;">
<input class="form-control" type="text" value="" id="hash_{$v.id}" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" readonly>
</div>
<div class="col-xs-3" style="padding-left:0;">
<button class="btn button btn-info" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">Kopiuj kod</button>
</div>
</div><br>
<b>Albo załóż konto pracownika:</b> <br><br>
<form action="" method="post" data-toggle="validator" role="form" onsubmit="return confirm('Czy na pewno chcesz założyć konto pracownikowi?');">
<div class="row">
<div class="col-sm-6 form-group">
Imię:<br>
<input type="text" class="form-control" name="employee_name" data-error="Proszę podać imię." required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Nazwisko:<br>
<input type="text" class="form-control" name="employee_surname" data-error="Proszę podać nazwisko." required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
Numer telefonu:<br>
<input placeholder="9-cyfrowy numer telefonu" type="text" class="form-control" name="employee_phone" data-error="Proszę podać numer telefonu" pattern="[0-9]{9}" required>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-6 form-group">
Adres e-mail:<br>
<input type="email" class="form-control" name="employee_email" data-error="Proszę podać prawidłowy adres e-mail." required>
<div class="help-block with-errors"></div>
</div>
</div>
<input type="hidden" name="action" value="register_employee">
<input type="hidden" name="kurs_id" value="{$i}">
<input type="hidden" name="hash" value="{$v.hash}">
<input type="submit" class="btn button btn-primary" value="Utwórz">
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
production code snippet
version of bootstrap - 3.3.7
Thanks in advance for help :)
I have converted my PHP website to a WordPress theme but my Bootstrap modal is not opening in WordPress.
***Header.php***
<a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user"></i> Sign In/Up</a>
<div id="modal" class="modal fade" role="dialog" >
<div class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</div>
<section class="popupBody">
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fab fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fab fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last">Sign up</div>
</div>
</div>
<div class="user_login">
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
</div>
</form>
Forgot password?
</div>
<div class="user_register">
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
</div>
</form>
</div>
</section>
</div>
I tried hard but did not find any solution. I have imported all the necessary files like Bootstrap and JavaScript but still modal is not working. I have a header.php file in which I have an anchor tag and I want to open a modal when clicking on it.
Maybe you didn't enqueue bootstrap properly.
first, enqueue your bootstrap CSS and JS.
For enqueue, your style & JS WordPress has an action hook.
wp_enqueue_scripts
You have to do that inside your fuctions.php
function your_scripts() {
wp_enqueue_style( 'style-name', get_template_directory_uri().'/your_path/your.css' );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/your_path/your.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );
your_scripts is your callback function. you can name it whatever your want.
wp_enqueue_style takes 5 parameter.1st is a unique id, the second is your src or link, the third is dependency, the fourth is version and the last is media. for know, more details follow the below link.
[https://developer.wordpress.org/reference/functions/wp_enqueue_style/][1]
wp_enqueue_script also takes 5 parameters.
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
$handle is the name for the script.
$src defines where the script is located.
$deps is an array that can handle any script that your new script depends on, such as jQuery.
$ver lets you list a version number.
$in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather than in the header so that it does not delay the loading of the DOM tree.
for Know, more details follow the below link.
[https://developer.wordpress.org/reference/functions/wp_enqueue_script/][1]
Now enqueue your style and CSS and try your modal.
Your <a> tag needs data-toggle="modal" and data-target="#modal" attributes. See the Bootstrap 4 modal documentation.
***Header.php***
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<a id="modal_trigger" href="#modal" class="sign-in-up" data-toggle="modal" data-target="#modal"><i class="fa fa-user"></i> Sign In/Up</a>
<div id="modal" class="modal fade" role="dialog" >
<div class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</div>
<section class="popupBody">
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fab fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fab fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last">Sign up</div>
</div>
</div>
<div class="user_login">
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
</div>
</form>
Forgot password?
</div>
<div class="user_register">
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
</div>
</form>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I have been working on this form where it should be looking like the image attached.
But instead its getting something like this.
here is my code:
<form>
<div class="form-row">
<div class="form-group col-md-3">
<label for="firstname">FirstName</label>
<input type="text" class="form-control" >
</div>
<div class="form-group col-md-3">
<label for="lastname">last name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="lastname">identification no</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-3">
<button>
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="form-group">
<label for="inputAddress">email</label>
<input type="text" class="form-control">
</div>
</form>
I'm guessing that a parent component has the text-center class: class="text-center"
Therefore, you should add the text-start class to your form in order to achieve your desired alignment.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="text-center">
<form class="text-start">
<div class="row g-3">
<div class="form-group col-sm-3">
<label for="firstname" class="form-label">FirstName</label>
<input type="text" class="form-control" >
</div>
<div class="form-group col-sm-3">
<label for="lastname" class="form-label">last name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-sm-3">
<label for="lastname" class="form-label">id no</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-sm-3">
<button>
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="form-group col-sm-3">
<label for="inputAddress">email</label>
<input type="text" class="form-control">
</div>
</form>
</div>
This is my way to do the same
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Search Profile - Personal</h2>
<hr>
<form>
<div Class="row">
<div class="form-group col-md-3">
<label for="firstname">FirstName</label>
<input type="text" class="form-control" >
</div>
<div class="form-group col-md-3">
<label for="lastname">last name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="lastname">identification no</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-md-3">
<button type="button" class="btn btn-default" style="font-size:32px;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="usr">Email:</label>
<input type="text" class="form-control" id="usr">
</div>
</div>
<hr>
</form>
</div>
</body>
</html>
i have a problem when i want to login into my admin login panel i use username and password and the page refresh and stays the same without going to Settings.php path that i want to go in . if i can even try to add another script can give me permission to access that Settings.php file witout having to go trought that login.php file that causes the problem
*first code : Login.php file
*Second code : Settings.php file
<br/><br/><br/>
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-lock"></i> login</h4>
</div>
<div class="panel-body">
<?php echo form_open('/auth/login');?>
<input type="text" placeholder="username" class="form-control " name="_name" />
<br/>
<input type="password" placeholder="password" class="form-control " name="_pass" />
<br/>
<input type="submit" name="login" class="btn btn-success" value="login" />
<?php echo form_close();?>
</div>
</div>
</div>
<div class="col-md-4"></div>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa fa-gear"></i> General Settings </h4>
</div>
<!--<form method="post" action="{site_url}/dashboard/save_settings" >-->
<?php echo form_open('/dashboard/save_settings');?>
<div class="panel-body">
<div class="form-group">
<label for="site_name">Site Name</label>
<input name="site_name" class="form-control" id="site_name" value="{site_name}" type="text">
</div>
<div class="form-group">
<label for="site_mail">Email</label>
<input name="site_mail" class="form-control" id="site_mail" value="{site_mail}" type="text">
</div>
<div class="form-group">
<label for="site_desc">SEO description</label>
<textarea name="site_desc" class="form-control" id="site_desc" rows="3">{site_desc}</textarea>
</div>
<div class="form-group">
<label for="site_keys">SEO Keywords</label>
<textarea name="site_keys" class="form-control" id="site_keys" rows="3">{site_keys}</textarea>
</div>
<div class="form-group">
<label for="ad_code">Ad Code <small>(add ad code here like google adsense code or html code.)</small> </label>
<textarea name="ad_code" class="form-control" id="ad_code" rows="3">{ad}</textarea>
</div>
<!-- Social Media -->
<h5><b>Social Media</b></h5>
<div class="input-group">
<span class="input-group-addon" id="facebook"><i class="fa fa-facebook"></i></span>
<input name="facebook" type="text" value="{facebook}" class="form-control" aria-describedby="facebook">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="twitter"><i class="fa fa-twitter"></i></span>
<input name="twitter" type="text" value="{twitter}" class="form-control" aria-describedby="twitter">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="googleplus"><i class="fa fa-google-plus"></i></span>
<input name="googleplus" type="text" value="{googlep}" class="form-control" aria-describedby="googleplus">
</div>
<!-- END / Social Media -->
</div>
<div class="panel-footer">
<!--<input class="btn btn-success" type="submit" name="update" value="save" />-->
<button class="btn btn-success" type="submit" name="update"><i class="fa fa-save"></i> save</button>
</div>
<!--</form>-->
<?php echo form_close();?>
</div>
</div>
<div class="col-md-3"></div>
Hi im using jqBootstrapValidation to validate a form and all works well except for the password.
For example if I try to submit the form without filling in the fields it wont let me nor will it let me submit the form if email isn't in form example#site.com but even though I added data-validation-match-match tag to my second password input, the form still submit if the passwords don't match.
my code is:
<?php
$error = "";
include ('dblink.php');
session_start();
if(!empty($_SESSION['s_logged_n'])){
header("Location: index.php");
}
if($_SERVER['REQUEST_METHOD'] === 'POST')
{
if($_POST['form'] === 'login')
{
$username = mysqli_escape_string($con, trim($_POST['user']));
$password = md5(trim($_POST['password']));
$query = mysqli_query($con,"SELECT * FROM Users WHERE Username = '$username' AND Password = '$password' LIMIT 1") or die(mysql_error());
$row = mysqli_fetch_array($query);
// now we check if they are activated
if(mysqli_num_rows($query) > 0)
{
if($row['Activated'] > 0)
{
$_SESSION['s_logged_n'] = 'true';
$_SESSION['s_username'] = $username;
$_SESSION['s_name'] = $row['Name'];
header("Location: index.php");
}else
{
$error = "<Br><div class=\"alert alert-warning\">Your account hasnt yet been activated.</div>";
}
}
else
{
$error = "<Br><div class=\"alert alert-danger\">Your username/password do not match.</div>";
}
}
if($_POST['form'] === 'register')
{
$first = addslashes(trim($_POST['fname']));
$surname = addslashes(trim($_POST['lname']));
$abr = mb_substr($surname, 0, 3);
$username = $first . $abr;
$email = addslashes(trim($_POST['email']));
$poste = addslashes(trim($_POST['poste']));
$pass = addslashes(trim($_POST['pass']));
$salary = addslashes(trim($_POST['salary']));
$conf = addslashes(trim($_POST['cpass']));
$ip = $_SERVER['REMOTE_ADDR'];
$date = date("d, m y");
$password = md5($pass);
}
}
?>
<DOCTYPE html>
<html>
<head>
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="http://eonasdan.github.io/bootstrap-datetimepicker/styles/bootstrap-datetimepicker.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
<script type="text/javascript" src="http://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
<script>
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>
<body >
<div style="background-color:#CC0000; height: 100%" >
</br>
</br>
</br>
<div class="container">
<div class="panel panel-default" >
<div class="panel-body">
<div class="page-header">
<h1>Login</small></h1>
</div>
<form class="form-horizontal" role="form" action="<?= $_SERVER['PHP_SELF'] ?>" method="post">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span>
</span>
<input name="user" type="text" class="form-control" placeholder="Username">
</div></br>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span>
</span>
<input name="password" type="password" class="form-control" placeholder="Password">
</div>
<?php echo $error;?>
<div class="form-group">
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="hidden" name="form" value="login" />
<button type="submit" id="login" name="login" class="btn btn-default">Sign in</button><button type="button" data-toggle="modal" data-target="#register" class="btn btn-warning btn-xs">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Registration</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" action="<?= $_SERVER['PHP_SELF'] ?>" method="post">
<div class="form-group">
<label for="fname" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Your first name." required>
</div>
</div>
<div class="form-group">
<label for="lname" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lname" name="id="lname"" placeholder="Your last name." required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Your email." required>
</div>
</div>
<div class="form-group">
<label for="poste" class="col-sm-3 control-label">Poste</label>
<div class="col-sm-9">
<select class="form-control" id="poste" name="poste">
<option value="Surface de Vente">Surface de Vente</option>
<option value="Caisse">Caisse</option>
<option value="Protection des biens">Protection des biens</option>
<option value="Circulation des marchandises">Circulation des marchandises</option>
<option value="Préposé à la marque">Préposé à la marque</option>
<option value="Réserve">Réserve</option>
<option value="Électronique">Électronique</option>
<option value="Biens Modes">Biens Modes</option>
<option value="Starbucks">Starbucks</option>
<option value="Ressources humaines">Ressources humaines</option>
</select>
</div>
</div>
<div class="form-group">
<label for="salary" class="col-sm-3 control-label">Salary</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="salary" name="salary" placeholder="Your salary." required>
</div>
</div>
<div class="form-group">
<label for="pass" class="col-sm-3 control-label">Password</label >
<div class="col-sm-9">
<input type="password" minlength="6" class="form-control" id="pass" name="pass" required>
</div>
</div>
<div class="form-group">
<label for="cpass" class="col-sm-3 control-label">Confirm</label>
<div class="col-sm-9">
<input type="password" minlength="6" class="form-control" id="cpass" name="cpass" data-validation-match-match="pass" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="hidden" name="form" value="register" />
<button type="submit" class="btn btn-danger">Register <span class="glyphicon glyphicon-ok"></span></button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
the form, which is in there is:
<form class="form-horizontal" role="form" action="<?= $_SERVER['PHP_SELF'] ?>" method="post">
<div class="form-group">
<label for="fname" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Your first name." required>
</div>
</div>
<div class="form-group">
<label for="lname" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lname" name="id="lname"" placeholder="Your last name." required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Your email." required>
</div>
</div>
<div class="form-group">
<label for="poste" class="col-sm-3 control-label">Poste</label>
<div class="col-sm-9">
<select class="form-control" id="poste" name="poste">
<option value="Surface de Vente">Surface de Vente</option>
<option value="Caisse">Caisse</option>
<option value="Protection des biens">Protection des biens</option>
<option value="Circulation des marchandises">Circulation des marchandises</option>
<option value="Préposé à la marque">Préposé à la marque</option>
<option value="Réserve">Réserve</option>
<option value="Électronique">Électronique</option>
<option value="Biens Modes">Biens Modes</option>
<option value="Starbucks">Starbucks</option>
<option value="Ressources humaines">Ressources humaines</option>
</select>
</div>
</div>
<div class="form-group">
<label for="salary" class="col-sm-3 control-label">Salary</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="salary" name="salary" placeholder="Your salary." required>
</div>
</div>
<div class="form-group">
<label for="pass" class="col-sm-3 control-label">Password</label >
<div class="col-sm-9">
<input type="password" minlength="6" class="form-control" id="pass" name="pass" required>
</div>
</div>
<div class="form-group">
<label for="cpass" class="col-sm-3 control-label">Confirm</label>
<div class="col-sm-9">
<input type="password" minlength="6" class="form-control" id="cpass" name="cpass" data-validation-match-match="pass" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="hidden" name="form" value="register" />
<button type="submit" class="btn btn-danger">Register <span class="glyphicon glyphicon-ok"></span></button>
</form>
and the javascript is:
<script>
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>
I get no error in my js console and I dont see what the error could be, anyone is familiar with this?
Also its ignoring the min character.