in the QandATable.php I have a form below which contains a file input and an iframe:
var $fileVideo = $("<form action='videoupload.php' method='post' enctype='multipart/form-data' target='upload_target_video' onsubmit='return videoClickHandler(this);' class='videouploadform' >" +
"Video File: <input name='fileVideo' type='file' class='fileVideo' /></label>" +
"<input type='submit' name='submitVideoBtn' class='sbtnvideo' value='Upload' /></label>" +
"<p class='listVideo' align='left'></p>" +
"<iframe class='upload_target_video' name='upload_target_video' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");
Now below I have a jquery code which is triggered when the file has finished uploading.
function stopVideoUpload(success, videofilename){
var result = '';
videocounter++;
if (success == 1){
result = '<span class="videomsg'+videocounter+'">The file was uploaded successfully</span>';
$('.listVideo').eq(window.lastUploadVideoIndex).append('<div>' + htmlEncode(videofilename));
}
return true;
}
Now the result of the file upload and the file name is determined with the code below. But what my question is that how can I display the $id variable in a text input?
<script language="javascript" type="text/javascript">
window.top.stopVideoUpload(<?php echo $result; ?>,'<?php echo $id . $_FILES['fileVideo']['name'] ?>');
</script>
I might be misunderstanding your question, but if you change type='text' to type='hidden' on your input field, then the $id variable will be in a hidden input.
Related
I have a cancel button where the user can cancel on a file upload and it will display a cancel message. Now what I want also to happen is that when the user clicks on the Cancel button, it will look up for the file name which has been cancelled in the database and delete the database row. Problem is that it is not deleting the database row at all. How can I get this to happen. At the moment I am using the jpuery.ajax method which you can see in code below.
Below is form code:
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
"Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +
"</p><p class='imagef1_cancel' align='center'><label>" +
"<input type='button' name='imageCancel' class='imageCancel' cancel_image_file_name='" + imagefilename + "' value='Cancel' /></label></form>");
Below is the cancel button function:
$('.imagef1_cancel').eq(window.lastUploadImageIndex).find(".imageCancel").on("click", function(event) {
var cancel_image_file_name = $(this).attr('cancel_image_file_name');
jQuery.ajax("cancelimage.php?imagefilename=" + cancel_image_file_name)
return stopImageUpload(2, cancel_image_file_name);
});
Finally below is the cancelimage.php script where the jquery.ajax navigates to, to supposedly be able to delete the the database row containing the file name:
<?php
...
//I have connected to database
$cancel_image_file_name = $_GET["imagefilename"];
$imagecancelsql = "DELETE FROM Image
WHERE ImageFile = 'ImageFiles/". mysql_real_escape_string($cancel_image_file_name)."'";
mysql_query($imagecancelsql);
mysql_close();
?>
UPDATE:
Below is what it currently shows when I echo the delete query:
Notice: Undefined index: imagefilename in /web/stud/xxx/.../cancelimage.php on line 19
DELETE FROM Image WHERE ImageFile = 'ImageFiles/'
Below is the code of the delete function where when the Delete Button is pressed, it will navigate to the deleteimage.php script and delete the database row:
function stopImageUpload(success, imagefilename){
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
var image_file_name = $(this).attr('image_file_name');
jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
$(this).parent().remove();
});
return true;
}
Below is deleteimage.php script:
<?php
//connected to DB
$image_file_name = $_GET["imagefilename"];
$imagedeletesql = "DELETE FROM Image
WHERE ImageFile = 'ImageFiles/". mysql_real_escape_string($image_file_name)."'";
mysql_query($imagedeletesql);
mysql_close();
?>
Below is an UPDATE of what the cancel button function now looks like:
function startImageUpload(imageuploadform, imagefilename){
$('.imagef1_cancel').eq(window.lastUploadImageIndex).find(".imageCancel").on("click", function(event) {
var cancel_image_file_name_ = $(this).attr('css');
var cancel_image_file_name = '';
var style_array = cancel_image_file_name_.split(" ");
for(i=0;i<style_array.length;i++){
if(style_array[i].substr(0,2) == "__"){
cancel_image_file_name = style_array[i].slice(2,style_array[i].length-2);
}
}
jQuery.ajax("cancelimage.php?imagefilename=" + cancel_image_file_name)
return stopImageUpload(2, cancel_image_file_name);
});
return true;
}
I changed the button input tag to this for cancel button:
<input type='button' name='imageCancel' class='imageCancel __"+ imagefilename + "' value='Cancel' />
Try these changes:
on form:
<input type='button' name='imageCancel' class='imageCancel __"+ imagefilename + "' value='Cancel' /></label></form>
on cancel button function:
var cancel_image_file_name_ = $(this).attr('class');
var cancel_image_file_name = '';
var style_array = cancel_image_file_name_.split(" ");
for(i=0;i<style_array.length;i++){
if(style_array[i].substr(0,2) == "__"){
cancel_image_file_name = style_array[i].slice(2,style_array[i].length);
}
}
How can I get it so that when the user clicks on the "Cancel" button, then in the cancel button function where it contains the variable var image_file_name, it retrieves the name of the file which was entered within the file input? Then hopefully the $GET method in the cancelimage.php page can be used to retrieve the file name from the function?
Below is my attempt but it is not retrieving a file name. It is just retrieving a blank.
Below is the form code and javascript function which controls the "Cancel" button:
var $fileImage = $("<form action='imageupload.php'
method='post'enctype='multipart/form-data' target='upload_target' onsubmit='return
startImageUpload(this);' class='imageuploadform' ><label>" +
"Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>
<br/><label class='imagelbl'>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload'/>
</label>" +
"<input type='button' name='imageCancel' class='imageCancel' value='Cancel'/>
</label>" +
"<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>")
...
var _cancelimagecounter = cancelimagecounter;
$(".imageCancel").click(function() {
var image_file_name = <?php echo json_encode($image_file_name); ?>;
jQuery.ajax("cancelimage.php?fileImage=" + image_file_name)
.done(function(data) {
$(".imagemsg" + _cancelimagecounter).html(data);
});
return stopImageUpload();
});
Below is the cancelimage.php script where it uses the $GET method to get the file name from the var image_file_name:
<?php
...
$image_file_name = $_GET["fileImage"];
echo "File Upload was Canceled";
$imagecancelsql = "DELETE FROM Image
WHERE ImageFile = 'ImageFiles/". mysql_real_escape_string($image_file_name)."'";
mysql_query($imagecancelsql);
mysql_close();
?>
Filename is far form the issue here.... But your fileName is not displaying because you are trying to use $_GET["fileImage"];
The Form was submitted via enctype='multipart/form-data and <input name='fileImage' type='file'
You should use $_FILES instead ...
Your file name would be
$image_file_name = $_FILES['fileImage']['name'] ;
I am trying to submit a form with ajax. Here is my complete code
<?php
$wparent = "123";
$method = "sms";
?>
<script type="text/javascript">
$(document).ready(function(){
$("#post_<?php echo $wparent;?>").click(function(){
$('#parentpost-<?php echo $wparent;?>').html('Loading.....');
$("#parentpost-<?php echo $wparent;?>").load("<?php echo SITE_URL;?>new_ajax/post_reply.php", {message:$("[name=replynote]").val(), method:$("[name=method]").val(), parent:$("[name=parent]").val()}); //end
}); // end of the main click function
});
</script>
<?php
echo "<textarea name='replynote' ></textarea>";
echo "<input type=\"submit\" class=\"post_button\" id=\"post_$wparent\" value=\"post\" />";
echo "<input type=\"button\" class=\"cancel_button\" value=\"Cancel\" />";
?>
<input type='hidden' name='parent' value='<?php echo $wparent;?>' />
<input type="hidden" name="method" value="<?php echo $method;?>" />
When I checked the post variables with firebug I saw that, its sending only the method correctly. All other values are sent as undefined. I could not find the error till now.
Try pre-populating the data map that you're passing:
$(document).ready(function () {
$("#post_<?php echo $wparent;?>").click(function () {
var message = $("[name=replynote]").val();
var method = $("[name=method]").val();
var parent = $("[name=parent]").val();
var data = {
"message": message,
"method": method,
"parent": parent
};
$('#parentpost-<?php echo $wparent;?>').html('Loading.....');
$("#parentpost-<?php echo $wparent;?>").load("<?php echo SITE_URL;?>new_ajax/post_reply.php", data); //end
}); // end of the main click function
});
If data is an object containing undefined values, then your jQuery selectors aren't working.
Also, since you're only using a name attribute to find your inputs, you may want to be more specific in the selectors.
Finally, the attribute selectors typically need the value of the attribute enclosed in quotes, so try these for your selectors:
var message = $('textarea[name="replynote"]').val();
var method = $('input[name="method"]').val();
var parent = $('input[name="parent"]').val();
Hi All First of all I don't know Javascript, I got this script from the internet but can't get it to work. If someone can please be so kind and assist me. I'm trying to create a "check all" & "uncheck all" button on my form for my checkboxes, if I click the button it does not select anything. Where am I going wrong?
<?php
session_start();
?>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Begin
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
// End -->
</script>
</head>
And then the form:
$sql0 = "SELECT * FROM .....
$result0 = mysql_query($sql0);
echo "<form name='myform' action='...' method='post'>";
while($row0 = mysql_fetch_assoc($result0)) {
$test_id=$row0['id'];
$test_name=$row0['test_name'];
echo " <table width=600px>";
echo " <tr>";
echo " <td width=30px><input name='question[$test_id][]' type='checkbox' value='1' /></td>";
echo " <td width=580px align=left>$test_name</td>";
echo " </tr>";
echo " </table>";
}
echo "</P>";
echo "<input type='button' name='Check_All' value='Check All' onClick='CheckAll(document.myform.check_list)'>";
echo "<input type='button' name='Un_CheckAll' value='Uncheck All' onClick='UnCheckAll(document.myform.check_list)'>";
echo "</form>";
if you don't know javascript, i'd strongly recommend you investigate jquery - a library which eliminates cross browser issues and makes a huge amount of javascript far easier.
simply include this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
and your code
<input type='button' name='Check_All' value='Check All' onClick='$(":checkbox").attr("checked",true);'>
untested, but should be okay.
I'd highly recommend using jQuery, it allows you to focus on the logic and not worry about cross browser issues you might run into.
<script src='http://code.jquery.com/jquery-1.6.3.min.js' type='text/javascript'></script>
<script>
$(document).ready(function () {
//check all
$('input[name="Check_All"]').click(function () {
//for all checkboxes where the name begins with "question", check them
$('input[name^="question"]').attr('checked', true);
});
//uncheck all
$('input[name="Un_CheckAll"]').click(function () {
//for all checkboxes where the name begins with "question", uncheck them
$('input[name^="question"]').attr('checked', false);
});
});
</script>
Here's the breakdown...
Select all buttons on the page where the name attribute is set to Check_all
$('input[name="Check_All"]')
When the found item(s) are clicked, execute the code in the function that is passed
$('input[name="Check_All"]').click(function () {
//javascript code here
});
for all checkboxes where the name begins with "question", check them
$('input[name^="question"]').attr('checked', true);
Change this:
<td width=30px><input name='question[$test_id][]' type='checkbox' value='1' /></td>";
to this:
<td width=30px><input name='check_list[]' type='checkbox' value='1' /></td>";
I can't submit the form with dynamic id. Below is my code.
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
var fval;
var cvalue = "<?php echo $_POST['currentval']; ?>";
if(!(cvalue)) cvalue=0;
$(document).ready(function() {
$('#upload'+cvalue).submit(function() {
var options = {
target: '#message',
url:'process.php?sval='+cvalue,
success: function() {
alert("success");
$('#uploader').html('');
}
};
$(this).ajaxSubmit(options);
return false;
});
});
</script>
<div id="message"></div>
<?php
for($i=0;$i<5;$i++) {
echo "<form action='#' method='post' name='upload' id='upload$i' enctype='multipart/form-data'>";
echo "<input type='hidden' name='svalhid' id='svalhid' value='$i'>";
echo "<input type='file' id='fl$i' name='filename".$i."up'>";
echo "<input type='hidden' name='currentval' id='currentval' value='$i'>";
echo "<input type='submit' name='uploads$i' value='Ok'><br>";
echo '</form>';
}
?>
In this line, $('#upload'+cvalue).submit(function() {
I can't get the cvalue. I can't identify what's wrong with this code. Anybody please help me.
Check follow line
echo "<form action='#' method='post' name='upload' id='upload$i' enctype='multipart/form-data'>";
Are you really sure that you printed out a correct value for the id attribute?
I think it exists two better ways:
1st (the best way in my eyes):
<?php
for($i=0;$i<5;$i++) {
?>
<form action='#' method='post' name='upload' id='upload<?php echo $i ?>' enctype='multipart/form-data'>";
<input type='hidden' name='svalhid' id='svalhid' value='<?php echo $i ?>'>"
<input type='file' id='fl<?php echo $i ?>' name='filename<?php echo $i ?>up'>";
<input type='hidden' name='currentval' id='currentval' value='<?php echo$i ?>'>"
<input type='submit' name='uploads<?php echo $i ?>' value='Ok'><br>"
</form>'
<?php
}
?>
2nd: Change the mentioned line to following:
echo "<form action='#' method='post' name='upload".$i."' id='upload".$i."' enctype='multipart/form-data'>";
Note: You defined a couple of forms with the same name. As far as I know, the attribute 'name' is the main attribute for forms, not the 'id' attribute.
I don't see where you assign anything besides "" or 0 to cvalue. Also, those two assignments are outside of $(document).ready(function() { so there could be something weird going on with that code executing before your document has fully loaded. Move them inside of the document.ready call and see what happens.
Try using
var cvalue = "<?php echo $_GET['currentval']; ?>";
or
var cvalue = "<?php echo $_REQUEST['currentval']; ?>";
Also try what #reporter said about the form id: id='upload".$i."
The form id should be the same as the one referenced here:
$('#upload'+cvalue).submit(function() {
Example:
in javascript:
$('#upload').submit(function() {
then form should be:
<form id="#upload" ...
You should definitely see something happen.
Try installing firebug and use console.log(variablehere) instead of alert(variablehere). It's more cleaner.
Hope that helps