We Keep Coding

Show Signup modal window then Login modal right away

I have a nav bar with options for signup or login. Once clicked on either it will display a modal window using Bootstrap. What I am trying to do is that when the user is finished with the join modal window (pressed submit button and submitted data to the controller), I want to show the signin modal window right after. Show my idea was when submitting the form data to the controller. The controller would respond back with a display-type equaling "join, signin, nothing" and reinclude the page. In the page it will check what the display-type is then will call either show_join_modal() function if the display-type is signup or call either show_signin_modal() function if the display-type is login.
My idea using JQuery was something like this, Here is code in the startpage.php
<script>
<?php
if (isset($display_type))
if ($display_type == 'signin')
echo 'show_signin_modal();';
else if ($display_type == 'join')
echo 'show_join_modal();';
else
;
?>
function show_signin_modal() {
$("#signinModal").modal("show");
}
function show_join_modal() {
$("#joinModal").modal("show");
}
function hide_all_modal() {
$("#joinModal").modal("hide");
$("#signinModal").modal("hide");
}
</script>
<div class="container">
<div class="modal fade" id="joinModal" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="controller.php">
<input type='hidden' name='page' value='StartPage'></input>
<input type='hidden' name='command' value='Join'></input>
<h1>Register</h1>
<div class="form-group">
<label class="control-label col-sm-2" for="username"> Username</label>
<div class="col-sm-10">
<input type="text" name="username" placeholder="Enter username.." required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password" required> Password</label>
<div class="col-sm-10">
<input name="password" type="password" placeholder="Enter password..">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email" required> Email</label>
<div class="col-sm-10">
<input type="email" name="email" placeholder="Enter email..">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
<button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="modal fade" id="signinModal" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" method="post" action="controller.php">
<input type='hidden' name='page' value='StartPage'></input>
<input type='hidden' name='command' value='SignIn'></input>
<h1>Login</h1>
<div class="form-group">
<label class="control-label col-sm-2" for="username"> Username</label>
<div class="col-sm-10">
<input type="text" name="username" placeholder="Enter username.." required>
<?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password"> Password</label>
<div class="col-sm-10">
<input name="password" type="text" placeholder="Enter password.." required>
<?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
<button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
However, I could not get it to work.
Any ideas. Any sample code? Thanks in advance!

Replace this code with the current on your controller.
<script>
function show_login_modal() {
$("#loginModal").modal("show");
}
function show_signup_modal() {
$("#signupModal").modal("show");
}
function hide_all_modal() {
$("#signupModal").modal("hide");
$("#loginModal").modal("hide");
}
</script>
<?php
if (isset($display_type))
if ($display_type == 'signin')
echo '<script type="text/javascript">show_signin_modal();</script>';
else if ($display_type == 'join')
echo '<script type="text/javascript">show_join_modal();</script>';
//echo 'show_join_modal();';
else
;
?>

I found out how to do it with help from "https://codepen.io/elmahdim/details/azVNbN" which he posted on "Bootstrap modal: close current, open new" under username "Mahmoud". So in order to go from the joinModal window to the signinModal window right after the user submits the form on the joinModal window. I updated the submit button in the joinModal window with:
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#signinModal" data-dismiss="modal">Submit</button>

Calling a user defined PHP functions using AJAX in the same file

