I am setting the text area field box to allow user to select and format the text to bold, italic, etc. The buttons seem to work when trying with the Sample Code 2(shared) but that creates another box which I don't want. I want to apply the buttons and actions to existing field (sample code1). The sample code 1 also is not updating the selected text formating.
Also with both the approaches, when I click on bold, italic buttons - that seems to trigger the submit action on the page. How do I stop this?
Sample Code 1
<?php
session_start();
error_reporting(0);
require_once('panel/config/db.php');
if (isset($_SESSION['user_id']) && $_SESSION['type'] == 2) {
} else {
header('location: index.php');
die();
}
if (isset($_POST['add'])) {
$specimen = mysql_real_escape_string($_POST['specimen']);
$diagnosis = mysql_real_escape_string($_POST['diagnosis']);
$type = $_POST['type'];
$tcode = mysql_real_escape_string($_POST['tcode']);
$mcode = mysql_real_escape_string($_POST['mcode']);
$pcode = mysql_real_escape_string($_POST['pcode']);
$conclusion = mysql_real_escape_string($_POST['conclusion']);
$do = mysql_query("INSERT INTO `records` (`specimen`,`diagnosis`,`type`,`tcode`,`mcode`,`pcode`,`conclusion`) VALUES('$specimen','$diagnosis','$type','$tcode','$mcode','$pcode','$conclusion')");
if ($do) {
$rid = mysql_insert_id();
if (!empty($_FILES["file"]["name"])) {
$target_dir = "panel/files/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$FileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
$file = mysql_insert_id() . '_' . rand(1000000, 9999999) . '.' . $FileType;
$target_file = $target_dir . $file;
move_uploaded_file($_FILES["file"]["tmp_name"], $target_file);
$do1 = mysql_query("UPDATE `records` SET `file`='$file' WHERE `record_id`='$rid'");
}
$add = mysql_query("INSERT INTO `records_meta` (`value`) VALUES('$rid')");
header('location: viewReport.php?rid=' . $rid . '&a=1');
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Create Report | LG PathLab </title>
<link rel="icon" href="favicon.ico" />
<!-- start linking -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/plugins/aos/aos.min.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="wrapper">
<?php
include 'includes/header.php';
?>
<!-- start hero -->
<section id="hero" style="padding-top: 40px;background: #e0e0e0;margin-bottom:30px;">
<div class="container">
<div class="row">
<div class="section-title col-12">
<h2><span>Create </span>Report </h2>
<?php
$do = mysql_query("SELECT * FROM `records_meta` ORDER BY `records_meta_id` DESC LIMIT 1");
$num = mysql_num_rows($do);
if ($num > 0) {
$row = mysql_fetch_array($do);
$oid = $row['value'] + 1;
} else {
$oid = 1;
}
?>
<p><b>Report ID:</b> #<?php
echo $oid;
?> </p>
</div>
</div>
</div>
</section>
<!-- Content Area -->
<section class="main-section">
<!-- Contact Section -->
<div class="">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<form action="" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputEmail1">Specimen Site/Type *</label>
<textarea class="form-control" name="specimen" id="exampleInputEmail1" maxlength="500" required style="border:1px solid #888888;border-radius:10px;"></textarea>
<small id="emailHelp" class="form-text text-muted">Max 500 characters</small>
</div>
<div class="form-group">
<label for="exampleInputPassword11">Diagnosis *</label>
<textarea class="form-control" name="diagnosis" id="exampleInputPassword11" maxlength="500" required style="border:1px solid #888888;border-radius:10px;"></textarea>
<small id="emailHelp" class="form-text text-muted">Max 500 characters</small>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label for="exampleInputPassword11">Micro/Macro *</label>
<select class="custom-select" name="type" required style="border:1px solid #888888;border-radius:10px;">
<option value="">Select Type</option>
<option value="Micro">Micro</option>
<option value="Macro">Macro</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputa">T Code</label>
<input type="text" name="tcode" class="form-control" id="formGroupExampleInputa" maxlength="30" style="border:1px solid #888888;border-radius:10px;">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputb">M Code</label>
<input type="text" name="mcode" class="form-control" id="formGroupExampleInputb" maxlength="30" style="border:1px solid #888888;border-radius:10px;">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputc">P Code</label>
<input type="text" name="pcode" class="form-control" id="formGroupExampleInputc" maxlength="30" style="border:1px solid #888888;border-radius:10px;">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputf">File</label>
<input type="file" name="file" class="form-control" id="formGroupExampleInputf" style="border:1px solid #888888;border-radius:10px;">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputEmail1l">Report Conclusion *</label>
<textarea class="form-control" name="conclusion" id="exampleInputEmail1l" maxlength="20000" required style="min-height:300px;border:1px solid #888888;border-radius:10px;"></textarea>
<br>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button>
</fieldset>
<small id="emailHelp" class="form-text text-muted">Max 20000 characters</small>
</div>
<button type="submit" name="add" class="btn btn-primary float-right">Save Report</button>
<div class="clearfix"></div>
<br/><br/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
</section>
<?php
include 'includes/footer.php';
?>
</div>
<!-- start screpting -->
<script src="assets/bundles/libscripts.bundle.js"></script>
<script src="assets/js/app.js"></script><!-- my js -->
</body>
</html>
Sample Code 2
<?php
session_start();
error_reporting(0);
require_once('panel/config/db.php');
if (isset($_SESSION['user_id']) && $_SESSION['type'] == 2) {
} else {
header('location: index.php');
die();
}
if (isset($_POST['add'])) {
$specimen = mysql_real_escape_string($_POST['specimen']);
$diagnosis = mysql_real_escape_string($_POST['diagnosis']);
$type = $_POST['type'];
$tcode = mysql_real_escape_string($_POST['tcode']);
$mcode = mysql_real_escape_string($_POST['mcode']);
$pcode = mysql_real_escape_string($_POST['pcode']);
$conclusion = mysql_real_escape_string($_POST['conclusion']);
$do = mysql_query("INSERT INTO `records` (`specimen`,`diagnosis`,`type`,`tcode`,`mcode`,`pcode`,`conclusion`) VALUES('$specimen','$diagnosis','$type','$tcode','$mcode','$pcode','$conclusion')");
if ($do) {
$rid = mysql_insert_id();
if (!empty($_FILES["file"]["name"])) {
$target_dir = "panel/files/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$FileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
$file = mysql_insert_id() . '_' . rand(1000000, 9999999) . '.' . $FileType;
$target_file = $target_dir . $file;
move_uploaded_file($_FILES["file"]["tmp_name"], $target_file);
$do1 = mysql_query("UPDATE `records` SET `file`='$file' WHERE `record_id`='$rid'");
}
$add = mysql_query("INSERT INTO `records_meta` (`value`) VALUES('$rid')");
header('location: viewReport.php?rid=' . $rid . '&a=1');
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Create Report | LG PathLab </title>
<link rel="icon" href="favicon.ico" />
<!-- start linking -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/plugins/aos/aos.min.css" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="wrapper">
<?php
include 'includes/header.php';
?>
<!-- start hero -->
<section id="hero" style="padding-top: 40px;background: #e0e0e0;margin-bottom:30px;">
<div class="container">
<div class="row">
<div class="section-title col-12">
<h2><span>Create </span>Report </h2>
<?php
$do = mysql_query("SELECT * FROM `records_meta` ORDER BY `records_meta_id` DESC LIMIT 1");
$num = mysql_num_rows($do);
if ($num > 0) {
$row = mysql_fetch_array($do);
$oid = $row['value'] + 1;
} else {
$oid = 1;
}
?>
<p><b>Report ID:</b> #<?php
echo $oid;
?> </p>
</div>
</div>
</div>
</section>
<!-- Content Area -->
<section class="main-section">
<!-- Contact Section -->
<div class="">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<form action="" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputEmail1">Specimen Site/Type *</label>
<textarea class="form-control" name="specimen" id="exampleInputEmail1" maxlength="500" required style="border:1px solid #888888;border-radius:10px;"></textarea>
<small id="emailHelp" class="form-text text-muted">Max 500 characters</small>
</div>
<div class="form-group">
<label for="exampleInputPassword11">Diagnosis *</label>
<textarea class="form-control" name="diagnosis" id="exampleInputPassword11" maxlength="500" required style="border:1px solid #888888;border-radius:10px;"></textarea>
<small id="emailHelp" class="form-text text-muted">Max 500 characters</small>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label for="exampleInputPassword11">Micro/Macro *</label>
<select class="custom-select" name="type" required style="border:1px solid #888888;border-radius:10px;">
<option value="">Select Type</option>
<option value="Micro">Micro</option>
<option value="Macro">Macro</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputa">T Code</label>
<input type="text" name="tcode" class="form-control" id="formGroupExampleInputa" maxlength="30" style="border:1px solid #888888;border-radius:10px;">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputb">M Code</label>
<input type="text" name="mcode" class="form-control" id="formGroupExampleInputb" maxlength="30" style="border:1px solid #888888;border-radius:10px;">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputc">P Code</label>
<input type="text" name="pcode" class="form-control" id="formGroupExampleInputc" maxlength="30" style="border:1px solid #888888;border-radius:10px;">
</div>
<div class="form-group col-md-4 col-sm-4">
<label for="formGroupExampleInputf">File</label>
<input type="file" name="file" class="form-control" id="formGroupExampleInputf" style="border:1px solid #888888;border-radius:10px;">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputEmail1l">Report Conclusion *</label>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
body {
font: 400 16px/1.4 'serif';
}
#editor1 {
border: 3px inset grey;
height: 100px;
width: 381px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 358px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<div id="editor1" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</div>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button>
</fieldset>
<textarea class="form-control" name="conclusion" id="exampleInputEmail1l" maxlength="20000" required style="min-height:300px;border:1px solid #888888;border-radius:10px;"></textarea>
<small id="emailHelp" class="form-text text-muted">Max 20000 characters</small>
</div>
<button type="submit" name="add" class="btn btn-primary float-right">Save Report</button>
<div class="clearfix"></div>
<br/><br/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
</section>
<?php
include 'includes/footer.php';
?>
</div>
<!-- start screpting -->
<script src="assets/bundles/libscripts.bundle.js"></script>
<script src="assets/js/app.js"></script><!-- my js -->
</body>
</html>
