I am studying and simply making an user registration form where there are several fields and the user has to upload its profile picture. I use php in order to validate the data before submitting.
After hitting the submit button it validates the data and refreshes the page due to which the filled data is gone. So we use ex. value="<?php echo $name; ?>" in the input value in order to preserve the data inserted by the user. It is possible with the simple input types such as text and others but how do we preserve the data of the image and show it in the image container and show the name of the selected image in the input type file.
<!DOCTYPE html>
<!-- form -->
<?php
$nameError = $genderError = $emailError = $mobileError = $imageError = "";
$name = $gender = $email = $mobile = $image = "";
$imagePath = $_FILES['image']['name'];
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameError = "Please provide Name";
} else {
$name = validateInput($_POST["name"]);
}
if (empty($_POST["gender"])) {
$genderError = "Please select Gender";
} else {
$gender = validateInput($_POST["gender"]);
}
if (empty($_POST["email"])) {
$emailError = "Please provide Email ID";
} else {
$email = validateInput($_POST["email"]);
}
if (empty($_POST["mobile"])) {
$mobileError = "Please provide Mobile Number";
} else {
$mobile = validateInput($_POST["mobile"]);
}
if (empty($_POST["image"])) {
$imageError = "Please provide Image";
} else {
$image = validateInput($_POST["image"]);
}
}
function validateInput($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<html lang="en" dir="ltr">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/master.css">
<!-- style -->
<style media="screen">
.center {
text-align: center;
}
.required {
color: #ff0000;
}
form {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="center container-fluid" style="margin: 50px;">
<h1 class="display-1">User Registration</h1>
</div>
<div class="container">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" enctype="multipart/form-data">
<!-- name -->
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Name</span>
</div>
<input type="text" class="form-control" name="name" value="<?php echo $name; ?>">
</div>
<span class="required"><?php echo $nameError; ?></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Gender</span>
</div>
<select class="form-control" name="gender">
<option <?php if (isset($gender) && $gender == "") echo "selected" ?> value="">Select your gender</option>
<option <?php if (isset($gender) && $gender == "1") echo "selected" ?> value="1">Male</option>
<option <?php if (isset($gender) && $gender == "0") echo "selected" ?> value="0">Female</option>
</select>
</div>
<span class="required"><?php echo $genderError; ?></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Email</span>
</div>
<input class="form-control" type="email" name="email" value="<?php echo $email; ?>">
</div>
<span class="required"><?php echo $emailError; ?></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Mobile</span>
</div>
<input class="form-control" minlength="10" maxlength="10" type="tel" name="mobile" value="<?php echo $mobile; ?>">
</div>
<span class="required"><?php echo $mobileError; ?></span>
</div>
<!-- image container -->
<div class="form-group" id="image_container" style="display: none;">
<img src="#" id="selected_image" width="300" height="175">
</div>
<?php echo $imagePath; ?>
<?php
if (isset($imagePath) && $imagePath != "") {
echo
"<script type='text/javascript'>
document.getElementById('image_container').style.display = 'block';
document.getElementById('selected_image').src = '" . $imagePath ."';
</script>";
}
?>
<!-- image -->
<div class="form-group">
<input class="form-control" type="file" name="image" onchange="readURL(this)">
<span class="required"><?php echo $imageError; ?></span>
</div>
<!-- submit -->
<center>
<input type="submit" class="btn btn-info">
<center>
</form>
</div>
</body>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#selected_image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
document.getElementById("image_container").style.display = "block";
}
}
</script>
</html>
Please have a look and help and suggest me.
Related
Update: After someone suggested in comments it's working now. I am still not able to work the login/logout button that's in index.php file. When I log in it does verify the password, but does not show the logout button. It shows the error in index.php (I have commented out the line) it says undefined index name Any help is appreicated.
I have a signup and login form in my website. I am able to signup properly and I am storing the password as hashed. When I try to login it keep saying wrong password. I am assuming there might be something wrong with my code since the password I am typing is correct.
index.php
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', '1');
require "navigationbar.php";
require "loginpage.php";
?>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="stylee.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100&display=swap" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<?php
$user = $_SESSION['name'] ; //it says undefined index name
if (isset($user )) {
echo '<p>You are logged in</p>';
echo '<form action="logout.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>';
<link href="stylee.css" rel="stylesheet" />
<form action="logoutbackend.php" method="post">
<button type="submit" name="logout-submit" class="logout_button">Logout</button>
</form>';
} else {
echo '<p class="login-status">You are logged out!</p>';
echo '<div class="login-container">
<form action="./backend/loginbackend.php" method="post">
<div class="form-group row">
<div class="col-sm-10">
<h2>website</h2>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<input type="email" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10" >
<input type="password" class="form-control" name="password" placeholder="password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" name="login_submit">Log In</button>
</div>
</div>
</form>
<div class="form-group row">
<div class="col-sm-10">
<p>New to <span>ShowCo</span>?<a class="open-button" onclick="openForm()">Sign up</a> </p>
</div>
</div>
<div class="form-popup" id="myForm">
<form action="./backend/signupbackend.php" class="form-container" method="post">
<div class="form-group row">
<div class="col-sm-10" >
<h1>Sign up</h1>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10" >
<input type="text" class="form-control" placeholder="Username" name="username" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10" >
<input type="email"class="form-control" placeholder="Email address" name="mail" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10" >
<input type="password" class="form-control" placeholder="Password" name="password" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10" >
<input type="password" class="form-control" placeholder="Repeat password" name="repeatpassword" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10" >
<button type="submit" class="btn btn-primary" name="signup_submit">Sign up</button>
</div>
</div>
<button type="button" class="close" aria-label="Close" onclick="closeForm()"><span aria-hidden="true">×</span></button>
</form>
</div>
</div>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
';
}
?>
</body>
</html>
<?php
require "footer.php";
?>
Signupbackend.php
<?php
if(isset($_POST["signup_submit"])) {
require "../database_files/database_for_signup.php";
require "../index.php";
$username = $_POST['username'];
$email = $_POST['mail'];
$password = $_POST['password'];
$repeatPassword = $_POST['repeatpassword'];
if (empty($username) || empty($email) || empty($password) || empty($repeatPassword)) {
header("Location: ../index.php?error=emptyfields&username=" .$username."&mail=" .$email);
exit();
} else if(!filter_var($email, FILTER_VALIDATE_EMAIL) && !preg_match("/^[a-zA-Z0-9]*$/",$username)) {
header("Location: ../index.php?error=invalidmailusername");
exit();
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
header("Location: ../index.php?error=invalidmail&username=".$username);
exit();
} else if (!preg_match("/^[a-zA-Z0-9]*$/",$username)) {
header("Location: ../index.php?error=invalidusername&mail=".$email);
exit();
} else if($password != $repeatPassword) {
header("Location: ../index.php?error=passwordcheck&username=".$username."&mail=".$email);
exit();
} else {
$sql = "SELECT COUNT(username) AS num FROM signup_info WHERE username = :username";
$stmt = $conn->prepare($sql);
$stmt->bindValue(':username', $username);
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);
if ($row['num'] > 0) {
die('Sorry, username already exists. Please try a different username');
}
$passwordHash = password_hash($pass, PASSWORD_BCRYPT, array("cost" => 12));
$sql = "INSERT INTO signup_info(username, email, password) VALUES (:username, :email, :password)";
$stmt = $conn->prepare($sql);
$stmt->bindValue(':username', $username);
$stmt->bindValue(':email', $email);
$stmt->bindValue(':password', $passwordHash);
$result = $stmt->execute();
if($result) {
echo "Registered!";
}
}
}
?>
Loginbackend.php
<?php
if(isset($_POST['login_submit'])) {
require "../database_files/database_for_signup.php";
$email = $_POST['email'];
$password = $_POST['password'];
if ((empty($username)) || (empty($password))) {
echo 'empty username/password';
die();
}
$sql = 'SELECT username, email, password FROM signup_info WHERE email = :email';
if ($stmt = $conn->prepare($sql)) {
$stmt->bindParam(':email', $email, PDO::PARAM_STR);
if ($stmt->execute()) {
if($stmt->rowCount() == 1) {
if ($row = $stmt->fetch()) {
$hashed_password = $row['password'];
if(password_verify($password, $hashed_password)) {
session_start();
$_SESSION['email'] = $email;
$_SESSION['name'] = $row['username'];
echo "verfiied";
} else {
echo "wrong password"; }
}
}
}
}
}
?>
logout.php
<?php
session_start();
session_unset();
session_destroy();
header("Location: ./index.php");
Please help me why I am not able to verify the password? Also, I have been through similar questions on SO, but nothing helped. Any help is appreciated.
I have very simple form. I have one dropdown menu where default is text selected. I want show file uploading box only if we select image or video from dropdown menu. Its HTML/PHP page. I have tried to put javascript in my body tag but its not working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
$("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' :
'none');
});
</script>
my dropdown form is like this
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0" <?php if($row['type'] == "0") echo "selected"; ?>>Text</option>
<option value="1" <?php if($row['type'] == "1") echo "selected"; ?>>Image</option>
<option value="2" <?php if($row['type'] == "2") echo "selected"; ?>>Video</option>
</select>
</div>
My full page is like this
<?php include("includes/header.php");
require("includes/function.php");
require("language/language.php");
require_once("thumbnail_images.class.php");
if(isset($_POST['submit']) and isset($_GET['add']))
{
$picture_name=rand(0,99999)."_".$_FILES['picture_name']['name'];
$pic1=$_FILES['picture_name']['tmp_name'];
$tpath1='images/'.$picture_name;
copy($pic1,$tpath1);
$thumbpath='images/thumbs/'.$picture_name;
$obj_img = new thumbnail_images();
$obj_img->PathImgOld = $tpath1;
$obj_img->PathImgNew =$thumbpath;
$obj_img->NewWidth = 100;
$obj_img->NewHeight = 100;
if (!$obj_img->create_thumbnail_images())
{
echo $_SESSION['msg']="Thumbnail not created... please upload image again";
exit;
}
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type'],
'picture_name' => $picture_name
);
$qry = Insert('faq',$data);
$_SESSION['msg']="10";
header( "Location:faq.php");
exit;
}
if(isset($_GET['faq_id']))
{
$qry="SELECT * FROM faq where id ='".$_GET['faq_id']."'";
$result=mysqli_query($mysqli,$qry);
$row=mysqli_fetch_assoc($result);
}
if(isset($_POST['submit']) and isset($_POST['faq_id']))
{
if($_FILES['picture_name']['name']!="")
{
$img_res=mysqli_query($mysqli,'SELECT * FROM faq WHERE id='.$_GET['faq_id'].'');
$img_res_row=mysqli_fetch_assoc($img_res);
if($img_res_row['picture_name']!="")
{
unlink('images/thumbs/'.$img_res_row['picture_name']);
unlink('images/'.$img_res_row['picture_name']);
}
$picture_name=rand(0,99999)."_".$_FILES['picture_name']['name'];
$pic1=$_FILES['picture_name']['tmp_name'];
$tpath1='images/'.$picture_name;
copy($pic1,$tpath1);
$thumbpath='images/thumbs/'.$picture_name;
$obj_img = new thumbnail_images();
$obj_img->PathImgOld = $tpath1;
$obj_img->PathImgNew =$thumbpath;
$obj_img->NewWidth = 100;
$obj_img->NewHeight = 100;
if (!$obj_img->create_thumbnail_images())
{
echo $_SESSION['msg']="Thumbnail not created... please upload image again";
exit;
}
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type'],
'picture_name' => $picture_name
);
$faq_edit=Update('faq', $data, "WHERE id = '".$_POST['faq_id']."'");
}
else
{
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type']
);
$faq_edit=Update('faq', $data, "WHERE id = '".$_POST['faq_id']."'");
}
if ($faq_edit > 0)
{
$_SESSION['msg']="11";
header( "Location:add_faq.php?faq_id=".$_POST['faq_id']);
exit;
}
}
?>
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
$("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' :
'none');
});
</script>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="page_title_block">
<div class="col-md-5 col-xs-12">
<div class="page_title">Add FAQ</div>
</div>
</div>
<div class="clearfix"></div>
<div class="card-body mrg_bottom">
<form class="form form-horizontal" action="" method="post" enctype="multipart/form-data" onsubmit="return checkValidation(this);">
<input type="hidden" name="faq_id" value="<?php echo $_GET['faq_id'];?>" />
<div class="section">
<div class="section-body">
<div class="form-group">
<label class="col-md-3 control-label">FAQ Type :-</label>
<?php if(isset($_GET['faq_id'])) {?>
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0" <?php if($row['type'] == "0") echo "selected"; ?>>Text</option>
<option value="1" <?php if($row['type'] == "1") echo "selected"; ?>>Image</option>
<option value="2" <?php if($row['type'] == "2") echo "selected"; ?>>Video</option>
</select>
</div>
<?php } else {?>
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0">Text</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<?php }?>
</div>
<div class="form-group" id="upload" style="display: none">
<label class="col-md-3 control-label">Select File :-</label>
<div class="col-md-6">
<div class="fileupload_block" >
<input type="file" name="picture_name" value="fileupload" id="fileupload">
<?php if(isset($_GET['faq_id']) and $row['picture_name']!="") {?>
<div class="fileupload_img"><img type="image" src="images/<?php echo $row['picture_name'];?>" alt="category image" /></div>
<?php } else {?>
<div class="fileupload_img"><img type="image" src="assets/images/add-image.png" alt="category image" /></div>
<?php }?>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label class="control-label">Question :-</label>
</div>
<div class="col-md-6">
<textarea name="question" id="question" rows="1" class="form-control" ><?php if(isset($_GET['faq_id'])){echo $row['question'];}?></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label class="control-label">Answer:-</label>
</div>
<div class="col-md-6">
<textarea name="answer" id="answer" rows="1" class="form-control" data-emojiable="true"><?php if(isset($_GET['faq_id'])){echo $row['answer'];}?></textarea>
</div>
</div>
<div class="form-group"> </div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<?php include("includes/footer.php");?>
Let me know if someone can correct, whats wrong in this.
This is my code,
PHP
if(isset($_POST['submit'])){
if (empty($_POST["name"])) {
$NameErr = "Name is required";
} else {
$name = Test_User_Input($_POST["name"]);
$name = mysqli_real_escape_string($connection , $name);
}
if (empty($_POST["contact"])) {
$ContactErr = "Contact is required";
} else {
$contact = Test_User_Input($_POST["contact"]);
$contact = mysqli_real_escape_string($connection , $contact);
}
if (empty($_POST["email"])) {
$EmailErr = "Email is required";
} else {
$email = Test_User_Input($_POST["email"]);
$email = mysqli_real_escape_string($connection , $email);
}
if (empty($_POST["pan"])) {
$PanErr = "PAN is required";
} else {
$pan = Test_User_Input($_POST["pan"]);
$pan = mysqli_real_escape_string($connection , $pan);
}
if (empty($_POST["dob"])) {
$DobErr = "DOB is required";
} else {
$dob = Test_User_Input($_POST["dob"]);
$dob = mysqli_real_escape_string($connection , $dob);
}
if (empty($_POST["gender"])) {
$GenderErr = "Gender is required";
} else {
$gender = Test_User_Input($_POST["gender"]);
$gender = mysqli_real_escape_string($connection , $gender);
}
if (!empty($name) && !empty($contact) && !empty($email) && !empty($pan) &&
!empty($dob) && !empty($gender){
$query = "INSERT INTO form ( name, contact, email, pan, birthday,
gender )VALUES ('$name' , '$contact' , '$email' , '$pan' , '$dob' ,
'$gender')";
}
if ($insert_query) {
echo "Form Filled";
} else {
echo "Please Fill the form";
}
}
function Test_User_Input($Data)
{
return $Data;
}
HTML
<form action="" autocomplete="off" method="post">
<div class="col-md-6 col-sm-6 col-xs-12 marB20">
<div class="form-group-kyc">
<label>Full Name:</label><span class = "error_msg"><?php echo $NameErr; ?></span>
<input type="text" name="name" id="name" placeholder="Full Name" class="form-control-kyc" value="<?php echo isset($_POST['name']) ? $_POST['name'] :' '?> ">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 marB20">
<div class="form-group-kyc">
<label>Contact Number:</label><span class = "error_msg"><?php echo $ContactErr; ?></span>
<input type="text" name="contact" id="contact" placeholder="Contact Number" class="form-control-kyc" value="<?php echo isset($_POST['contact']) ? $_POST['contact'] : '' ?> ">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 marB20">
<div class="form-group-kyc">
<label>Email Id:</label><span class = "error_msg"><?php echo $EmailErr; ?></span>
<input type="email" name="email" id="email" placeholder="Email id" class="form-control-kyc" value="<?php echo isset($_POST['email']) ? $_POST['email'] : '' ?> ">
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 marB20">
<div class="form-group-kyc">
<label>PAN:</label><span class = "error_msg"><?php echo $PanErr; ?></span>
<input type="text" name="pan" id="pan" placeholder="PAN Card No." class="form-control-kyc" value="<?php echo isset($_POST['pan']) ? $_POST['pan'] : '' ?> ">
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 marB20">
<div class="form-group-kyc">
<label>DOB:</label><span class = "error_msg"><?php echo $DateErr; ?></span>
<input type="date" name="dob" id="dob" placeholder="DOB." class="form-control-kyc" value="">
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 marB20">
<div class="form-group-kyc">
<label>Gender:</label> <span class = "error_msg"><?php echo $GenderErr; ?></span>
<select name ="gender" id = "gender" class="form-control-kyc">
<option value="male"> Male </option>
<option value="female"\> Female </option>
</select>
</div>
</div>
<div class="col-md-12 marT30">
<div class="form-group-kyc">
<input type="submit"
id="submit" name = "submit" class="itg-button" value="Submit">
</div>
</form>
I want to Know, when the user fails to submit the form, how can I retain the form values, so user don't have to refill it.
Also if user forgets to fill one value , How to focus on that particular Field.?
ALSO
when the form is submitted and when I refresh The page, the form is again Refilled and data is sent again.
How can I prevent that?
One option is to redirect to another page after the submission, but again when the user will press back button, the form data is sent again.
Is there anything here which can be done?
For retain the filled values of the fields.
<input type="text" name="name" id="name" placeholder="Full Name" class="form-control-kyc" value="<?php echo if(isset($_POST['$name'])? $_POST['name'] : ''; ) ?>">
To avoid the auto resubmission of the data you can check whether the submit button pressed or not, if not the form data will not be added to Database and redirect it to index.php
<?php
if(isset($_POST['your-submit-button-name'])){
//within this curly brackets add your codes
}else{
header('Location: index.php');
die();
}
?>
If you want to keep the values stored you can simply echo the post value back as shown below.
<input type="text" name="name" id="name" placeholder="Full Name" class="form-control-kyc" value="<?php echo isset($_POST['name']) ? $_POST['name'] : '' ?>">
If I put my code in a single file to get a single webpage I get the results.
When introduce to the main page via get data with a function type with ajax it's not working, tried multiple solution but no winning one.
I've put the script tag with the url for ckeditor and still no luck.
But if I code it like just one page for a single website page, ckeditor works fine but not when link to another coded page in 2 separate files.
Need help and thanks
I've tried CKEDITOR.replaceAll(); in the script at the bottom of page before the end body tag like suggested and still only works for the first textarea.
I'll put the 2 files in question
items_list.php
<?php
include "../includes/db.php";
if(isset($_POST['item_submit'])){
//mysqli_real_escape_string is a web protection for intrusion
$item_title = mysqli_real_escape_string($conn, strip_tags($_POST['item_title']));
$item_description = mysqli_real_escape_string($conn, $_POST['item_description']);
$item_category = mysqli_real_escape_string($conn, strip_tags($_POST['item_category']));
$item_qty = mysqli_real_escape_string($conn, strip_tags($_POST['item_qty']));
$item_cost = mysqli_real_escape_string($conn, strip_tags($_POST['item_cost']));
$item_price = mysqli_real_escape_string($conn, strip_tags($_POST['item_price']));
$item_discount = mysqli_real_escape_string($conn, strip_tags($_POST['item_discount']));
$item_delivery = mysqli_real_escape_string($conn, strip_tags($_POST['item_delivery']));
if(isset($_FILES['item_image']['name'])){
$file_name = $_FILES['item_image']['name'];
$path_address = "../images/items/$file_name";
$path_address_db = "images/items/$file_name";
$img_confirm = 1;
$file_type = pathinfo($_FILES['item_image']['name'], PATHINFO_EXTENSION);
if($_FILES['item_image']['size']>200000){
$img_confirm = 0;
echo "size 2 big";
}
if($file_type != 'jpg' && $file_type != 'png' && $file_type != 'gif'){
$img_confirm = 0;
echo "type mismatch";
}
if($img_confirm == 0){
}else{
if(move_uploaded_file($_FILES['item_image']['tmp_name'], $path_address)){
$item_ins_sql = "INSERT INTO items (item_image, item_title, item_description, item_cat, item_qty, item_cost, item_price, item_discount, item_delivery) VALUES ('$path_address_db','$item_title','$item_description','$item_category','$item_qty','$item_cost','$item_price','$item_discount','$item_delivery')";
$item_ins_run = mysqli_query($conn, $item_ins_sql);
}
}
}else{
echo "sorry";
}
}
if( isset($_POST['edit_submit'])){
//include "item_list_process.php";
$item_id = mysqli_real_escape_string($conn, strip_tags($_POST['item_id']));
$item_title = mysqli_real_escape_string($conn, strip_tags($_POST['item_title1']));
$item_description = mysqli_real_escape_string($conn, $_POST['item_description1']);
$item_category = mysqli_real_escape_string($conn, strip_tags($_POST['item_cat']));
$item_qty = mysqli_real_escape_string($conn, strip_tags($_POST['item_qty']));
$item_cost = mysqli_real_escape_string($conn, strip_tags($_POST['item_cost']));
$item_price = mysqli_real_escape_string($conn, strip_tags($_POST['item_price']));
$item_discount = mysqli_real_escape_string($conn, strip_tags($_POST['item_discount']));
$item_delivery = mysqli_real_escape_string($conn, strip_tags($_POST['item_delivery']));
echo $item_id;
$item_up_sql = "UPDATE items SET item_title = '$item_title', item_description = '$item_description', item_cat = '$item_category', item_qty = '$item_qty', item_cost = '$item_cost', item_price = '$item_price', item_discount = '$item_discount', item_delivery = '$item_delivery' WHERE item_id = '$item_id' ";
$item_up_run = mysqli_query($conn, $item_up_sql);
}
?>
<html>
<head>
<title>Online Shopping | Admin Panel</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/admin_style.css">
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="https://cdn.ckeditor.com/4.7.1/standard-all/ckeditor.js"></script>
<script>
function get_item_list_data(){
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById('get_item_list_data').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'item_list_process.php', true);
xmlhttp.send();
}
function del_item(item_id){
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById('get_item_list_data').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'item_list_process.php?del_item_id='+item_id, true);
xmlhttp.send();
}
</script>
</head>
<body onload="get_item_list_data()">
<?php include "includes/header.php"; ?>
<div class="container">
<button class="btn btn_red btn-danger" data-toggle="modal" data-target="#add_new_item" data-backdrop="static" data-keyboard="false">Add New Item</button>
<div id="add_new_item" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Item</h4>
</div>
<div class="modal-body">
<form method="post" enctype="multipart/form-data" name="addNewItemForm">
<div class="form-group">
<label>Item Image</label>
<input type="file" id="image" name="item_image" class="form-control" placeholder="Enter location on drive for the image of item" required>
</div>
<div class="form-group">
<label>Item Title</label>
<input type="text" id="item_title" name="item_title" class="form-control" placeholder="Enter Title or Name of Item" required>
</div>
<div class="form-group">
<label>Item Description</label>
<!------Here is the ckeditor that's working-------------->
<textarea class="form-control ckeditor" id="item_description" name="item_description" required></textarea>
</div>
<div class="form-group">
<label>Item Category</label>
<select class="form-control" name="item_category" required>
<option>Select a Category</option>
<?php
$cat_sql = "SELECT * FROM item_cat";
$cat_run = mysqli_query($conn, $cat_sql);
while($cat_rows = mysqli_fetch_assoc($cat_run)){
$cat_name = ucwords($cat_rows['cat_name']);
if($cat_rows['cat_slug'] == ''){
$cat_slug = $cat_rows['cat_name'];
}else{
$cat_slug = $cat_rows['cat_slug'];
}
echo "
<option value='$cat_slug'>$cat_name</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Item Quantity</label>
<input type="number" name="item_qty" class="form-control" placeholder="Enter the quantity you have in stocks" required>
</div>
<div class="form-group">
<label>Item Cost</label>
<input type="number" name="item_cost" class="form-control" placeholder="Enter the cost you paid for the item" required>
</div>
<div class="form-group">
<label>Item Price</label>
<input type="number" name="item_price" class="form-control" placeholder="Enter the price to sell to clients" required>
</div>
<div class="form-group">
<label>Item Discount</label>
<input type="number" name="item_discount" class="form-control" placeholder="Enter the amount of discount in dollars we are giving" >
</div>
<div class="form-group">
<label>Item Delivery</label>
<input type="number" name="item_delivery" class="form-control" placeholder="Enter the amount to charge for shipping">
</div>
<div class="form-group">
<input type="submit" name="item_submit" class="btn btn-primary btn-block" value="SUBMIT">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn_red btn-danger" data-dismiss="modal">CLOSE</button>
</div>
</div>
</div>
</div>
<div id="get_item_list_data">
<!---------------------Area for process item list data------------>
</div>
</div>
<?php include "includes/footer.php"; ?>
<script>
//CKEDITOR.replaceAll();
// CKEDITOR.instances.item_description.destroy();
//CKEDITOR.replace( 'item_description' );
//ckeditorOff();
//CKEDITOR.add
//CKEDITOR.replace( 'item_description1' );
</script>
</body>
</html>
Second file item_list_process.php
<?php
include "../includes/db.php";
if(isset($_REQUEST['del_item_id'])){
$del_sql = "DELETE FROM items WHERE item_id = '$_REQUEST[del_item_id]'";
$del_run = mysqli_query($conn, $del_sql);
}
?>
<table class="table table-bordered table-striped">
<thead>
<tr class="item-head">
<th>S. no.</th>
<th>Image</th>
<th>Item Title</th>
<th>Item Description</th>
<th>Item Category</th>
<th>Item Qty</th>
<th>Item Cost</th>
<th>Item Price</th>
<th>Item Discount</th>
<th>Item Delivery</th>
</tr>
</thead>
<tbody>
<?php
$c = 1;
$sel_sql = "SELECT * FROM items";
$sel_run = mysqli_query($conn, $sel_sql);
while($rows = mysqli_fetch_assoc($sel_run)){
$discountPrice = $rows['item_price'] - $rows['item_discount'];
echo "
<tr>
<td>$c</td>
<td><img src='../$rows[item_image]' style='width:30px'></td>
<td>$rows[item_title]</td>
<td>"; echo strip_tags($rows['item_description']); echo "</td>
<td>$rows[item_cat]</td>
<td>$rows[item_qty]</td>
<td>$rows[item_cost]</td>
<td>$rows[item_price]</td>
<td>$discountPrice($rows[item_discount])</td>
<td>
<div class='dropdown'>
<button class='btn btn_red btn-danger dropdown-toggle' data-toggle='dropdown'>Actions<span class='caret'></span></button>
<ul class='dropdown-menu dropdown-menu-right'>
<li>
<a href='#edit_modal$rows[item_id]' data-toggle='modal' >Edit</a>
</li>";
?>
<li>Delete</li>
<?php
echo "
</ul>
</div>
<div class='modal fade ' id='edit_modal$rows[item_id]' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' data-dismiss='modal'>×</button>
<h4 class='modal-title'>Edit Item</h4>
</div>
<div class='modal-body'>
<form method='post' name='editForm'>
<input type='hidden' name='item_id' id='item_id' value='$rows[item_id]'>
<div class='form-group'>
<label>Item Title</label>
<input type='text' value='$rows[item_title]' id='item_title1' name='item_title1' class='form-control' required>
</div>
<div class='form-group' id='tracking_text'>
<label>Item Description</label>
//-------------------This is for the second ckeditor--------------- >
<textarea class='form-control ckeditor' name='item_description1' id='item_description11' required>$rows[item_description]</textarea>
</div>
<div class='form-group'>
<label>Item Category</label>
<select class='form-control' value='$rows[item_cat]' name='item_cat' id='item_cat' required>
";
$cat_sql = "SELECT * FROM item_cat";
$cat_run = mysqli_query($conn, $cat_sql);
while($cat_rows = mysqli_fetch_assoc($cat_run)){
$cat_name = ucwords($cat_rows['cat_name']);
if($cat_rows['cat_slug'] == ''){
$cat_slug = $cat_rows['cat_name'];
}else{
$cat_slug = $cat_rows['cat_slug'];
}
if($cat_slug == $rows['item_cat']){
echo "
<option selected value='$cat_slug'>$cat_name</option>";
}else{
echo "
<option value='$cat_slug'>$cat_name</option>";
}
}
echo "
</select>
</div>
<div class='form-group'>
<label>Item Quantity</label>
<input type='number' value='$rows[item_qty]' name='item_qty' id='item_qty' class='form-control' required>
</div>
<div class='form-group'>
<label>Item Cost</label>
<input type='number' value='$rows[item_cost]' name='item_cost' id='item_cost' class='form-control' required>
</div>
<div class='form-group'>
<label>Item Price</label>
<input type='number' value='$rows[item_price]' name='item_price' id='item_price' class='form-control' required>
</div>
<div class='form-group'>
<label>Item Discount</label>
<input type='number' value='$rows[item_discount]' name='item_discount' id='item_discount' class='form-control'>
</div>
<div class='form-group'>
<label>Item Delivery</label>
<input type='number' value='$rows[item_delivery]' name='item_delivery' id='item_delivery' class='form-control'>
</div>
<div class='form-group'>
";
?>
<button type="submit" name="edit_submit" id="edit_submit" class='btn btn-primary btn-block' >SUBMIT</button>
</div>
</form>
</div> <!---end of modal body--->
<div class='modal-footer'>
<button class='btn btn_red btn-danger' data-dismiss='modal'>CLOSE</button>
</div>
</div> <!---end of modal content--->
</div> <!---end of modal dialog--->
</div> <!---end of modal div fade--->
</td>
</tr>
<?php
$c++;
}
?>
</tbody>
</table>
I have a system, where at one Computer/Monitor more than 1 user can be logged in.
First the user log in. This is already working. Then it shows the username which is logged in.
When an other user log in, it shows the second User also.
So far, so good.
But the whole page is reloaded. I want to reload only the part of the Website which has to be updated (the part where it is shown).
So my question is, how can I update only the Part of the website and which programmer speech I have to use.
The Users which are logged in are saved in a $_SESSION variable - not in the database.
Here is my Code:
in index.php (Session is started)
`
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../main.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container" id="content">
<div class="row" >
<div class="col-sm-6 col-sm-offset-3" id="formular">
<img src="../back.png" style="width: 10%;" id="back"/>
<b><h1 align="center">Login</h1></b>
<form action="php/login.php" method="post" style="text-align: center;">
<input type="text" class="form-control" style="width: 70%;margin: auto; margin-top: 2%;" id="username" name="username" placeholder="username" required/>
<input type="password" class="form-control" style="width: 70%;margin: auto; margin-top: 2%;" id="pwd" name="passwort" placeholder="passwort" required/>
<input type="submit" value="Login" style="padding-left: 10%; padding-right: 10%; margin-top: 2%;" class="btn btn-warning"/>
</form>
</div>
</div>
<div style="margin-top:1%" class="row">
<div class="col-sm-3 col-sm-offset-3 col-xs-6" id="teamRot">
<h1 align="center">Team Rot</h1>
<?php
echo $_SESSION['username1'];
echo "<br/>";
echo $_SESSION['username2'];
?>
</div>
<div class="col-sm-3 col-xs-6" id="teamBlau">
<h1 align="center">Team Blau</h1>
<?php
echo $_SESSION["username3"];
echo "<br/>";
echo $_SESSION["username4"];
?>
</div>
</div>
<div class="row">
<br/>
<div class="col-sm-2 col-sm-offset-5 col-xs-6 col-xs-offset-3 btn btn-warning" id="start" >
<a href="../Spiel/index.html" style="text-decoration: none; color: black" ><h1 align="center" >start</h1></a>
</div>
</div>
</div>
</body>
`
in login.php
<?php
session_start();
include "../../connector.php";
$username = $_POST['username'];
$passwort = $_POST['passwort'];
echo $_SESSION["zaehler"];
$stmt = $con->prepare("SELECT username FROM Spieler WHERE passwort=? AND username=?");
$stmt->bind_param("ss", $passwort, $username);
//mysqli_stmt_bind_param($stmt, "s", $passwort);
$stmt->execute();
$stmt->bind_result($ergebnis);
$stmt->fetch();
$stmt->close();
if($ergebnis == null)
{
echo "<script type=\"text/javascript\">";
echo "var checK = alert('Username oder Passwort falsch');
if (!checK)
{
history.go(-1); // go back since user clicked cancel
}";
echo "</script>";
}
else
{
$_SESSION["zaehler"]=$_SESSION["zaehler"] + 1;
if($_SESSION["zaehler"] == 1)
{ $_SESSION["username1"]= $ergebnis;}
elseif($_SESSION["zaehler"] == 2)
{ $_SESSION["username2"]= $ergebnis;}
elseif($_SESSION["zaehler"] == 3)
{ $_SESSION["username3"]= $ergebnis;}
elseif($_SESSION["zaehler"] == 4)
{ $_SESSION["username4"]= $ergebnis;}
elseif($_SESSION["zaehler"] == 5)
session_destroy();
header("Location:../index.php");
}