I'm trying to process a form in PHP, however I don't want the page to refresh when the submit button is pressed. Instead I want to check if the email and password is correct; then either log the user in or display an error message (login_error in the example).
All of the code snippets below are in the same file, my question is how do I call a php function using AJAX to process the form in the same file?
Form:
<!-- Model dialog for login button -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" id="login_form" action="index.php" method="POST">
<div class="modal-header">
<h4>Login</h4>
</div>
<div class="modal-body">
<div class="form-group" id="login_error">
<label for="login-username" class="col-sm-2 control-label"></label>
<div class="col-sm-10" style="color: red;">
Oops! Your username or password is incorrect, please try again!
</div>
</div>
<div class="form-group">
<label for="login-username" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input required type="text" class="form-control" name="login-email" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="login-password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input required type="password" class="form-control" name="login-password" placeholder="Password">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" href = "#register" data-toggle="modal" formnovalidate>Register</button>
<button type="submit" class="btn btn-success" name="login_submit" id="login_submit">Login</button>
</div>
</form>
</div>
</div>
</div>
PHP I want to call:
<?php
if (isset($_POST["login_submit"])) {
$email = $_POST["login-email"];
$password = $_POST["login-password"];
if (login($email, $password)) {
die("<script>location.href = 'LoginSystem/cookiecontrol.php?action=set&email=$email'</script>"); // Set the cookie
} else {
echo "<script>$('#login_error').show();</script>";
}
}
?>
JQuery:
<script>
$("#login_error").hide();
$("#login_submit").click(function (e) {
e.preventDefault();
$.ajax({url: '/PHP%20Files/Computing%20Project%20-%20Website/ICTeacher/LoginSystem/wrongpassword.php',
data: {action: 'index.php'},
type: 'post',
success: function (output) {
alert(output);
}
});
});
</script>

To process the php code via an ajax request in the same page is fairly straightforward but you have to ensure that you only return the data you want rather than the entire page which could easily happen.
To do that use ob_clean to discard the output buffer to that current point in the script and then ensure you exit after sending the data.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST["login_submit"] ) ) {
ob_clean();/* discard any output there may have been so far in the document */
$email = $_POST["login-email"];
$password = $_POST["login-password"];
if ( login( $email, $password ) ) {
die("<script>location.href = 'LoginSystem/cookiecontrol.php?action=set&email=$email'</script>"); // Set the cookie
} else {
echo "<script>$('#login_error').show();</script>";
}
/* the ajax request should only process to this point */
exit();
}
?>

Form inside bootstrap modal not updating values in mysql

I have a table in my page which displays data about a certain request.
When I click the 'Add Cedula Number', which is a button, it shows a bootstrap modal. And inside it, has a form.
The value in the ID which is 14 is the ID of that row and it came from this code:
<td class=" ">
<button class="btn btn-primary btn-xs" id="<?php echo $data['idPerson'];?>" data-toggle="modal" data-target="#myModal"> Add Cedula Number </button>
</td>
Now, in order to pass the value in the modal, I used this code:
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
</script>
This is my modal code:
<div class="modal fade" id="myModal" 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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body"></div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>
And my php code is this:
<?php
include 'config.php';
if(isset($_POST['addCedula'])){
$id = $_POST['person_id'];
$date = $_POST['cedula_date'];
$number = $_POST['cedula_number'];
$sql = mysqli_query($conn, "UPDATE person SET dateOfCedulaPayment='$date' AND cedulaNumber='$number' WHERE idPerson='$id';");
mysqli_close($conn);
}
?>
I've been trying to look for the error for hours now. I really can't seem to find where. The value doesn't update in the database. Where did I go wrong? Your help will be much appreciated. Thank you.

#Fred's answer solved the problem (error in Update Query), Here is my 2 cent
This script is overkill to pass the data to modal.
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
All you need is change id="<?php echo $data['idPerson'];?>" to data-id="<?php echo $data['idPerson'];?>" and following 3 to 4 lines of script do the same job.
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$("#person_id").val(id);
});
});
Modal HTML
<div class="modal fade" id="myModal" 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">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-sm-3 control-label">ID</label>
<div class="col-sm-9">
<input type="text" value = "" class="form-control" id="person_id" name="person_id" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Cedula Number</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="cedula_number" name="cedula_number"/>
</div>
</div>
</div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>

Your query is incorrect. That isn't how UPDATE works. You need to use a comma and not the AND logical operator http://dev.mysql.com/doc/en/logical-operators.html
UPDATE person SET dateOfCedulaPayment='$date', cedulaNumber='$number' WHERE idPerson='$id';
Reference:
http://dev.mysql.com/doc/en/update.html
Checking for errors on your query would have triggered a syntax error:
http://php.net/manual/en/mysqli.error.php
Sidenote: To see if your query (UPDATE) was truly successful, use mysqli_affected_rows().
http://php.net/manual/en/mysqli.affected-rows.php
In not doing so, you may get a false positive.
Nota:
Your present code is open to SQL injection. Use prepared statements, or PDO with prepared statements.

How can I keep the modal window open after login failure?

