How to trigger a modal popup from a php header? - php

I am trying to create a protection php page where visitor has to login before accessing a page. The visitor will be prompt to login with a modal form. May I know how I can achieve this?
Here is the anchor leading to community.php that will require login before access:
Share your ideas with our community!
Here is the community.php (I haven't built much of the page yet):
<?php include "protection.php" ?>
<?php include "webhead.php" ?>
Here is my protection php page:
<?php
session_start();
if($_SESSION['login_status'] != "ok") {
header("location:modallogin.php");
}
?>
Here is my modal html:
<div id="loginModal" class="modal fade">
<div class="modal-dialog modal-login">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Please Login</h4>
<p></p>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-body">
<form action="checklogin.php" method="post">
<div class="form-group">
<label for="loginModalName">Username</label>
<input type="text" class="form-control" name="name" id="loginModalName" placeholder="Please enter your username" required="required">
<p></p>
<label for="loginModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="loginModalPassword" placeholder="Please enter your password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: #f4f4f8 !important;">Login</button>
</div>
</form>
</div>
<div class="modal-footer">Join us now!</div>
</div>
</div>
</div>
</div>

Modal windows are displayed via Javascript on the client side, for example like this. You need to send the user back to the home page with a toast message telling them to log in first.
Your redirect is not correct, HTTP requires a space after the : like this
header("Location: modallogin.php");

Related

Include HTML markup from another file inside PHP file

So this is the method that I am using and it's kinda working, but I don't think that it's best practice and just seems kinda off, so I wanted to see if someone knew a much better and/or cleaner method on importing HTML markup that will be located in two locations.
So let's say that I have my main index.php file:
$mode = get_field('mode');
<?php if ($mode == 'page'): ?>
<div class="container my-4 <?= $class_name?>">
<div class="row justify-content-md-center pardot-form">
<div class="col-md-6 col-lg-6">
<h3>Pardot Form</h3>
<?php include_once 'pardot-form.php'?>
</div>
</div>
</div>
<?php else: ?>
<div class="modal_element" data-toggle="modal" data-target="#modal-<?= $id ?>" data-cookie="<?= get_field('cookie'); ?>"></div>
<div class="modal fade" id="modal-<?= $id ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pardot Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">✕</span>
</button>
</div>
<div class="modal-body">
<?php include_once 'pardot-form.php'?>
</div>
</div>
</div>
</div>
<?php endif; ?>
Then I am calling <?php include_once 'pardot-form.php'?> in two locations because I don't want to repeat the same HTML output twice, so the pardot-form.php file contains the following:
<form class="form">
<div class="form-group">
<label for="formGroupExampleInput">First Name:</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Last Name:</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
<div class="my-3">
<button type="submit" class="btn btn-primary" disabled>Submit</button>
</div>
</form>
Is there a cleaner way to "Grab HTML markup and append it in two locations", the only difference is the outer layer where one conditional is a container block and another is a modal.
I can even delete the pardot-form.php file and add in the HTML markup in the same index.php file if you know of a cleaner way.
All help is appreciated!
You could save include_once 'pardot-form.php' to a variable under the $mode = get_field('mode'); declaration and then use it wherever you want.

My browser keeps sending me to the raw PHP file when I try to send form data to a raw text file?

sorry if the answer is really simple but I wanted to send data from a form on a modal to a raw text file using PHP but I can't seem to get it to work. It just redirects me to a PHP file and doesn't generate the text file.
HTML form:
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="action.php" method="POST">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"#>Input your details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" required value="Enter Username" name="username" id="usr">
</div>
<div class="form-group">
<label for="psw">Password:</label>
<input type="password" class="form-control" id="psw" required value="Password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
</div>
</div>
<!-- Password validation -->
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
PHP:
<?php
$path = 'data.txt';
if (isset($_POST['username']) && isset($_POST['password'])) {
$fh = fopen($path,"a+");
$string = $_POST['username'].' - '.$_POST['password'];
fwrite($fh,$string); // Write information to the file
fclose($fh); // Close the file
exit;
}
?>
I appreciate any help, thank you!

Two contact forms with same action without duplicating code

I have a site that has two contact forms (One is avaliable in a modal and the other is on the bottom of the page). Both forms have the same structure e.g same inputs and names etc... they both also have the same action method.
My question is - how can I use the same action method on both forms where the $_POST variables are dependant on what form is submitted? For example if I fill out the second contact form, the action gets the data from the first contact form.
I thought that one way would be to give both forms different id's e.g firstForm and secondForm and then pass the id of the form as a parameter to the action method. Although this could work I am not sure if it is an efficient way or if there is an easier way?
I have completely disregarded the fact that I could actually make two separate action methods but that is just ridiculous and a lot of redundant programming when I know I can just have one action method to serve both forms, but I'm just at a loss of how to implement it properly.
This is the first one:
<div id="myModal" class="modal fade" 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>
<h3 id="myModalLabel">Flick me an email!</h3>
<p>I will get back to you ASAP!</p>
</div>
<div class="modal-body">
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php">
<div class="form-group"><input class="form-control required" type="text" name="name" placeholder="Name" data-placement="top"></div>
<div class="form-group"><input class="form-control email" type="email" name="email" placeholder="example#email.com" data-placement="top" ></div>
<div class="form-group"><textarea class="form-control" name="message" placeholder="Your message here.." data-placement="top" style="height: 200px;" ></textarea></div>
<div class="form-group"><button type="submit" id="modal-submit" class="btn btn-danger btn-lg">Send Message</button><button class="btn" data-dismiss="modal" aria-hidden="true" style="float: right;">Cancel</button> </div>
</form>
</div>
</div>
</div>
</div>
And the second one:
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="name" class="form-control" required="required"
placeholder="Name">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="email" name="email" class="form-control" required="required"
placeholder="Email address">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control"
rows="8" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-danger btn-lg">Send Message
</button>
</div>
</div>
</div>
</form>
In each of your forms you can add a hidden input element between your <form>...</form> tags to indicate which form is being submitted.
In your first form you could have this element:
<input type="hidden" name="type" value="form1">
Then in your second form add this element
<input type="hidden" name="type" value="form2">
When your form is submitted, the receiving PHP script can read the type value as a post variable that could you act on, e.g.,
if ($_POST['type']=='form1') {
// Do this
} else if ($_POST['type']=='form2') {
// Do this instead
}
Maybe you don't want to add a hidden input and you could add a parameter to the GET string of your form's action.
So, in your first form you can do this - add ?type=form1 to the end of your action:
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php?type=form1">
And, in your second form you can do this - add ?type=form2 to the end of your action:
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="assets/php/sendemail.php?type=form2">
In the sendmail.php script you can access the value using the $_GET variable:
if ($_GET['type']=='form1') {
// Do this
} else if ($_GET['type']=='form2') {
// Do this instead
}
Place a:
<input type="hidden" name="formPosted" value="1">
inside every form that has action to specific php file, and for each form change input value, then in php use if else to see which form is submitted :) and then your code... :)

