I have a small problem with my website's contact page. Whenever I use php for the form another large box appears above the form as if there was a additional set of <p> tags there; I am not sure why this keeps happening.
Here is the code.
Update: I have removed the box problem but now I have to figure out the css to change so that the form fits in with the rest of the webpage, and auto; doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cromika Web Designs - Contact</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function checkForm() {
var theName = document.getElementById('name').value;
var theEmail = document.getElementById('email').value;
var theMessage = document.getElementById('message');
var emailerr = document.getElementById('emailspan');
var nameerr = document.getElementById('namespan');
var messageerr = document.getElementById('messagespan');
var message;
var myregex = /\S+#\S+\.\S+/;
if(theName==""){
message = 'Name is required;';
document.form1.name.focus();
nameerr.innerHTML = message;
return false;
} else{
nameerr.innerHTML ="";
}
if(theEmail=="") {
message = 'Email is required;';
document.form1.email.focus();
emailerr.innerHTML = message;
return false;
} else if (!myregex.test(theEmail)){
emailerr.innerHTML = "Your email entry is invalid;";
document.form1.email.focus();
return false;
} else {
emailer.innerHTML ="";
}
if(theMessage.value=="" || theMessage.value ==null || theMessage.value.indexOf('\n') > 0) {
message = 'Please enter your message;';
document.form1.message.focus();
messageerr.innerHTML = message;
return false;
} else {
messageerr.innerHTML = "";
}
}
</script>
</head>
<body>
<header><img src="images/simple-logo.png" alt=""</img> </header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
</nav>
<h1> Contact me!</h1>
<?php
if(isset($_POST['send_email'])){
// collect the form values
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
// set the email properties
$to = 'email#email.com';
$subject = "Contact Form Submission";
$from = $email;
$headers = "From: $from";
// attempt to send the mail, catch errors if they occur
try {
mail($to, $subject, $message, $headers);
$msg = "<strong>Your mail was sent successfully!</strong>";
} catch(Exception $e) {
$msg = "An Exception was thrown: ".$e -> getMessage()."<br>";
}
}
?>
<table align="left">
<form name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="return checkForm()">
<tr><th>Name:</th>
<td><input type="text" name="name" id="name" /><br><span style="color:red;" id="namespan"></span>
</td>
</tr>
<tr><th>Email:</th>
<td><input type="text" name="email" id="email" /><br><span style="color:red;" id="emailspan"></span>
</td>
</tr>
<tr><th>Message:</th>
<td><textarea name="message" id="message"></textarea><br><span style="color:red;" id="messagespan"></span>
</td>
</tr>
<tr><td></td><td><input type="submit" name="send_email" value="Send Email Message" /></td></tr>
</form>
</table>
<footer></footer>
</body>
</html>
And here is the CSS for the site
#charset "UTF-8";
/* CSS Document */
body{
font-size:16px;
cursor:default;
font-family:Georgia, serif;
background-color:#000000;
color: white;
}
header {
border-radius: 5px;
text-align: center;
margin-top: 12px;
height: 71px;
}
nav {
border-radius: 5px;
height: 20px;
width: auto;
display: block;
text-align:center;
padding-right: 35px;
color: #ffffff;
font-weight:bold;
background-color:#8000aa;
padding-top: .05px;
padding-bottom: 20px;
margin-top: 12px;
margin-bottom: 12px;}
nav li {
display: inline;
float: center;
}
nav a {
display: block, inline;
width: 60px;
}
/*link styles*/
a:link {
text-decoration: none;
}
a:visited {
text-decoration: underline;
color: white;
}
a:hover {
text-decoration: underline;
color: blue;
}
a:active {
text-decoration: underline;
}
/* end link styles */
/* main content */
h1 {
border-radius: 5px;
width: auto;
margin: 0 auto;
text-align: center;
margin-bottom: 12px;
background-color: #8000aa;}
table {
border-radius: 5px;
width: 36px;
height: 150px;
margin: 0 auto;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
background-color: #8000aa;
}
p {
border-radius: 5px;
width: auto;
height: auto;
margin: 0 auto;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
background-color: #8000aa;}
p a {
font-weight: bold;
}
/* end main content*/
footer {
border-radius: 5px;
clear: both;
text-align: center;
padding-top:12px;
padding-bottom:12px;
margin-bottom: 12px;
font-weight:bold;
background-color:#8000aa;}
Any help is appreciated!
Try removing the <p> and </p> from around the table you use for your form. While on my test system this didn't put an actual box, it certainly pushed the form part well down the page.
FYI, I used Google Chrome and right click and select Inspect Element and it's showed up quite quickly.
Related
I'm working on a custom PHP, modal login form. When I click the Login button, I receive the 404 resource not found, being my PHP file that handles the authentication.
The two files are here:
action_page.php
<?php
session_start();
$name = 'user1';
$pwd = 'home';
if(isset($_POST['submit'])){
// get vars
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $name and $password == $pwd){
redirect('http://www.mden.com');
} else {
redirect('http://www.youtube.com');
}
} else {
redirect('login.html');
}
?>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
background-color: rgb(0,0,0,0.4);
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5px auto;
border: 1px solid #888;
width: 20%;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: white;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
</style>
</head>
<body>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" method="post" action="/action_page.php">
<!-- No Avatar!!! -->
<!-- Login Info -->
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required><br /><br />
<label><b>Password</b></label>
<input type="text" placeholder="Enter Password" name="psw" required><br /><br />
<button name="do_login" type="submit">Login</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
The file path used in your form's action is correct?
Try remove the "/" from action="/action_page.php" if action_page.php stay on same directory.
I have this login form which looks like this:
When I enter a wrong information, it would look like this:
Now the problem is that when I get the error, it moves my login form down.
Is there anyway I could prevent the form from moving when I get the error message? Also maybe I could put the error message below the form but I don't know how to, I tried echoing the error below the form but it didn't work.
Here's my PHP:
<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info#vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();
//Include the database connection file
include "database_connection.php";
//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
//Variables Assignment
$username = trim(strip_tags($_POST['username']));
$user_password = trim(strip_tags($_POST['passwd']));
$validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");
//Validate against empty fields
if($username == "" || $user_password == "")
{
$error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
}
elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
{
//The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
$get_user_information = mysql_fetch_array($validate_user_information);
$_SESSION["VALID_USER_ID"] = $username;
$_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
header("location: home.php");
}
else
{
//The submitted info the user are invalid therefore, display an error message on the screen to the user
$error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
echo $error;
}
}
?>
Here's my HTML:
body {
background-image: url(img/hero.jpg);
background-size: cover;
font-family: Montserrat;
}
.logo {
width: 400px;
height: 200px;
background-image: url(img/corelogo.png);
background-size: cover;
margin: -20px auto;
}
.login-block {
width: 320px;
padding: 20px;
background: transparent;
border-radius: 5px;
border-top: 5px solid #011f4b;
margin: 0 auto;
font-family: Questrial;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: capitalize;
letter-spacing: 2px;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#username:focus {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password:focus {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input:active,
.login-block input:focus {
border: 1px solid #011f4b;
}
.login-block button {
width: 100%;
height: 40px;
background: #011f4b;
box-sizing: border-box;
border-radius: 5px;
border: 0px solid #1293e1;
color: #fff;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
outline: none;
cursor: pointer;
margin-bottom: 10px;
}
.login-block button:hover {
background: #1293e1;
}
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<center>
<div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />
<!-- Code Begins -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="logo"></div>
<div class="login-block">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<h1>Employee Login</h1>
<input type="text" value="" placeholder="Username" id="username" name="username" required />
<input type="password" value="" placeholder="Password" id="password" name="passwd" required />
<input type="hidden" name="submitted" id="submitted" value="yes">
<button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
</form>
<button>Back</button>
</div>
<!-- Code Ends -->
Basically try this:
.info {position: absolute; }
1st Remove echo $error in the Code:
$error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
//echo $error;
2nd Add this Code at the top of form tag in html
<?php
if(isset($error) && isset($_POST['submit'])){
echo $error;
}
?>
<?php
/*********************************************************************
* This script has been released with the aim that it will be useful.
* Written by Vasplus Programming Blog
* Website: www.vasplus.info
* Email: info#vasplus.info
* All Copy Rights Reserved by Vasplus Programming Blog
***********************************************************************/
session_start();
ob_start();
//Include the database connection file
include "database_connection.php";
//Check to see if the submit button has been clicked to process data
if(isset($_POST["submitted"]) && $_POST["submitted"] == "yes")
{
//Variables Assignment
$username = trim(strip_tags($_POST['username']));
$user_password = trim(strip_tags($_POST['passwd']));
$validate_user_information = mysql_query("select * from `signup_and_login_users_table` where `username` = '".mysql_real_escape_string($username)."' and `password` = '".mysql_real_escape_string($user_password)."'");
//Validate against empty fields
if($username == "" || $user_password == "")
{
$error = '<br><div class="info">Sorry, all fields are required to log into your account. Thanks.</div><br>';
}
elseif(mysql_num_rows($validate_user_information) == 1) //Check if the information of the user are valid or not
{
//The submitted info of the user are valid therefore, grant the user access to the system by creating a valid session for this user and redirect this user to the welcome page
$get_user_information = mysql_fetch_array($validate_user_information);
$_SESSION["VALID_USER_ID"] = $username;
$_SESSION["USER_FULLNAME"] = strip_tags($get_user_information["fullname"]);
header("location: home.php");
}
else
{
//The submitted info the user are invalid therefore, display an error message on the screen to the user
$error = '<div class="info" style="color: red; text-align: center;">You have entered an invalid username or password</div>';
//echo $error;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="img/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CORE INTRANET</title>
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<!-- Required header file -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-image: url(img/hero.jpg);
background-size: cover;
font-family: Montserrat;
}
.logo {
width: 400px;
height: 200px;
background-image: url(img/corelogo.png);
background-size: cover;
margin: -20px auto;
}
.login-block {
width: 320px;
padding: 20px;
background: transparent;
border-radius: 5px;
border-top: 5px solid #011f4b;
margin: 0 auto;
font-family: Questrial;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: capitalize;
letter-spacing: 2px;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#username:focus {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password:focus {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #011f4b;
}
.login-block button {
width: 100%;
height: 40px;
background: #011f4b;
box-sizing: border-box;
border-radius: 5px;
border: 0px solid #1293e1;
color: #fff;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
font-family: Questrial;
letter-spacing: 2px;
outline: none;
cursor: pointer;
margin-bottom: 10px;
}
.login-block button:hover {
background: #1293e1;
}
</style>
<body>
<center>
<div style="font-family:Questrial, sans-serif; font-size:24px;"></div><br clear="all" /><br clear="all" />
<!-- Code Begins -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="logo"></div>
<div class="login-block">
<?php
if(isset($error) && isset($_POST['submit'])){
echo $error;
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<h1>Employee Login</h1>
<input type="text" value="" placeholder="Username" id="username" name="username" required />
<input type="password" value="" placeholder="Password" id="password" name="passwd" required />
<input type="hidden" name="submitted" id="submitted" value="yes">
<button type="submit" name="submit" class="btn btn-primary btn-block btn-large">Login</button>
</form>
<button>Back</button>
</div>
<!-- Code Ends -->
</center>
</body>
</html>
I am making a chat box in codeigniter, but after enter the name and message, pop up box is coming showing 'Forbidden'.
I am really confused what I put instead shout.php here(chatbox.php')
$.post('shout.php', load_data, function(data) {
instead of 'shout.php' I put http://localhost/myfoldername/application/views/shout.php
my controller
money_c
function chat(){
$this->load->view('chatbox');
}
chatbox.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Box</title>
<style type="text/css">
<!--
.shout_box {
background: #627BAE;
width: 260px;
overflow: hidden;
position: fixed;
bottom: 0;
right: 20%;
z-index:9;
}
.shout_box .header .close_btn {
background: url(images/close_btn.png) no-repeat 0px 0px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(images/close_btn.png) no-repeat 0px -32px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .open_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold;
color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none;
cursor: pointer;
}
.shout_box .header:hover{
background-color: #627BAE;
}
.shout_box .message_box {
background: #FFFFFF;
height: 200px;
overflow:auto;
border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px;
display: block;
border-bottom: 1px solid #F3F3F3;
padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal;
float:right;
color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;
margin-top: 10px;
}
.user_info input {
width: 98%;
height: 25px;
border: 1px solid #CCC;
border-top: none;
padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold;
display: block;
}
-->
</style>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
$.post('shout.php', load_data, function(data) {
$('.message_box').html(data);
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
});
}, 1000);
//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
if(evt.which == 13) {
var iusername = $('#shout_username').val();
var imessage = $('#shout_message').val();
post_data = {'username':iusername, 'message':imessage};
//send data to "shout.php" using jQuery $.post()
$.post('shout.php', post_data, function(data) {
//append data into messagebox with jQuery fade effect!
$(data).hide().appendTo('.message_box').fadeIn();
//keep scrolled to bottom of chat!
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
//reset value of message box
$('#shout_message').val('');
}).fail(function(err) {
//alert HTTP server error
alert(err.statusText);
});
}
});
//toggle hide/show shout box
$(".close_btn").click(function (e) {
//get CSS display state of .toggle_chat element
var toggleState = $('.toggle_chat').css('display');
//toggle show/hide chat box
$('.toggle_chat').slideToggle();
//use toggleState var to change close/open icon image
if(toggleState == 'block')
{
$(".header div").attr('class', 'open_btn');
}else{
$(".header div").attr('class', 'close_btn');
}
});
});
</script>
</head>
<body>
<div class="shout_box">
<div class="header">chat box<div class="close_btn"> </div></div>
<div class="toggle_chat">
<div class="message_box">
</div>
<div class="user_info">
<input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" />
<input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />
</div>
</div>
</div>
</body>
</html>
shout.php
<?php
####### db config ##########
$db_username = 'root';
$db_password = '';
$db_name = 'money1';
$db_host = 'localhost';
####### db config end ##########
if($_POST)
{
//connect to mysql db
$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
die();
}
if(isset($_POST["message"]) && strlen($_POST["message"])>0)
{
//sanitize user name and message received from chat box
//You can replace username with registerd username, if only registered users are allowed.
$username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
$message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
$user_ip = $_SERVER['REMOTE_ADDR'];
//insert new message in db
if(mysqli_query($sql_con,"INSERT INTO shout_box(user, message, ip_address) value('$username','$message','$user_ip')"))
{
$msg_time = date('h:i A M d',time()); // current time
echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
}
// delete all records except last 10, if you don't want to grow your db size!
mysqli_query($sql_con,"DELETE FROM shout_box WHERE id NOT IN (SELECT * FROM (SELECT id FROM shout_box ORDER BY id DESC LIMIT 0, 10) as sb)");
}
elseif($_POST["fetch"]==1)
{
$results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from shout_box ORDER BY id DESC LIMIT 10) shout_box ORDER BY shout_box.id ASC");
while($row = mysqli_fetch_array($results))
{
$msg_time = date('h:i A M d',strtotime($row["date_time"])); //message posted time
echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>';
}
}
else
{
header('HTTP/1.1 500 Are you kiddin me?');
exit();
}
}
but after entering name and message alert box will pop up showing 'Forbidden'.
I don't think you fully grasp MVC architecture and this is not really the place to explain it.
I suggest you study it more but what may work for you here is to modify your controller function to this:
function chat(){
$this->load->view('chatbox');
}
function shout(){
$this->load->view('shout');
}
You would then need to ensure that the URL(route) works.
Assume you current URL is www.mysite.com/someController/chat/
then the new URL would be www.mysite.com/someController/shout/
If this URL does not work then you would need to sort out your route to make it work.
If this URL works, then you need to update your JQuery URL from
.post('shout.php', load_data, function(data) {
to
.post('/someController/shout/', load_data, function(data) {
TL;DR
The jquery post function accesses the fule via the URL like a real person. It cannot load the file directly.
I had attempted with the following code and a little stuck now but here is what I'm wanting to achieve:
enter value in input and update preview html below
once user is happy with preview output can click generate
once clicked generate it will actually write the preview HTML to a first_name-last_name.html file within that same folder and then redirect to the first_name-last_name.html file
jQuery / HTML form:
<html>
<head>
<title>Ambient Lounge - Create eSig</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<!-- Include JS File Here -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style type="text/css">
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
}
hr {
margin-bottom: 1.5em;
}
.error_wrapper {
color: #D8000C;
background-color: #FFBABA;
padding: 10px;
margin-bottom: 1em;
}
.success_wrapper {
color: #4F8A10;
background-color: #DFF2BF;
padding: 10px;
margin-bottom: 1em;
}
#main {
float: left;
width: 20%;
}
#preview {
float: left;
width: 80%;
}
form label {
display: none;
}
form input {
margin-bottom: 0.5em;
padding: 5px;
width: 80%;
}
</style>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".error_wrapper, .success_wrapper").hide();
var v_first_name = $("#first_name").val();
var v_last_name = $("#last_name").val();
var v_title = $("#title").val();
var v_address = $("#address").val();
var v_phone = $("#phone").val();
var v_mobile = $("#mobile").val();
var v_email = $("#email").val();
var v_web = $("#web").val();
$(".input_change").keyup(function(){
$("#btn").attr("disabled", "disabled");
var current_input = $(this).attr("id");
console.log(current_input);
$("#p_" + current_input).html($("#" + current_input).val());
});
$("#verify").click(function() {
var has_error = false;
$('#first_name, #last_name, #title, #address, #email, #web').each(function() {
$(this).attr('style', 'border: 0;');
if ($(this).val() == '') {
$(".error_msg").html("<strong>Error(s):</strong> You are missing some enteries, please check and try again.");
$(".error_wrapper").show();
$(this).attr('style', 'border: 1px solid red;');
has_error = true;
}
});
if (has_error != true) {
$(".error_wrapper").hide();
alert("You have verified changes, please double check and if happy click create otherwise change values and verify again.");
$("#btn").removeAttr('disabled');
}
});
$("#btn").click(function() {
$.post("create_post.php", { // Data Sending With Request To Server
first_name:v_first_name,
last_name:v_last_name,
title:v_title,
address:v_address,
phone:v_phone,
mobile:v_mobile,
email:v_email,
web:v_web
}, function(response,status) { // Required Callback Function
alert("*----Received Data----*\n\nStatus : " + status);//"response" receives - whatever written in echo of above PHP script.
alert(response);
if(status == "success") {
$("#form")[0].reset();
} else {
}
});
});
});
</script>
</head>
<body>
<h2>Create e-mail signature</h2>
<hr>
<div class="error_wrapper">
<div class="error_msg"></div>
<ul></ul>
</div>
<div class="success_wrapper">
<div class="success_msg"><strong>Congraulations!</strong> You have successfully create your e-mail signature. You can view your e-mail signature by clicking here.</div>
</div>
<div id="main">
<form id="form" method="post">
<label>First Name</label>
<input type="text" name="first_name" id="first_name" class="input_change" placeholder="First name"/><br>
<label>Last Name</label>
<input type="text" name="last_name" id="last_name" class="input_change" placeholder="Last name"/><br>
<label>Title</label>
<input type="text" name="title" id="title" class="input_change" placeholder="Job title"/><br>
<label>Address</label>
<input type="text" name="address" id="address" class="input_change" placeholder="Business Address"/><br>
<label>Phone</label>
<input type="text" name="phone" id="phone" class="input_change" placeholder="Phone number"/><br>
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" class="input_change" placeholder="Mobile number"/><br>
<label>Email</label>
<input type="text" name="email" id="email" class="input_change" placeholder="Email address"/><br>
<label>Web</label>
<input type="text" name="web" id="web" class="input_change" placeholder="Web address"/>
</form>
<button id="verify">Verify</button> <button id="btn" disabled>Create</button>
</div>
<div id="preview">
<!-- PREVIEW OF HTML EMAIL -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style type="text/css">
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
.clear {
clear: both;
}
b {
font-weight: normal;
}
b.bold {
font-weight: bold;
}
.emailContent {
font-family:'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
width: 480px;
color: #767676;
}
.emailContent a {
color: #2A96B4;
text-decoration: none;
}
.emailName {
height: 62px;
}
.emailName img {
float: right;
margin-top: 1.2em;
margin-right: 0.8em;
}
.emailName p {
color: #767676;
font-size: 0.8em;
float: left;
}
.emailName p span {
color: #2A96B4;
font-weight: bold;
font-size: 1.2em;
}
.emailLogo {
height: 46px;
clear: both;
}
.emailLogo img {
float: left;
margin-top: 0.3em;
}
.emailLogo ul.socialList {
list-style: none;
border-left: 1px solid #aaaaaa;
padding-left: 1.5em;
margin: 0 0 0 1.5em;
float: left;
}
.emailLogo ul.socialList li {
display: inline-block;
}
.emailLogo ul.socialList li img {
margin: 0;
}
.emailDetails {
clear: both;
border-top: 5px solid #2A96B4;
margin-top: 1em;
}
.emailDetails p {
font-size: 12px;
margin: 0.3em 0;
}
.emailDetails p.larger {
font-size: 14px;
}
.emailDetails p span {
color: #2A96B4;
}
.emailNotice {
border-top: 1px solid #aaaaaa;
font-size: 0.6em;
padding-top: 0.8em;
margin-top: 2.5em;
}
</style>
<div class="emailContent">
<div class="emailName">
<p><span><b id="p_first_name" class="bold">James</b> <b id="p_last_name" class="bold">Brandon</b></span><br><b id="p_title">Global Technical Lead</b></p>
<img src="http://www.ambientlounge.com/emails/like-us-on-facebook.png" alt="Like us on Facebook" />
</div>
<div class="clear"></div>
<div class="emailLogo">
<img src="http://www.ambientlounge.com/emails/ambient-logo-email.png" alt="Ambient Lounge" />
<ul class="socialList">
<li><img src="http://www.ambientlounge.com/emails/icon-facebook.png" alt="Facebook" /></li>
<li><img src="http://www.ambientlounge.com/emails/icon-twitter.png" alt="Twitter" /></li>
<li><img src="http://www.ambientlounge.com/emails/icon-instagram.png" alt="Instagram" /></li>
</ul>
</div>
<div class="clear"></div>
<div class="emailDetails">
<p><span>a:</span> <b id="p_address">Old knows Factory, Unit 5C, Office 14, St Anns Hill Road, Nottingham, NG3 4GN</b></p>
<p><span>p:</span> <b id="p_phone">+44(0) 844 579 1112</b> | <span>m:</span> <b id="p_mobile">+44(0) 771 809 0 809</b></p>
<p class="larger"><span id="p_email">james#ambientlounge.com</b> | <b id="p_web">www.ambientlounge.co.uk</b></p>
</div>
<p class="emailNotice">This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.</p>
</div>
</div>
</body>
</html>
Current PHP Post file:
<?php
if($_POST["first_name"]) {
$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
$title = $_POST["title"];
$address = $_POST["address"];
$phone = $_POST["phone"];
$mobile = $_POST["mobile"];
$email = $_POST["email"];
$web = $_POST["web"];
$filePath == $first_name + "-" + $last_name + ".html";
if(file_exists($filePath)){
echo "Already exisits";
} else {
touch( $filePath ); //create file if it does not exist
fwrite( $file, '
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ambient Lounge - e-Mail Signature (James Brandon)</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style type="text/css">
#import url("http://fonts.googleapis.com/css?family=Open+Sans");
.clear {
clear: both;
}
.emailContent {
font-family:"Open Sans", "Helvetica Neue", Helvetica, sans-serif;
width: 480px;
color: #767676;
}
.emailContent a {
color: #2A96B4;
text-decoration: none;
}
.emailName {
height: 62px;
}
.emailName img {
float: right;
margin-top: 1.2em;
margin-right: 0.8em;
}
.emailName p {
color: #767676;
font-size: 0.8em;
float: left;
}
.emailName p span {
color: #2A96B4;
font-weight: bold;
font-size: 1.2em;
}
.emailLogo {
height: 46px;
clear: both;
}
.emailLogo img {
float: left;
margin-top: 0.3em;
}
.emailLogo ul.socialList {
list-style: none;
border-left: 1px solid #aaaaaa;
padding-left: 1.5em;
margin: 0 0 0 1.5em;
float: left;
}
.emailLogo ul.socialList li {
display: inline-block;
}
.emailLogo ul.socialList li img {
margin: 0;
}
.emailDetails {
clear: both;
border-top: 5px solid #2A96B4;
margin-top: 1em;
}
.emailDetails p {
font-size: 12px;
margin: 0.3em 0;
}
.emailDetails p.larger {
font-size: 14px;
}
.emailDetails p span {
color: #2A96B4;
}
.emailNotice {
border-top: 1px solid #aaaaaa;
font-size: 0.6em;
padding-top: 0.8em;
margin-top: 2.5em;
}
</style>
<div class="emailContent">
');
fwrite( $file, '
<div class="emailName">
<p><span>'.$first_name.' '.$last_name.'</span><br>'.$title.'</p>
<img src="http://www.ambientlounge.com/emails/like-us-on-facebook.png" alt="Like us on Facebook" />
</div>
<div class="clear"></div>
<div class="emailLogo">
<img src="http://www.ambientlounge.com/emails/ambient-logo-email.png" alt="Ambient Lounge" />
<ul class="socialList">
<li><img src="http://www.ambientlounge.com/emails/icon-facebook.png" alt="Facebook" /></li>
<li><img src="http://www.ambientlounge.com/emails/icon-twitter.png" alt="Twitter" /></li>
<li><img src="http://www.ambientlounge.com/emails/icon-instagram.png" alt="Instagram" /></li>
</ul>
</div>
<div class="clear"></div>
<div class="emailDetails">
<p><span>a:</span> '.$address.'</p>
<p><span>p:</span> '.$phone.' | <span>m:</span> '.$mobile.'</p>
<p class="larger">'.$email.' | '.$web.'</p>
</div>
');
fwrite( $file, '
<p class="emailNotice">This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.</p>
</div>
</body>
</html>
');
$file = fopen( $filePath, "w" );
fwrite( $file, $data );
fclose( $file );
$data = file_get_contents( $filePath ); //do this after closing your writing
}
}
?>
You can write to a file with:
touch( $filePath ); //create file if it does not exist
$file = fopen( $filePath, "w" );
fwrite( $file, $data );
fclose( $file );
This will replace the entire file contents with what you fwrite().
You can check if a file already exists with
file_exists( $filePath );
You can define your custom file path in a manner like
$filePath = "whatever directory you want it to go to/". $firstnamevariable ."-". $lastnamevariable .".html";
You can keep a running $data variable that you write to the file at the end by appending to, like how $filePath above is appending. Or you can simply write to the file multiple time.
fwrite( $file, "<html><head></head><body>" );
fwrite( $file, "<div>First Name: ". $firstnamevaraible ."</div>" );
fwrite( $file, "<div>Last Name: ". $lastnamevariable ."</div>" );
fwrite( $file, "</body></html>" );
Once you've created your file, if you want to return the entire contents to the user you can do
$data = file_get_contents( $filePath ); //do this after closing your writing
Then you can echo $data to the user or if you want, just echo that function without the need for a variable.
I created a WEB FORM which is supposed to forward the message(s) of people who want to contact me, right into my GMAIL's inbox. It was supposed to be simple: people who visit my site and want to CONTACT me are just supposed to fill out their name, email and message and click submit button which should forward the message to my gmail address. However, that doesn't happens and I can't figure out why. I tried to test it via XAMPP but I never receive anything in my inbox.
In fact, I always receive the message: SMTP ERROR: COULD NOT CONNECT TO SMTP HOST.
I am still new to web design and PHP so this is probably a basic question for you. I tried to solve this problem for a few days, asked for help on some forums but still couldn't find the solution.
I downloaded XAMPP 1.8.1. in ZIP form and extracted it to C:\xampp folder.
Then I started the Apache server and requested my php file via localhost/email/newnew.php
I simply filled the webform and clicked on submit button and then I receive the message: SMTP ERROR: COULD NOT CONNECT TO SMTP HOST.
Here is my PHP code:
<?php
require_once 'PHPMailer/class.phpmailer.php';
// form url sanitizing
$php_self = filter_input(INPUT_SERVER, 'PHP_SELF', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
// variable initializing
$name = '';
$email = '';
$message = '';
$errors = array();
// is form send?
if( isset( $_POST['submit'] ) ) {
// validate $_POST['name']
$name = filter_input( INPUT_POST, 'name', FILTER_SANITIZE_STRING );
if( '' == $name ) {
$errors[] = 'Please enter a valid name';
}
// validate $_POST['email']
$email = filter_input( INPUT_POST, 'email', FILTER_SANITIZE_EMAIL );
if( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
$errors[] = 'Please enter a valid email';
}
// validate $_POST['message']
$message = filter_input( INPUT_POST, 'message', FILTER_SANITIZE_STRING );
if( '' == $message ) {
$errors[] = 'Please enter a valid message';
}
// If no errors
if( empty( $errors ) ) {
//values are valid, lets send an email
$mail = new PHPMailer();
// base parameters. working for me
$mail->IsSMTP(); // use SMTP
$mail->Host = "smtp.gmail.com"; // GMail
$mail->Port = 567; // I tried 465 but with no success
$mail->SMTPSecure = "ssl";
$mail->SMTPAuth = true; // turn on SMTP authentication
// adjust these lines
$mail->Username = "mymail#gmail.com";
$mail->Password = "mypassword";
$mail->SetFrom($email, $name);
$mail->AddAddress('myothermail#gmail.com', 'MyName');
$mail->Subject = "Feedback Form Results";
$mail->Body = $message;
// sending
if(!$mail->Send()) {
// first error message is just for debugging. This don't generate messages a user should read
// comment this and uncommend the second message for a more user friendly message
$errors[] = "Mailer Error: " . $mail->ErrorInfo;
//$errors[] = "email couldn't be send";
// Output Sanitizing for repopulating form
$name = filter_var( $name, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
$email = filter_var( $email, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
$message = filter_var( $message, FILTER_SANITIZE_FULL_SPECIAL_CHARS );
} else {
// maybe you should generate/fill a success message here
// clear fields
$name = '';
$email = '';
$message = '';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>self referencing form</title>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="button" class="title">
<h6>Contact</h6>
</div>
<div id="dropbox">
<header class="title">
<h6>Whats up?</h6>
</header>
<?php if(!empty($errors)): ?>
<ul class="error">
<li><?php echo join('</li><li>', $errors); ?></li>
</ul>
<?php endif; ?>
<div class="contact-form">
<form action="<?php echo $php_self; ?>" method="post">
<!-- input element for the name -->
<h6><img src="img/person.png" alt=""> Name</h6>
<input type="text"
name="name"
value="<?php echo $name; ?>"
placeholder="Please enter your full name here"
required>
<!-- input element for the email -->
<h6><img src="img/email.png" alt=""> E-mail</h6>
<input type="email"
name="email"
value="<?php echo $email; ?>"
placeholder="Please enter your e-mail address"
required>
<!-- input element for the message -->
<h6><img src="img/message.png" alt=""> Message</h6>
<textarea name="message" placeholder="Type your message..." required><?php echo $message; ?></textarea>
<!-- input element for the submit button -->
<input name="submit" type="submit" value="Submit">
</form>
</div>
</div>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src='dropbox.js'></script>
</body>
</html>
Here is my CSS code:
#import url("reset.css");
#button {
position: absolute;
top: 0;
right: 10%;
color: #eee;
z-index: 2;
width: 175px;
background: #c20000;
text-align: center;
height: 40px;
-webkit-border-radius: 0px 0px 2x 2px;
border-radius: 0px 0px 2px 2px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-transform: uppercase;
}
#button:hover {
background: #da0000;
cursor: pointer;
}
#button > h6{
line-height: 40px;
margin: 0px;
padding-top: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
}
#dropbox {
position: absolute;
top: 0px;
right: 10%;
color: #eee;
z-index: 1;
background: #222222;
width: 350px;
display: none;
-webkit-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 16px rgba(50, 50, 50, 0.75);
}
#dropbox .title {
height: 40px;
background: #414141;
}
#dropbox .title > h6{
line-height: 40px;
padding-left: 58px;
margin-top: 0px;
}
#dropbox {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-transform: uppercase;
}
#dropbox .contact-form {
margin: 10px;
}
#dropbox .contact-form h6{
margin: 5px;
}
#dropbox input {
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.9em;
outline: none;
border: none;
width: 320px;
max-width: 330px;
padding: 5px;
margin: 10px 0px;
background: #444444;
color: #eee;
}
#dropbox textarea {
height: 70px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.9em;
outline: none;
border: none;
width: 320px;
max-width: 320px;
padding: 5px;
margin: 10px 0px;
background: #444444;
color: #eee;
}
#dropbox input[type=submit] {
margin: 0px;
width: 330px;
cursor: pointer;
color: #999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
}
#dropbox input[type=submit]:hover {
color: #eee;
background: #c20000;
}
Here is my JQuery:
$(document).ready(function () {
$('#button').mouseenter(function() {
if($('#dropbox').is(':hidden')) {
$('#dropbox').slideDown('fast', function() {
// slidedown animation
});
} else {
$('#dropdox').hide();
}
});
$('#dropbox').mouseleave(function() {
$('#dropbox').slideUp('fast', function() {
// slide back up
});
});
});
I downloaded PHP MAILER to C disc - xampp\htdocs\email\ and created a new subfolder called PHPMailer. In this folder I simply extracted the contents of the downloaded PHPMailer .zip archive.
Hope someone can help me with this so I can move on with my learning. Thank you all in advance!
This is the phpMailer example
The main difference is $mail->Port=587; and $mail->SMTPSecure='tls';
Also re-check you gmail login, sometimes it's the simple things.