We Keep Coding

unable to pass value of textarea using javascript to PHP script ECHO

I am trying to get the value of textarea using JavaScript to pass it to PHP without reloading the page.
Please where might I have the issue here ?
This the Javascript to get the value from textarea and transfer it to PHP to be used
function getValue(s){
$.post(
"reply.php",
{
getTxt: s,
},
function(data,status){
$("#ReplyTextField").html(data);
}
);
}
here is the HTML Textarea with reply button
<!-- reply popup -->
<div class="sitemodal fade" id="reply-popup">
<div class="sitemodal-dialog">
<!-- siteModal content-->
<div class="sitemodal-content">
<div class="sitemodal-header">
<button type="button" class="close-popup">×</button>
<h4 class="sitemodal-title">Reply</h4>
</div>
<div class="sitemodal-body">
<form enctype="multipart/form-data" method="Post" action="<?php echo "reply.php?message=" . $row['id'] . "'"; ?>" name="msgform">
<textarea id="ReplyTextField" placeholder="Give your Reply" name="textarea1"></textarea>
</form>
</div>
<div class="sitemodal-footer">
<button type="button" class="popup-btn reply" id="replyButton" name="sendmsg" onclick="getValue()">Reply</button>
</div>
</div>
</div>
</div>
This is the php script in reply.php file i am trying to transfer the data to
<?php
/*include("functions.php");
include("session.php");
require("connection.php");*/
$getTxt= $_REQUEST['getTxt'];
echo $getTxt;
?>

Your PHP is fine. It is the HTML that is the issue. You were not sending the value which throws up an error in php. You have to send the variable in the onclick funtion and then it works.
Here is the Updated HTML file:
function getValue(s){
$.post("reply.php",
{getTxt: s,}, function(data,status){
$("#ReplyTextField").html(data);});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p></p><div class="sitemodal fade" id="reply-popup">
<div class="sitemodal-dialog">
<!-- siteModal content-->
<div class="sitemodal-content">
<div class="sitemodal-header">
<button type="button" class="close-popup">×</button>
<h4 class="sitemodal-title">Reply</h4>
</div>
<div class="sitemodal-body">
<form enctype="multipart/form-data" method="Post" action="<?php echo `reply.php?message=` . $row['id'] . `'`; ?>" name="msgform">
<textarea id="ReplyTextField" placeholder="Give your Reply" name="textarea1"></textarea>
</form>
</div>
<div class="sitemodal-footer">
<button type="button" class="popup-btn reply" id="replyButton" name="sendmsg" onclick="getValue(document.getElementById('ReplyTextField').value)">Reply</button>
</div>
</div>
</div>
</div>

The issue is that you are not passing any parameter to the getValue() function. I would avoid using the HTML onclick attribute and use a jQuery event handler instead:
$('#replyButton').on('click', function() {
var textareaValue = $('#ReplyTextField').val();
getValue(textareaValue);
};
You should also use the .val() method to set the value of the textarea.
https://api.jquery.com/on/
https://api.jquery.com/val/

image is inserted twice in the table when i upload one time only

Here I Upload Two Code one is Index.php and Another One is ImageUpload.php when i upload the image the file is move into uploads folder and the image name is twice store in the database i want only one data in database for every image that i upload and here is the database
images | int(11)
name | varchar(200)
image | longtext
<?php
include("config.php");
if(isset($_POST) && !empty($_FILES['image']['name'])){
$valid_extensions = array('jpeg', 'jpg', 'png','pdf','doc','docx'); // valid extensions
$filepath = 'uploads/';
if(!is_dir($filepath)){
mkdir($filepath, 0755, true);
}
$img = $_FILES['image']['name'];
$tmp = $_FILES['image']['tmp_name'];
list($txt, $ext) = explode(".", $img); // alternative $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
$image_name = time().".".$ext;
$image_base64 =md5(rand());
$image = 'data:image/'.$image_name.';base64,'.$image_base64;
$query = "insert into images(name,image) values('".$image_name."','".$image."')";
mysqli_query($con,$query) or die(mysqli_error($con));
// Validate File extension
if(in_array($ext, $valid_extensions))
{
$filepath=$filepath.$image_name;
if(move_uploaded_file($tmp,$filepath)){
echo "<img width='100px' src='".$filepath."'>";
}else{
echo "Failed to upload image on server";
}
}else
{
echo 'Please upload valid image';
}
}else{
echo "Please select image to upload";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP Ajax image upload without refreshing page with validation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h2>PHP - Upload image on server with validation using jQuery Ajax</h2>
<div class="panel panel-info">
<div class="panel-heading">File upload using ajax in PHP</div>
<div class="panel-body">
<form action="imageUpload.php" enctype="multipart/form-data" class="form-horizontal" method="post">
<div class="preview"></div>
<input type="file" name="image" class="form-control" />
<br/>
<button class="btn btn-block btn-primary btn-upload" id="upload" name="upload">Upload</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-upload").click(function(){
$(".form-horizontal").ajaxForm({target: '.preview'}).submit();
});
});
</script>
</body>
</html>

