My modal for asking name
<?php session_start(); ?>
<div class="modal name fade modal-scrollable" id="name" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title myModalLabel">Your name!</h4>
</div>
<div class="modal-body">
<form id="nameForm" action="index.php" method="post">
<div class="form-group">
<label class="col-xs-3 control-label">Your name : </label>
<div class="col-xs-4">
<input type="text" class="form-control name" name="name" required/>
</div>
</div></div><br/><br/>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="ok">Ok</button>
</div>
</form>
</div>
</div>
</div>
Script code
<?php
if(!$_SESSION['user']['name']){
echo "<script>
$(window).load(function(){
$('#name').modal({
backdrop: 'static',
keyboard: true
})
$('#name').modal('show');
});
</script>";
}
?>
<script>
$('#ok').submit(function(){
<?php
$_SESSION['user']['name']=$_POST['name'];
print"location.reload();";
?>
});
</script>
This code actually works fine. The code is that on page load it will ask the name of user and set the session variable to set the entered name. It will open the modal only if session variable is not set. But in reality the user has to enter his name twice.I even tried reload() but it didnt work. Please help!
Your session is being set correctly. However, you are not initializing the session. The first line after your <?php tag should be:
session_start();
Please, also note that in this part of your code, you should print your JavaScript code:
<?php
$_SESSION['user']['name']=$_POST['name'];
print "location.reload();";
?>
Related
So i got a problem that when i click a submit button of a form, my action attribute link was added a new line that i don't want it
Here is modal that contain the form:
<!--modal-->
<div class="modal fade" id="changepass" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Password changing</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<form action="" id="passchange">
<div class="modal-body">
<div class="row">
<div class="form-password-toggle">
<label class="form-label" for="basic-default-password12">Enter New
Password</label>
<div class="input-group">
<input type="password" class="form-control"
id="basic-default-password12"
placeholder="············"
aria-describedby="basic-default-password2" name="newpass" />
<span id="basic-default-password2"
class="input-group-text cursor-pointer"><i
class="bx bx-hide"></i></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary"
data-bs-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary btn-ok">Yes</button>
<!--Get id function-->
</div>
</form>
</div>
</div>
</div>
<!--/modal-->
Here is the button when i click, it will open modal box:
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="mb-0"><?=$detail['last_name']?>'s Information</h5>
<small class="text-muted float-end"><button type="button" class="btn btn-primary"
data-id="<?=$detail['id']?>" onclick="changepassword(this)">Change
password</button></small>
</div>
Here is jquery i'm using to pass a php value to the modal:
<script>
function changepassword(elm) {
let id = $(elm).data('id');
let modal = $('#changepass');
$('#passchange').attr('action',
`http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/${id}`);
modal.modal('show');
}
</script>
So the link i want it to be on the url bar is (id is changable):
http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/id
here is the link that i don't expect it to be:
http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/30?newpass=test
i want to call a php function and it will grab the input but the line "?newpass=test" prevent it to run.
Your form is using GET method to send data to server. Form with GET method will append a list of name/value pairs after the question mark (?) at the end of your URL and each one separated by an ampersand (&). You can change method to POST so you will get no data appended to the URL and sensitive data such as password changes should use POST.
<form action="" method="POST" id="passchange">
You can learn more about sending data to server in here
<script>
function changepassword(elm) {
let id = $(elm.target).attr('data-id');
let modal = $('#changepass');
$('#passchange').attr('action',
`http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/${id}`);
modal.modal('show');
}
</script>
My problem is I am trying to call the PHP file while clicking the button on my bootstrap but it is not working for me here by I paste my code of bootstrap and PHP kindly guide me for the solution
Thanks in advance
I am tired of changing button to form and all of these but not working I am working on PHP 7 and Bootstrap 4
<?php include "includes/db.php"; ?>
<?php
// echo "<h1> Testing </h1>";
// $db = mysql_select_db("cateory", $connection); // Selecting Database from Server
function(){
if (isset($POST['submit'])){
// $connect=mysqli_query($connection,)
$cat_title=$POST['cat_title'];
if($cat_title==""||empty($cat_title)){
echo "The field should not empty";
}
else{
$query="INSERT INTO category (cat_title)";
$query .=" VALUE ('{$cat_title}')";
$create_category_query = mysqli_query ($connection,$query);
if(!$create_category_query){
die ('QUERY FAILED'.mysqli_error($connection));
}
}
}
}
?>```
<!-- ADD CATEGORY MODAL -->
<div class="modal fade" id="addCategoryModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-success text-white">
<h5 class="modal-title">Add Category</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="modal-footer">
<?php insert_categories(); ?>
<button class="btn btn-success" type="submit" data-dismiss="modal">Save Changes</button>```
</div>
</form>
</div>
</div>
Do change your code like:
<?php
if ( isset( $_POST['submit']) ) {
// $connect=mysqli_query($connection,)
$cat_title = $_POST['cat_title'];
if($cat_title==""||empty($cat_title)){
echo "The field should not empty";
} else {
$query="INSERT INTO category (cat_title)";
$query .= " VALUE ('{$cat_title}')";
$create_category_query = mysqli_query ($connection,$query);
if(!$create_category_query){
die ('QUERY FAILED'.mysqli_error($connection));
}
}
}
?>
<!-- ADD CATEGORY MODAL -->
<div class="modal fade" id="addCategoryModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-success text-white">
<h5 class="modal-title">Add Category</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="cat_title">
</div>
<div class="modal-footer">
<?php insert_categories(); ?>
<button class="btn btn-success" type="submit" data-dismiss="modal">Save Changes</button>```
</div>
</form>
</div>
</div>
</div>
</div>
Problems with your code:
Your HTML formatting itself is wrong. you have broken your form tag with div of modal-body. You have to reconsider your HTML design.
No need to wrap PHP code in a function with no name.
You just have to use the code only.
You have named your input as title while saving/checking data as cat_title.
Check your whole codebase again.
I have created a login form within a Bootstrap modal but when the correct information is entered the user is shown the same page but with the modal closed i.e. not redirected to viewDashboard.php.
Code
<!-- Modal -->
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" 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="ModalLabel">Login to Portal</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="" method="post">
<fieldset>
<div class="form-group">
<label for="inputID" class="col-lg-2 control-label">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputID" name="user" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<?php
include("core/connection.php");
if($conn AND !empty($_POST)){
$stid = oci_parse($conn, "SELECT * FROM Customers WHERE Customers.CustomerNo = ".$_POST['user']."");
oci_execute($stid);
$count = oci_fetch_all($stid, $res);
if ($count > 0) {
session_start();
$_SESSION['account'] = $_POST['account'];
header("Location: viewDashboard.php");
}
oci_free_statement($stid);
oci_close($conn);
}
?>
</div>
If your user is correctly authenticated you should create a new session for him
session_start();
$_SESSION['user'] = array('id' => '...', name => '...', ...);
The information in the session can then be used in your secured section to check if the user is connected
session_start();
if (!isset($_SESSION['user']) {
// redirect to login page
}
Finally the redirection should be made before any information is sent to the client using:
// once logged
header('location:viewDashboard.php');
// on logout or if trying to access secured section
header('location:login.php');
EDIT to reflect the first 2 comments :
Your page should be structured like this:
//login.php
<?php
if (isset($_POST)) {
// login check
if ($isLogged) {
// session creation
header('location:...');
}
}
?>
<html>
<head>...</head>
<body>
...
<!-- Your modal box -->
</body>
</html>
If you want to re-open your modal box upon unsuccessful login, you should use your PHP to set the value of a flag (like !$isLogged you set a flag in your JS). If the flag is set to true, you trigger the modal box with Twitter's boostrap js.
References :
Sessions
Headers
Scenario: User clicks the Login with Facebook link, but actually user is not registered in the database. Code for the url is:
<a href="<?php echo $this->authlib->fbloginURL(site_url() . 'auth/facebooklogin'); ?>">
In the auth/facebooklogin() function, I am checking for this condition, and if the user is not registered, I want to open a modal for registration.
Code Snippet in facebooklogin() that checks and redirects:
if(is_null( $this->authlib->has_account( $fb_id ) ) ) // User has no account
redirect('/auth/register_modal');
And the register_modal() function simply loads the new view that I want to display:
function register_modal()
{
$this->load->view('include/header');
$this->load->view('auth/register_modal');
$this->load->view('include/footer');
}
Now for the purpose of discussion my modal dialog is:
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
This does not work.. I was wondering what am I doing wrong? All relevant bootstrap files are loaded in the header.
Found the solution myself. I just had to change the following in my modal:
<div class="modal hide" id="myModal">
to
<div class="modal show" id="myModal">
i.e. change the hide to show. Silly me :)
Login
</diV>
<div class="modal-body">
</div>
<div class="modal-footer" id="modal-footer" >
</div>
My page has a form fields like so.
<form id = "registerform" class="form-horizontal" action = "insert.php" method = "post">
<div class="control-group">
<label class="control-label" for="inputTeamName">Team Name</label>
<div class="controls">
<input id="inputTeamName" class = "span11" type="text" placeholder="Team Name" name = "inputTeamName" data-toggle="tooltip" title="Innuendos encouraged" data-placement="left">
</div>
</div>
<div class="control-group">
<div class="controls">
Register
</div>
</div>
</form>
When the user clicks the register button, a modal loads
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Confirm Registration</h3>
</div>
<div class="modal-body">
<ul class="unstyled">
<li>Team Name:</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary">Confirm</button>
</div>
It looks like this - http://twitter.github.io/bootstrap/javascript.html#modals
I want to use the modal to confirm the user's input. How do I reference the text the user entered in the form field and display it inside of the modal?
Thanks
To be clear, I added a div tag inside <li>Team Name:</li>:
<div class="modal-body">
<ul class="unstyled">
<li>Team Name:<div id = "divTeamName"></div></li>
</ul>
</div>
Add the following script (possibly just before the closing html tag):
<script type="text/javascript">
$("#registerBtn").click(function() {
$(divTeamName).text($('#inputTeamName').val());
});
</script>
The JQuery code above will respond after your register button has been clicked, displaying the text from the input into the div I've added above.
JsFiddle:
http://jsfiddle.net/6y4yQ/1/
<script type="text/javascript">
$("#inputTeamName").keypress(function() {
var TeamName = $(this).val();
$(this).after(TeamName);
});
</script>