Using bootstrap, I have a modal window open for login purposes from the Navbar. If the login credentials fail, the modal disappears the same as it does if the credentials were successful. How, after running through the PHP validation process, can I make the modal reappear for the users to attempt login again? The non-working relevant code is:
PHP Validation code:
<head>
<?php
if(PassHash::check_password($row["password"], $_POST['pwd1']))
$_SESSION["login"] = 1;
$_SESSION['btnhs'] = 3;
} else {
$_SESSION["login"] = 0;
$loginErr ="Username or password incorrect.";
?>
<script type="text/javascript">
$(function() {
$('#myModal').modal('show');
});
</script>
<?php
}
</head>
HTML:
<!-- Modal -->
<div class="modal fade" tabindex="-1" id="myModal" role="dialog" data-backdrop="static">
<div class="modal-dialog" data-backdrop="static">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form method="post" autocomplete="on" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" required="" name="uname" id="uname" autofocus="" placeholder="Enter username">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="password" class="form-control" required="" name="pwd1" id="pwd1" placeholder="Enter password">
<span class="error" style="color: red"><?php echo $loginErr;?></span><br>
</div>
<div class="form-actions">
<button type="submit" name="login" class="btn btn-success btn-block"><span class="glyphicon glyphicon-log-in"></span> Login</button>
</div>
</form>
</div>
I'm trying to call the javascript snippet from an unsuccessful password at login, but this isn't working. Can anyone see what is wrong with this and offer a solution? Thanks.

You are making your request synchronously.
If you want to keep modal open, you need to make AJAX request to server and not fully submit the form.
For example, with jQuery you can use this: http://api.jquery.com/jquery.post/

refresh page after submit on bootstrap modal

I am using bootstrap admin theme in one of my project. I have a popup modal in one of the php page and i have a registration form in that popup, now when i enter the details and click on submit, the data is actually being inserted into the database and modal closes by default, but the page doesn't refreshes, as i have a table of registered members in the page, i only can see that entry when i refresh the page, and again when i refresh the page, it asks me to reload the page or close the alert box, when i click on reload, the entry goes into the database for two times, i am attaching my code, please help, i am new to stack overflow and bootstrap as well.
Modal code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Add New Member </button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Member</h4>
</div>
<div class="modal-body">
<form method="post">
<fieldset>
<div class="form-group">
<label>First Name</label>
<input name="fname" class="form-control" placeholder="First Name" type="text" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input name="lname" class="form-control" placeholder="Last Name" type="text" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input name="email" class="form-control" placeholder="Email Address" type="email" required>
</div>
<div class="form-group">
<label for="h-input">Cell Number</label>
<input name="cell" type="text" class="form-control" placeholder="XXX XXX XXXX (Enter number without space)">
</div>
<div class="form-group">
<label>Member Type</label>
<select class="form-control" name="membertype">
<option value="Member">Member</option>
<option value="Guest">Guest</option>
</select>
</div>
<div class="form-group">
<label>Member Status</label>
<select class="form-control" name="memberstatus">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</fieldset>
<div>
<input name="addmember" class="btn btn-primary" value="Add New Member" type="submit"/>
</div>
</form>
<?php
if(isset($_POST['addmember'])) {
require('config.php');
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$cell = $_POST['cell'];
$mtype = $_POST['membertype'];
$mstatus = $_POST['memberstatus'];
$addmember = "INSERT INTO members (fname, lname, email,cellnumber,type,status,regdate) VALUES (:fname,:lname,:email,:cell,:mtype,:mstatus,CURDATE())";
$q = $conn->prepare($addmember);
$q->execute(array(
':fname'=>$fname,
':lname'=>$lname,
':email'=>$email,
':cell'=>$cell,
':mtype'=>$mtype,
':mstatus'=>$mstatus,
));
if(!$q) {
echo "Error: Member not added.";
}
else {
header("Location: addMembers.php");
}
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i have created this modal file as a separate file and included in my main php file where table of registered members is printed.

Location requires an absolute path. Check the second to last note in the Notes section.
http://php.net/manual/en/function.header.php
When you manually refresh the page you are just resending the form data that was submitted which is why you get two entries in the DB.