It's because your ajax request is running twice. Just add onsubmit="return false;" on your form element. So that the form is only submitted through the ajax code.
<form action="imageUpload.php" enctype="multipart/form-data" class="form-horizontal" method="post" onsubmit="return false;">
<div class="preview"></div>
<input type="file" name="image" class="form-control" />
<br/>
<button class="btn btn-block btn-primary btn-upload" id="upload" name="upload">Upload</button>
</form>

Disable the default behavior by adding e.preventDefault(); (needs you to pass the event e as an argument to your anonymous function.
$(".btn-upload").click(function(e) {
e.preventDefault();
$(".form-horizontal").ajaxForm({target: '.preview'}).submit();
});

Insert value in DB with form on a barcode scanner

I have a Datalogic Barcode Scanner Falcon 4410. I have a html form on it to add products into a database.
Here is my simple form :
<form id="formprod" class="form-horizontal" method="post" action="url">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Référence</label>
<div class="col-md-4">
<input id="textinput" name="reference" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<div class="col-md-8">
<input type="submit" id="button1id" name="submit" value="OK" class="btn btn-success"/>
<input type="reset" id="button2id" name="button2id" value="RESET" class="btn btn-danger"/>
</div>
</div>
</fieldset>
</form>
So, in the barcode scanner if I open my html page, write with virtual keyboard in input and submit with submit button: it works.
But if I'm scanning a barcode, form is automatically submitted, record is saved but reference field is empty in DB.
My PHP code :
<?php
if(isset($_POST["reference"])){
$hostname='****';
$username='****';
$password='*****';
try {
$dbh = new PDO("mysql:host=$hostname;dbname=name",$username,$password);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "INSERT INTO product (reference)
VALUES ('".$_POST["reference"]."')";
if ($dbh->query($sql)) {
echo 'Done!';
}
else{
echo 'Error!';
}
$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
Do you have an idea?
Thanks.
PS : It's not optimized for SQL injection for example, it will be done when record will work
EDIT : WORK AFTER A REBOOT.

Most barcode scanners I've used in libraries send a carriage return following the data they've scanned. There is often a way to declare that you don't want a CR in the scanner's settings. Check the manufacturer's website.

Apply multilingual php with custom javascript file

I applied the multilingual and i also need to apply in javascript code which part of alerting message.
This is the common.php code.
<?php
session_start();
header('Content-Type: text/html; charset=utf-8');
header('Cache-control: private'); // IE 6 FIX
$CUR_LANG = 'en';
if(isset($_COOKIE['lang'])){
$CUR_LANG = $_COOKIE['lang'];
setcookie('lang', $CUR_LANG, time() + (3600 * 24 * 30));
}
switch ($CUR_LANG) {
case 'ko':
$lang_file = 'ko.php';
break;
default:
$lang_file = 'en.php';
break;
}
include_once("multilingual/".$lang_file);
?>
and this is the signin.html page
<?php include_once('top.php'); ?>
<div class="" style="background:#F7F7F7;">
<div id="wrapper">
<div id="login" class="animate form">
<section class="login_content">
<form id="signin" name="signin" class="signinForm" onsubmit="return false;" method="post" action="signin.html";>
<input type="hidden" name="act" value="signin">
<h1>Login Form</h1>
<div>
<input type="email" class="form-control" id="userEmail" name="userEmail" placeholder="<?= $lang['SIGNIN_ENTER_EMAIL'] ?>" required="" />
</div>
<div>
<input type="password" class="form-control" id="userPassword" name="userPassword" placeholder="<?= $lang['SIGNIN_ENTER_PASSWD'] ?>" required="" />
</div>
<div>
<a class="btn btn-default" id="signin_btn" href="signin.html"><?= $lang['SIGNIN'] ?></a>
</div>
<div class="clearfix"></div>
<div class="separator">
<a class="reset_pass" href="user-password-reset.html"><?= $lang['SIGNIN_RESET_PASSWD'] ?></a>
<p class="change_link"><?= $lang['SIGNIN_CREATE'] ?>
<?= $lang['SIGNIN_ACCOUNT'] ?>
</p>
<div class="clearfix"></div>
<br />
<!--<div>
<h1><i class="fa fa-gamepad" style="font-size: 26px;"></i> GAMEPARTY </h1>
</div>-->
</div>
</form>
<!-- form -->
</section>
<!-- content -->
</div>
</div><!-- #wrapper -->
</div>
<script type="text/javascript">
function checkFormValid() {
var isFormValid = true;
$(".signinForm input").each(function(){
if ($.trim($(this).val()).length == 0){
console.log("(no value)input id : " + this.id);
isFormValid = false;
}
});
if(isFormValid) {
checkEmail();
}else {
alert("<?= $lang['SIGNUP_ALERT_0'] ?>"); //here is the msg!
}
}
This page includes the top.php and top.php also includes the common.php.
The attached bottom of javascript code is needed to validate and alert the message.
The message show well depends on applied multilingual. However, the custom js files also have these kind of multilingual messages to alert but they just shows php code.
function email_form_validation(element) {
var email = element.val();
console.log("email_from_validation : " + email);
var regex = /[0-9a-zA-Z][_0-9a-zA-Z-]*#[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+){1,2}$/;
if(regex.test(email)){
return true;
}else {
alert("<?= $lang['E_FROM_VAL'] ?>");//This msg isn't applied the mulitilingual.
element.focus();
return false;
}
}
The above is the sample of common.js file and this common.js file is included in top.php file because this is the group of validation that must be needed from all files. How can i figure out this? The msg in common.js appears just like this -> "<?= $lang['E_FROM_VAL'] ?>"
How can i bring the php file and show it? Please let me know.

I figured out how to do. I simply renamed the common.js to val.php and also modified the top.php like below.
<script type="text/javascript" src="../val.php"></script>
I also added the <?php include_once('./common/common.php'); ?> to the val.php
That's all. It works great.

Display a hidden div after a html form submit to show output

I have a html form to collect name and place and after user submit the form, the out will display at bottom of the page using PHP echo
My requirement is,
hide the output div before the form submit and after user enter data and submit, I have to make output div visible to display form output using PHP echo.
Here is my HTML code:
<div class="main">
<form id="main" name="main" action="#text" method="post">
<div class="input">
<div id="name">
<div class="block">
<div class="input-quest">Your Name</div>
<div class="input-resp"><span><input class="textbox" id="nm" name="nm" type="text" value="" /></span>
</div>
</div>
</div>
<div id="place">
<div class="block">
<div class="input-quest">Your Place</div>
<div class="input-resp"><span><input class="textbox" id="pl" name="pl" type="text" value="" /></span>
</div>
</div>
</div>
</div>
<div class="submit">
<input id="generate" type="submit" name="script" value="generate" />
<input type="submit" id="clear" name="clear" value="clear" />
</div>
</form>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
</div>
It contain the PHP echo codes at output div section.
I have searched for solution in previous questions and tried below methods mentioned there:
1.Added a inline CSS tag for output div to hide it
<div id="output" style="display: none;">
<!-- echo php here -->
</div>
and added JavaScript to call function during submit
$('main').submit(function(){
$('#output').show();
});
It didn't work.
2.Tried with below JavaScript code
$('main').submit(function(e){
$('#output').show();
e.preventDefault();
});
It didn't work.
3.Removed inline CSS for output div to hide and added the same to my CSS stylesheet
<div id="output">
and in stylesheet
#output{
display:none;
}
and used below JavaScript code on submit
$('main').submit(function(){
$('#output').css({
'display' : 'block'
});
});
It didn't work.
Added a onclick function along with the form submit
and submit button code:
<input id="generate" type="submit" name="script" value="generate" onclick="showoutput()"/>
and JavaScript:
showoutput(){
$('#output').slideDown("fast");
}
and with
showoutput(){
$('#output').show();
}
It didn't work.
Please suggest a solution to do this.

I'm not sure why you need to use js/css for this at all. Just check if the variables were posted, and if they were, echo them (you'd have to set your form action to point to the same page):
<?php if (!empty($_POST['nm']) && !empty($_POST['pl'])) { ?>
<div class="output">
Hello, I am <?php echo $_POST['nm']; ?>, and I am from <?php echo $_POST['pl']; ?>
</div>
<?php } ?>
If you just want to display the name and place in div.output, without actually submitting the form, you could do:
$('#main').submit(function(e) {
e.preventDefault(); // prevent form from being submitted
$('div.output').text('Hello, I am ' + $('#nm').val() + ', and I am from ' + $('#pl').val());
});
Here's a fiddle

<?php if(isset($_POST['nm'])) { ?>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
<?php } ?>

Create a separate page to process your form using javascript/jquery (ajax), and have it return the info you want, hide the form and show the .output div.
PHP Page:
<?php
$name = $_POST['nm'];
$place = $_POST['pl'];
echo "Hello, I am ".$name." and I am from ". $place;
?>
The javascript/jquery would catch that as responseText and then use innerHTML on your .output div to put that responseText. You'd then use the JS/Jquery to hide the form and show the .output

You can actually accomplish this entirely with php. The simplest method that I would use would be to make a hidden input with a given value. Once the user submits the form, that variable will exist and you can grab it in your php.
First you need to change the entire page to .php, and echo all of your html. then in the form, set the action to the name of the page so that it will send the variables to itself and then you can deal with them on the same page.
add this to the html:
<input type='hidden' name='display' value='display' />
In your php, add:
if (isset($_POST['display']){
echo "make the div here";
}else{
//don't show the div
}