I'm using a datepicker it works well but I would like to get the data after the user submit the form. So far I didn't find the way to do it and I would like to use Post and not Get. I would like to stay in the same page after send it.
Here is my code:
<script type="text/javascript">
window.onload = function(){
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"div3_example"
});
g_globalObject.setOnSelectedDelegate(function(){
var obj = g_globalObject.getSelectedDay();
document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year;
});
};
</script>
</head>
<body>
<div id="div3_example" style="margin:10px 0 30px 0; border:groove 1px red; width:205px; height:230px;">
</div>
<div id="div3_example_result" style="height:20px; width:205px; line-height:20px; margin:10px 0 0 0; border:groove 1px #666;"></div>
<form action="" method="post">
<input type="button" value="send"/>
</form>
Related
So I'm currently working on an invoicing tool which works fine however what im looking to do is to increment the data inserted within the within every new row added. Once that's done, i then want to be able to grab all of that data and submit it to the MySQL database using php. Does anybody know how this is done?
I've never studied Jquery if im honest so I wouldn't know where to start. Thanks
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoce Report</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var variants = $("#variants").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<?php
$mg = "mg";
$cb = "Classic Tobacco - 10ml";
$sh = "Sahara Tobacco - 10ml";
$ed = "Energy Drink - 10ml";
?>
<body>
<form id="invoice" action="invoicereg.php" method="POST">
<select id="name" name="name">
<option value="<?php echo $cb; ?>">Aramax Classic Tobacco</option>
<option value="<?php echo $sh; ?>">Aramax Sahara</option>
<option value="<?php echo $ed; ?>">Aramax Energy Drink</option>
</select>
<select id="variants" placeholder="Variants - If Applicable">
<option></option>
<option value="3<?php echo $mg; ?>">3mg</option>
<option value="6<?php echo $mg; ?>">6mg</option>
<option value="12<?php echo $mg; ?>">12mg</option>
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Product</th>
<th>Variant - If Applicable</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button><br><br>
<input type="submit" form="invoice">
</body>
</html>
Didn't test que jquery part, but this seems to lack the field in the form you want after submit. In the:
var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
You need to include the data you need to submit in the form. example:
var markup = '<tr><td><input type="checkbox" name="record"></td><td name><input type="hidden" name="values[]" value="' + name + ' ' +variants+ '" >' + name + '</td><td>' + variants + '</td></tr>';
After submit, in $_POST you get the value in array $_POST['values'].
Don't forget to check isset, it could be submitted with any value. And proper escape values to sql.
I own a site called flopl.com. It's pretty basic. Upload your files, and get a URL back with a link to the file. But I wasn't the one coding it, and now I can't get help from the person who did anymore. There's something wrong in the code, but I don't know enough to figure out what. So.. Here's the code:
HTML:
<!DOCTYPE html>
<html style="width:100%">
<head>
<title>flopl</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<link rel="shortcut icon" href="http://flopl.com/images/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:25px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:-1px; left:48%; }
</style>
</head>
<body style="width:100%">
<div style="background-color:#2d2d2d; width: auto; height:150px; padding:-10px; margin-top:-20px;">
</div>
<div style="background-color:#8be1ab; width: auto; height:10px; padding:-10px; margin-top:0px;">
</div>
<center>
<img width="275px" src="images/logo.png" style="position:absolute; margin-top:-145px; margin-left:-145px;" />
</center>
<div style="width:400px; margin:auto; position:relative; margin-top:15%;" >
<center>
<div style="margin-top:90px; margin-left:25px;">
<p style="word-spacing:0.6px; font-family:Helvetica font-weight:light; margin-top:-20px; position:center;">Upload any type of file,</p>
<p style="word-spacing:0.6px; font-family:Helvetica font-weight:light; margin-top:-20px; position:center;">with no compression!</p>
</div>
</center>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajax_image.php'>
<img width="332px" src="images/upload.png" style="position:absolute; top:-120px; left:40px;"/>
<input type="file" name="photoimg" id="photoimg" style="padding: 0; margin: 0; display: none;" />
</form>
<div class="progress" style="display: none;">
<div class="bar"></div >
<div class="percent">0%</div>
</div>
<div id="status"></div>
<center>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img width="300" src="images/uploading.png" alt="Laddar upp...."/>');
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var progress = $('.progress');
$('#imageform').ajaxForm({
target: '#preview',
beforeSend: function() {
status.empty();
progress.show();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal);
percent.html(percentVal);
},
complete: function(xhr) {
//status.html(xhr.responseText);
}
}).submit();
});
});
</script>
<div id='preview' style="margin-top:40px;">
</div>
</center>
</div>
</div>
<div class="footer" id="footer">
<div id="top">
<img id="copyright" src="images/footer.png" alt="">
<a id="logo" href="http://www.simplyvisual.se" target="_blank">
<img width="150px" src="/images/SV.png" alt="Simply Visual">
</a>
</div>
<!--<div class="footer" id="footer"><img style="margin-top:1%; margin-left:0%" width="150" src="images/SV.png" /><img style="margin-top:0%;" src="images/footer.png" />--></div>
</body>
</html>
And the PHP:
<?php
session_start();
$session_id='1'; // User session id
$path = "upload/";
function url($url) {
$url = preg_replace('~[^\\pL0-9_]+~u', '-', $url);
$url = trim($url, "-");
$url = iconv("utf-8", "us-ascii//TRANSLIT", $url);
$url = strtolower($url);
$url = preg_replace('~[^-a-z0-9_]+~', '', $url);
return $url;
}
if(!empty($_POST) && !empty($_FILES['photoimg']) && $_SERVER['REQUEST_METHOD'] == 'POST')
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
$pi = pathinfo($name);
$txt = $pi['filename'];
$ext = $pi['extension'];
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
echo "Here's the link to your file: <a href='http://flopl.com/".$path.$actual_image_name."'>http://flopl.com/".$path.$actual_image_name."</a>";
}
} else {
echo "Something went wrong.";
exit;
}
?>
The progress-bar is showing, but I only get "Something went wrong" back. I've checked, the PHP.ini is set up correctly. The files are not uploading, and therefor also not giving me a URL back.
Could anyone figure out what's wrong?
Best regards,
primarypanda
I found at least 2 problems with your project.
Your host may allow upload big files but you need to check that file uploads are set or not in PHP.ini file. in most of the CPanels, they allow to make custom php.ini file settings, here you need to set max_file_uploads = 20M or so.
using isset() function may cause some problem, I use !empty() function instead because it checks whether the variable is set and not empty both. so you can do it in your code like...
if(!empty($_POST) && !empty($_FILES['photoimg']) && $_SERVER['REQUEST_METHOD'] == 'POST'){...}
You can notice that I have also checked that $_FILES['photoimg'] are also not empty, that means that the file is actually uploaded.
Best luck and Thank you
I was redirecting to new page start.php and passing variable in this way:
window.location.href = 'start.php?&userid=+ userid;`
Can I do it in this way:
$.post('start.php',{userid: userid});
window.location.href = 'start.php';
I dont want to use GET and Form submit.
Because on same page there are other processes which already post data to other page.
I tested above but on start.php it says var is not defined
UPDATE
start.php
<?php
$user_id=$_GET['userid']; //When I use GET
?>
<?php
$user_id=$_POST['userid']; //When I use POST
?>
login.php
<html>
<head>
<title>ThenWat</title>
<link href="css/button.css" rel="stylesheet" type="text/css">
<link href="css/rateit.css" rel="stylesheet" type="text/css">
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.rateit.js" type="text/javascript"></script>
<style>
.header{
background-color:#0B6121;
border:2px solid #0B6121;
padding:10px 40px;
border-radius:5px;
}
.middle{
background-color:Yellow;
}
.left{
background-color:Green;
}
.url{
box-sizing: border-box;
display: block;
}
.url:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
html, body { margin: 0; padding: 0; border: 0 }
</style>
</head>
<body>
<div class="header" style="">
<table style="">
<tr>
<td><img src= "3.png" height="50" width="310"/></td>
</tr>
</table>
</div>
<table border="0" width="100%">
<tr>
<div class="middle">
<td style="width:40%">
<input type="button" id="loginButton" class="button" onclick="authUser();" value="Login | ThanWat" style="display:none; left:500px; position:relative"/>
<lable id="lable1" style="display:none;" ><i> Please wait .. </i> </lable>
<div class="rateit bigstars" id="rateit99" data-rateit-starwidth="32" data-rateit-starheight="32" style=" position:relative; top:-30px; display:none; left:300px" >
</div>
</td>
</div>
</tr>
</table>
<div id="fb-root"></div>
<script type="text/javascript">
var userid;
FB.init({
appId: '1412066',
xfbml: true,
status: true,
cookie: true,
});
FB.getLoginStatus(checkLoginStatus);
function authUser()
{
FB.login(checkLoginStatus, {scope:'email'});
}
function checkLoginStatus(response)
{
document.getElementById('lable1').style.display = 'block';
if(response && response.status == 'connected')
{
FB.api('/me?fields=movies,email,name', function(mydata)
{
console.log(mydata.email);
console.log(mydata.id);
userid=mydata.id;
var name=mydata.name;
//alert(name);
var email=mydata.email;
var json = JSON.stringify(mydata.movies.data);
var a = JSON.parse(json);
var picture="https://graph.facebook.com/"+userid+"/picture?type=small";
// alert(picture);
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
window.location.href = 'start.php?userid='+userid;
});
});
console.log('Access Token: ' + response.authResponse.accessToken);
}
else
{
document.getElementById('lable1').style.display = 'none';
document.getElementById('loginButton').style.display = 'block';
}
}
</script>
</body>
</html>
UPDATE2
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
var $form = $("<form id='form1' method='post' action='start.php'></form>");
form.append('<input type="hidden" name="userid" value="'+userid+'" />');
$('body').append($form);
window.form1.submit();
});
start.php
<?php
$user_id=$_POST['userid'];
echo $user_id;
?>
Here is a solution that worked for me. You need to add a new form using jquery after your first ajax response and then submit this form using javascript.
<script>
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data){
var $form = $("<form id='form1' method='post' action='start.php'></form>");
$form.append('<input type="hidden" name="userid" value="'+data+'" />');
$('body').append($form);
window.form1.submit();
});
</script>
Please modify it according to your requirement. Hope this helps
In this below code i have text box and submit button .when i enter or refresh that page the div tag displays but my expected result is when i enter a value in textbox and click submit button then div tag should appear.The problem is div tag displays always. Please any one help me.
<form action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
<input type="text" name = "keyword" />
<input type="submit" id="opn" value = "Search" />
</form>
<div id='hideme'>
<strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')"/>
</a>
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal" >
<table>
<tr>
<th>course_code</th>
<th>course name</th>
</tr>
<?php foreach($results as $row):?>
<tr>
<center>
<td>
<?php echo $row->course_code?>
</td>
</center>
<center>
<td>
<?php echo $row->course_name?>
</td>
</center>
</tr>
<?php endforeach;?>
</table></div></div>
</div>
<script>
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(10);
});
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
First I'd like to say that mixing JQuery with traditional javascript is not very efficient.. Instead of using getElementById you can use $('#' + obj).val()...
In your problem I guess the most efficient solution would be to use JQuery's .hide() and .show() methods to hide and unhide divs....
You can try this :
function hide(obj) {
var el = $('#' + obj).val();
e1.hide();
}
Also if you want any div to be hidden as soon as the page is loaded, you can use the hide method in $(document).ready(){}... To show it anytime you can use e1.show() method...
First you need to hide your div through css usign display:none;. You haven't set this that is why your div is showing on page load.
Your div should looks like
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;display:none;" id="modal" >
Call a function on form submit. Your <form> tag should looks like
<form onSubmit="return showDiv();" action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
And your javascript function will looks like
function showDiv() {
$('#modal').fadeIn(10);
return false; //not to refresh page
}
First add display:none; to the div whom you want to be hidden,
add attribute
onsubmit="return validate()"
function validate()
{
//validate the form as you want
document.getElementById('modal').style.display="block";
return false ; // if you dont want to submit the form
}
all you need is an css style <style>#hideme{display:none}</style>
I am developing an application where i am capturing images from a camera and streaming them online. To capture images i am using an opencv code. It stores(rewrites) the image on the same image file on server. This image is then streamed online. However if the streaming and storing take place simultaneously then the image gets corrupt. So i have synchronized those processes using system locks. The html page that checks that reloads the image every 2 secs checks if the img file has a system lock. If yes then it doesn't reload the image. So to check whether the file is locked or not i have to put some php code in my html file. I believe that my code is sytactically correct. Yet it is not giving the desired output.
<html>
<head>
<!--to keep requesting the server new page without displaying the image from the cache pragma
is used -->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>YOUR SITE TITLE GOES HERE</title>
<style type="text/css">
#imgJSselbox{
position: absolute;
margin: 0px;
padding: 0px;
visibility: hidden;
width: 0px;
height: 0px;
border: 1px solid #006;
color: #fff;
background-image: url(selection_area.gif);
z-index: 20;
}
</style>
<script type="text/javascript" src="globalvar.js"></script>
<script language="Javascript">
var x = 2;
var y = 1;
var now;
function startClock() {
x = x-y;
document.form1.clock.value = x;
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
if(flock($fp1,LOCK_EX|LOCK_NB)==0 && flock($fp2,LOCK_EX|LOCK_NB)==0)
$x=1;
else
$x=0;
?>
var ch;
ch=<?php echo $x; ?>
if (x < 1 && ch==1) reload();
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
flock($fp1,LOCK_UN);
flock($fp2,LOCK_UN);
?>
timerID = setTimeout("startClock()", 1000);
}
function reload()
{
now = new Date();
<!-- to pass the new image to the src -->
var camImg = "a.jpg" + "?" + now.getTime();
document.campicture.src = camImg;
var crpImg = "b.jpeg" + "?" + now.getTime();
document.croppic.src = crpImg;
x = 2;
document.form1.clock.value = x;
}
</script>
<script type="text/javascript" src="image_cropper.js">
document.form1.x-coord.value=x1;
document.write(x1);
</script>
<script>
function window.open('im','imgg')
{
window.open('im','imgg');
}
</script>
</head>
<body bgcolor="white" onLoad="startClock()">
<center>
<font size=-1>
<h1>AYS WEBCAM PAGE</h1>
<h2>This page loads images and refreshes them after every given interval of time keeping
the same name of the image file</h2><p><br />
<div id="imgJSselbox"></div>
</center>
<img name="campicture" src="a.jpg" id="testimage" border=1 width=640 height=480
alt="AYS
founder's IMAGE" onClick="getImageCropSelectionPoint
'testimage',event,document.form1);">
====>>ROI==>>
<img name="croppic" src="b.jpeg" width=320 height=240 alt="cropped_image">
<center>
<form NAME="form1"action="image_cropper.php" method="POST"><b><font size="-1"
face="Arial">AutoReload in :==> </font>
<input TYPE="text" NAME="clock" SIZE="2" VALUE="5"> <font size="-1"
face="Arial">seconds.</font></b><br />
<br><br><input type="button" value="Crop" onclick= setImageCropAreaSubmit
("image_cropper.php",'testimage')><br><br>
</center>
<!-- <input type="text" name="x-coord" value=""><br>
<input type="text" name="y-coord" value=""><br>
<input type="text" name="wid" value="" ><br>
<input type="text" name="hght" value="" ><br>
-->
</form>
</body>
</html>
Thank you
Your problem is in the code timerID = setTimeout("startClock()", 1000);.
Use
timerID = setTimeout(startClock, 1000); instead.
See window.setTimeout - MDN.