Im trying to save the current timestamp of the video being played as soon as I click submit. But in the table only 0 is getting saved and Im unable to fetch & save the current timestamp of video. Although its getting displayed but not getting saved in SQL table.
NOTE : timestamp(tstamp) : Is a dynamic value, which is the timestamp of the video file being played in the browser( for example 1.935771),
fileUpload.php
<body>
<h1>VIDO LABELLING TOOL</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
<source src="project.m4v" type='video/mp4'>
<track src='br.srt' kind="subtitles" srclang="en" label="English" default>
</video>
<script>
// Get the audio element with id="my_video_1"
var aud = document.getElementById("my_video_1");
// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud.ontimeupdate = function () {
myFunction()
};
</script>
<div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">
<form name="contact-form" action="" method="post" id="contact-form">
<label for="email">Comments about the frame</label>
<textarea name="message" class="form-control" id="message"></textarea>
<div class="error" id="error_message"></div>
<label>Vehicle Type:</label>
<input name="veh_type_1" id="veh_type_1" type="checkbox" value="lmv">lmv
<input name="veh_type_2" id="veh_type_2" type="checkbox" value="2w">2w
<p>TimeStamp: <span id="tstamp"></span></p>
</div>
<p class="submit">
<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
</p>
<div class="display-content">
<div class="message-wrap dn"> </div>
</div>
</form>
</div>
<script>
function myFunction() {
document.getElementById("tstamp").innerHTML = aud.currentTime;
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#contact-form").on("submit", function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: "saveFile.php",
data: $(this).serialize(),
success: function () {
alert("form was submitted");
}
});
return false;
});
});
</script>
</body>
and the php file for db update as :-
saveFile.php
<?php
$servername = "localhost";
$database = "stackover";
$username = "root";
$password = "123456";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
$tstamp = addslashes($_POST['tstamp']);
$message = addslashes($_POST['message']);
$veh_type_1 = addslashes($_POST['veh_type_1']);
$veh_type_2 = addslashes($_POST['veh_type_2']);
mysqli_query($conn, "insert into saveData(message,tstamp,veh_type_1, veh_type_2) values ('$message','$tstamp','$veh_type_1', '$veh_type_2')");
$sql = mysqli_query($conn, "SELECT message,tstamp,veh_type_1,veh_type_2 id FROM saveData order by id desc");
$result = mysqli_fetch_array($sql);
echo '<div class="message-wrap">' . $result['message'] . '</div>';
?>
Please add this into your form
<input name="tstamp" id="hidden-tstamp" type="hidden">
and inside your script add below code
function myFunction() {
document.getElementById("tstamp").innerHTML = aud.currentTime;
document.getElementById('hidden-tstamp').value = aud.currentTime;
}
Related
Previously I could not know about ajax. therefore I want to ask.
I want to display my wordlist from mysql into a text field but in array. this is the index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container" >
<h2>View data</h2>
<h4>Word List : </h4>
<div class="form-group">
<input id="wordlist" type="text" class="form-control" name="wordlist">
</div><br>
<button id="display" title="Generate Word">Generate</button>
<div class="input-single">
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#display").click(function() {
$.ajax({
type: "GET",
url: "view_ajax.php",
dataType: "html",
success: function(){
$('').html();
}
});
});
});
</script>
And then this is the process.php
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "posts";
$con = mysqli_connect($host, $user, $password, $dbname);
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "select wordlist from word";
$res = mysqli_query($con,$sql);
$result = array();
while($row = mysqli_fetch_array($res)){
array_push($result,
array('wordlist'=>$row[0]));
}
echo json_encode(array('result'=>$result));
mysqli_close($con);
?>
I will be very helpful if you can give an answer. Thank you
Change your PHP loop to something like this:
$result = array();
while($row = mysqli_fetch_array($res)){
$result[]= $row[0];
}
echo json_encode(array('wordlist'=>$result));
Then, in your JS, see below
$(document).ready(function() {
$("#display").click(function() {
/*$.ajax({
type: "GET",
url: "view_ajax.php",
dataType: "json",
success: function(response){
// use the code below in this area
}
});*/
let response = {
"wordlist": ["This", "is", "the", "return", "from", "your", "server"]
} // this is what the response object will look like in your success function above
let output
// normal comma delimited response
output = response.wordlist.join(",");
// or if you want to keep the quotes
output = JSON.stringify(response.wordlist);
output = output.substr(1, output.length - 2);
// use .val() to set the value of an input
$('#wordlist').val(output);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2>View data</h2>
<h4>Word List : </h4>
<div class="form-group">
<input id="wordlist" type="text" class="form-control" name="wordlist">
</div><br>
<button id="display" title="Generate Word">Generate</button>
<div class="input-single">
</div>
I have used dropzone js inside a small form with couple of fields. I want to submit both images and form data all at once to the database. No errors can be seen in the logs and was searching all over the internet for a solution. I'm a newbie to PHP, so a bit of help would much appreciated.
Form
<form action="index.php" method="POST" class="form-horizontal" role="form">
<div class="form-group"></div>
<label for="name">Name :</label>
<input type="text" name="name" id="input-title" class="form-control">
<br><br>
<label for="description">Email:</label>
<input type="text" name="description" id="input-description" class="form-control">
<br><br>
<label for="File">File: </label>
<br><br>
<div class="dropzone dropzone-previews" name="File" id="my-awesome-dropzone"></div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
PHP Query
<?php
if( isset($_POST['submit']) && isset($_POST['name']) && isset($_POST['email']) && !empty($_FILES)){
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'mystore';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$name = $_POST['name'];
$email = $_POST['email'];
$targetDir = "upload/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO products (product_name,details,category, date_added) VALUES('".$name."','".$email."','".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
else{
$error = "Fill All Details First !!";
if ( isset($_POST['submit']) && isset($error)) { echo $error; }
}
?>
Dropzone JS
<script type="text/javascript">
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
$("div#my-awesome-dropzone").dropzone({
url: "/file/post"
});
});
</script>
You must use something like this
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#my-awesome-dropzone", {
maxFiles: <?php echo $upload_file_number; ?>,
url: "remote/upload-file.php",
addRemoveLinks: true,
autoProcessQueue: false,
init: function() {
this.on("maxfilesexceeded", function(file){
//handle error for max file size
});
var submitButton = document.querySelector("#submit-button");
var id_import_xls;
var myDropzone = this;
submitButton.addEventListener("click", function(e){
/* HERE PUT THE AJAX FOR SUBMIT FORM AFTER SUBMIT UPLOAD THE FILE */
if (myDropzone.getUploadingFiles().length === 0 && myDropzone.getQueuedFiles().length === 0) {
//handle the error for no file selected if needed
}else{
//with this start upload
myDropzone.processQueue();
};
});//fine addEventListener
this.on("error", function(file, response) {
//handle the error
});
this.on("complete", function (file, response) {
//here can handle the success of upload
});
},
success: function(file, response){
//here can handle the success of upload
},
});
Before I ask you my question I want to clarify that I'm just a rookie to Ajax and Jquery, so please spare me if the doubt is very small or a piece of cake, sorry for that.
I'm trying to create review system for my E-Commerce using Ajax and PHP. The problem is, the data is not inserting in to the database, but if I insert the the data manually in the database it displaying perfectly in my site.I think there is something going wrong with the variable review or user_review but couldn't find what it is.So, could you please tell me where I've done the mistake.
<div role="tabpanel" class="tab-pane" id="reviews">
<h4>Write your Review</h4>
<form action="" method="post" onsubmit="return post();">
<textarea id="review" class="reviewbox" placeholder="Write Your Review Here....."></textarea>
<button type="submit" class="btn">Submit</button>
</form>
<div id="all_reviews">
<?php
$query = $pdo->prepare("SELECT * FROM reviews WHERE product_id=?");
$query -> bindValue(1, $id);
$query->execute();
while ($row = $query->fetch(PDO::FETCH_ASSOC))
{
$name = $row['user_name'];
$text = $row['review_text'];
$time = $row['post_time'];
?>
<h5>By <?php echo $name; ?></h5>
<p><i>posted on <?php echo $time; ?></i></p>
<p>
<?php echo $text; ?>
</p>
<hr>
<?php
}
?>
</div>
<script type="text/javascript" src="jquery.js">
< script type = "text/javascript" >
function post() {
var review = document.getElementById("review").value;
if (review) {
$.ajax({
type: 'POST',
url: 'post_reviews.php',
data: {
user_review: review
},
success: function(response) {
document.getElementById("all_reviews").innerHTML = response + document.getElementById("all_reviews").innerHTML;
document.getElementById("review").value = "";
}
});
}
return false;
}
</script>
</div>
This is my post_reviews.php:
<?php
session_start();
require('includes/product.php');
require('includes/connect.php');
$product = new Product;
if(isset ($_GET['id'])) {
$id = $_GET['id'];
$data = $product -> fetch_data($id);
if(isset($_POST['user_review'])){
$review=$_POST['user_review'];
if (isset($_SESSION['logged_in'])) {
$query = $pdo -> prepare("INSERT INTO reviews(product_id,user_name,review_text) VALUES (?,?,?)");
$query -> bindValue(1, $id);
$query -> bindValue(2, $_SESSION['name']);
$query -> bindValue(3,$review);
$query ->execute();
}
else{
$review_msg="Please login to post your review";
}
$query = $pdo->prepare("SELECT * FROM reviews WHERE product_id=?");
$query -> bindValue(1, $id);
$query->execute();
while ($row = $query->fetch(PDO::FETCH_ASSOC)){
$name = $row['user_name'];
$text = $row['review_text'];
$time = $row['post_time'];
?>
<?php if(isset($review_msg)){ ?>
<small style = "color : #aa0000"; ><?php echo $review_msg ?></small>
<br><br>
<?php } ?>
<h5>By <?php echo $name; ?></h5>
<p><i>posted on <?php echo $time; ?></i></p>
<p><?php echo $text; ?></p>
<hr>
<?php
}
}
exit;
}
?>
There is a mistake you have done your script code is not closed
<script type="text/javascript" src="jquery.js">
To
<script type="text/javascript" src="jquery.js"></script>
That is the reason your ajax is not working.
first check your ajax working or not on button click
var review = document.getElementById("review").value;
$.ajax({
type: "POST",
url: "post_reviews.php",
data: review,
cache: false,
dataType: 'json',
success: function(response){
document.getElementById("all_reviews").innerHTML = response + document.getElementById("all_reviews").innerHTML;
document.getElementById("review").value = "";
}
});
return false;
Now I see. You are submiting the form.
<form action="" method="post" onsubmit="return post();">
<textarea id="review" class="reviewbox" placeholder="Write Your Review
Here....."></textarea>
<button type="submit" class="btn">Submit</button>
</form>
Try to replace your form with this:
<form action="" method="post">
<textarea id="review" class="reviewbox" placeholder="Write Your Review
Here....."></textarea>
<button type="button" onclick="post()" class="btn">Submit</button>
</form>
If button type is "button" it will not submit the form. And by clicking it now will call your function and execute ajax call.
I have a checkbox list. When I click on a checkbox, a modal appears with corresponding data coming from database. I have already done this. here are my codes.
db.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "db";
$conn = mysqli_connect($servername, $username, $password,$db);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully <br/>";
?>
student.php
<body>
<form>
<label>
<input type="checkbox" value="1" name="name">
Ann
</label>
<label>
<input type="checkbox" value="2" name="name">
Sam
</label>
<label>
<input type="checkbox" value="3" name="name">
Amaa
</label>
</form>
<!--modal-->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" id="submit" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
student.js
$(document).ready(function(){
$("input[type=checkbox][name=name]").change(function(){
if(this.checked) {
var value = $(this).val();
$.ajax({
url:"modal.php",
type:"POST",
data:{value:value},
success:function(modalBody){
$("#myModal .modal-body").html(modalBody);
$("#myModal").modal('show');
}
});
}
});
});
modal.php
<?php
if($_POST['value']){
$test = $_POST['value'];
include('db.php');
$sql = "SELECT subject FROM grade where name=".$value." ";
$res = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($res)){
echo "<input type='checkbox' name='subject[]' value='".$row['subject']."'>".$row['subject'];
echo "<br>";
}
}
?>
My problem is how to send selected checkbox values on the modal into the database?
Here are the way I tried.
new.js
$(document).ready(function(){
$("input[type=checkbox][name=name]").change(function(){
if(this.checked) {
var value = $(this).val();
$.ajax({
url:"modal.php",
type:"POST",
data:{test:value},
success:function(modalBody){
$("#myModal .modal-body").html(modalBody);
$("#myModal").modal('show');
}
});
}
});
$('#myModal submit').on('submit',function(){
var insert = [];
$('input[name=category[]]').each(function(){
if($(this).is(":checked")) {
insert.push($(this).val());
}
});
insert = insert.toString();
$.ajax({
url: "insert.php",
method: "POST",
data:{insert:insert},
success:function(data){
$('#result').html(data);
}
});
});
});
insert.php
<?php
if(isset($_POST["insert"])) {
include ('db.php');
$query = "INSERT INTO name_list(student_name) VALUES ('".$_POST["insert"]."')";
$result= mysqli_query($conn, $query);
echo "Data Inserted Successfully!";
}
?>
I tried a lot. Everytime name_list table fills with no values. can you help me to solve this?Again I want send selected checkbox values on the modal into database. Below values.
echo "<input type='checkbox' name='subject[]' value='".$row['subject']."'>"
First of all if there are more than one checkbox with the same name than the name must be an array like:
<form>
<input type="checkbox" name="bla[]" value="1" />
<input type="checkbox" name="bla[]" value="2" />
</form>
Now you can get there value in jquery like:
$(document).ready( function () {
$("input[name='bla[]']").each( function () {
if($(this).is(':checked'))
{
alert($(this).val());
// put this value in an array
}
});
});
Working Fiddle
i am using some php and ajax to make a call to a database and i get this error: Warning: mysql_query() [function.mysql-query]: A link to the server could not be established... and Warning: mysql_query() [function.mysql-query]: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)
now from what i read looks like i need to create a database connection first, and the problem is that i am.
I am using require_once ('db_connect.php'); at the begining:
<?php
define("HOST", "localhost");
define("DBUSER", "123");
define("PASS", "123");
define("DB", "123");
$prefix = "";
############## Make the mysql connection ###########
$conn = mysql_connect(HOST, DBUSER, PASS) or die('Could not connect !<br />Please contact the site\'s administrator.');
$db = mysql_select_db(DB) or die('Could not connect to database !<br />Please contact the site\'s administrator.');
?>
My script looks something like this (ignore any missing or broken html):
<?php
session_start();
require_once ('db_connect.php'); // include the database connection
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html>
<head>
</head>
<body>
<div id="wrap">
<script type="text/javascript">
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var com_type = 1;
var email = $("#email").val();
var comment = $("#comment").val();
var post_id = $("#post_id").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment + '&post_id=' + post_id;
if(name=='' || email=='' || comment=='')
{
alert('Please Give Valide Details');
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
document.getElementById('email').value='';
document.getElementById('name').value='';
document.getElementById('comment').value='';
$("#name").focus();
$("#flash").hide();
}
});
}
return false;
});
});
</script>
<div id="main">
<ol id="update" class="timeline">
<?php
$sql=mysql_query("select * from comments where post_id_fk='$post_id'");
while($row=mysql_fetch_array($sql))
{
$name=$row['com_name'];
$com_type=$row['com_type'];
$email=$row['com_email'];
$comment_dis=$row['com_dis'];
$lowercase = strtolower($email);
$image = md5( $lowercase );
?>
<li class="box">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=<?php echo $image; ?>" class="com_img">
<span class="com_name"> <?php echo $name; ?><?php echo $com_type; ?></span> <br />My Comment</li>
<?php
}
?>
</ol>
<div id="flash" align="left" ></div>
<div style="margin-left:100px">
<form action="#" method="post">
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>"/>
<input type="text" name="title" id="name"/><span class="titles">Name</span><span class="star">*</span><br />
<input type="text" name="email" id="email"/><span class="titles">Email</span><span class="star">*</span><br />
<textarea name="comment" id="comment"></textarea><br />
<input type="submit" class="submit" value=" Submit Comment " />
</form>
</div>
</div>
</div>
</body>
</html>
the connectajax.php :
<?php
if($_POST)
{
$name=$_POST['name'];
$name=mysql_real_escape_string($name);
$com_type=$_POST['com_type'];
$name=mysql_real_escape_string($com_type);
$email=$_POST['email'];
$email=mysql_real_escape_string($email);
$comment=$_POST['comment'];
$comment=mysql_real_escape_string($comment);
$post_id=$_POST['post_id'];
$post_id=mysql_real_escape_string($post_id);
$lowercase = strtolower($email);
$image = md5( $lowercase );
mysql_query("insert into comment(com_name,com_type,come_email,com_dis) values ('$name','$com_type','$email','$comment_dis','$post_id')");
}
?>
<li class="box">
<img src="http://www.gravatar.com/avatar.php?gravatar_id=
<?php echo $image; ?>"/>
<?php echo $name;?><br />
<?php echo $comment; ?>
</li>
any idea?
thanks
You didn't require_once the db_connect.php script in your connectajax.php script (unless you omitted that line when copying the code in).
Sounds to me as though your mysql service is down. Try reloading it. If that doesn't work, maybe try connecting to a mysql database on another server, to see if maybe it's not the mysql service's fault.
Check if you have given proper access rights to Mysql database...
that will resolve this issue