Twitter Bootstrap Modal not working in both tabs

I am using Twitter Bootstrap for both tabs and modals. I have two tabs that use identical code. In the first tab the modals work perfectly, but in the second tab the screen will darken but the modal does not appear.
here is my code for calling the modal (same code used in both tabs) in list.php:
<a type="button" href="edit.php?id='.$id.'" data-target="#edit_modal" data-toggle="modal">Edit</a>
here is my modal in list.php
<div class="modal hide fade" id="edit_modal" 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">&times</button>
<h3>Edit Testimonials</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
and here is edit.php where the true body of the modal is
<div id="edit_modal">
<div class="modal-body">
<?php echo ($name_error != "") ? $name_error : ""; ?>
<form class="form-horizontal" action="edit.php?id=<?php echo $id; ?>" method="post">
<div class="control-group">
<label class="control-label">Testimonial</label>
<div class="controls">
<textarea class="input-xlarge" name="body" cols=100 rows=5><?php echo $testimonial['body']?></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Author</label>
<div class="controls">
<textarea class="input-xlarge" name="author" cols=100 rows=5><?php echo $testimonial['author']?></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Update Testimonial" name="submit-form" />
Close
</div>
</form>
</div>

Twitter bootstrap modal popup displayed for about a second, then dissappears

I am using TB 2.0 on a signup page. I have added links at the bottom of the signup page, to allow users to refer to our terms etc.
This is a snippet of the markup I am using:
<div class="container">
<!-- First 2 rows are modal elements -->
<div class="row">
<div class="span12">
<div id="userAgreement" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userAgreementLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="userAgreementLabel">User Agreement</h4>
</div>
<div class="modal-body">
<p><?php echo file_get_contents(url_for('#legal',true)); ?></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="privacyPolicy" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="privacyPolicyLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="privacyPolicyLabel">Privacy Policy</h4>
</div>
<div class="modal-body">
<p><?php echo file_get_contents(url_for('#privacy', true)); ?></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<h3 align="center">Sign up to Foobar</h3>
<br />
<div class="row">
<div class="span5 offset1 gray-1px-rh-border">
<form class="form-horizontal" action="#" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input type="text" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputConfirmPassword">Confirm Password</label>
<div class="controls">
<input type="password" id="inputConfirmPassword" placeholder="ConfirmPassword">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="chk-agree">Agree Terms*
</label>
<button type="submit" class="btn btn-success" id="signup-button">Get Access</button>
</div>
</div>
</form>
</div>
<div class="span4">
<div class="container shift-right">
</div>
</div>
</div>
<br />
<div class="row">
<div class="span10 offset1">
<div class="sign-up-agreement">
<small>*By signing up, you are indicating that you have read, understood and agree to our
<a id="lpl1" href="#userAgreement" data-toggle="modal">user agreement</a> and
<a id="lpl2" href="#privacyPolicy" data-toggle="modal">privacy policy</a>.
</small>
</div>
</div>
</div>
</div>
The popup dialog is temporarily shown (for approx one second), before it disappears, it appears to be scrolling from bottom to up (I had to do this a few times, since it happens so quickly). The dialog appears to scroll from bottom to up, the last thing I see is the dialog box header with the title, and then it disappears, and the page remains darkened - until I click on the screen.
[[Edit]]
After further investigation using Firebug, I have narrowed down the problem to be something to do with javascript. I notice that the #display# style attribute applied to the element is (very briefly), set to block, and then very quickly (for some unknown reason), the #display# attribute is set to none - this then causes the dialog to disappear.
I manually set the display attribute to block in the firebug console, and the popup dialog appeared, and behaved as normal. So the question is this: what is causing the display attribute to be reset to 'none' after about 1 second?
[[Edit 2]]
When i replace the file_get_content() function call with simple text like 'hello world' and 'hello 2' for the two popups, they work as expected (i.e. correctly). So it is definitely something to do with the HTML text being returned in the get_file_content() function.
Any help appreciated.
Sometimes this is caused by including jQuery more than once make sure this is not the case.
Also, you can manually change the position of the modal to ensure that it starts on the screen. You just need to alter the margins. Take a look at my tutorial: change twitter bootstrap position I hope this helps.
In the end, I solved this by placing the content retrieved by file_get_contents() in an iframe. Don't know if that is there is a better way, but this is the only thing I found that works.

Categories