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);
}
}
Related
I have Jquery code that can create multiple text boxes .Now, i want to submit my text boxes' values so that i could get them using PHP on next page.I want to submit text box in the same way as ( )
and on the second page,i could get values using POST method.How can i i post multiple text values in this case and how can i retrieve them on the next page using php?? Plz help as i am a new bee.
CODE:
<head>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--; $("#TextBoxDiv" + counter).remove(); });
$("#getButtonValue").click(function ()
{
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
Try to giving name for text boxes as array
e.g. input type='textbox' name='textbox[]' id='textbox1'
and access it on PHP page as array
$arrayRequest = $_REQUEST['textbox'];
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.
How can I submit this form with ajax.
Right now it creates a table from mysql query. When you click the Edit button behind a row, Javascript makes all the cells to input=text.
Now when you click the Submit button at the end of the line I would like it to submit edited data to mysql via ajax.
I don't understand where do I get the data that I need to POST with ajax.
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".edit").click(function(){
var tr = $(this).closest("tr");
var submit = "<input type='submit' name='Submit' value='Submit' />";
tr.find(".td").each(function(){
var name = $(this).attr("title");
var value = $(this).html();
var input = "<input type='text' name='"+name+"' value='"+value+"' />";
$(this).html(input);
});
tr.find(".button").html(submit);
});
});
// this is the id of the submit button
$(".button").click(function() {
$.ajax({
type: "POST",
url: "index.php?page=update_mysql",
data: $("#change").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
<form id="change" method="post" action="#">
<table>
<?PHP
$sql="SELECT * FROM names";
$result = mysql_query($sql)or die(mysql_error());
WHILE ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '<tr class="row">';
echo '<td class="td" title="id">'.$row["id"].'</td>';
echo '<td class="td" title="first_name">'.$row["first_name"].'</td>';
echo '<td class="td" title="last_name">'.$row["last_name"].'</td>';
echo '<td class="button" title="button"><button class="edit">Edit</button></td>';
echo '</tr>';
}
?>
</table>
</form>
And update_mysql.php looks like this:
<?php
include 'firewall.php';
if ($_POST['Submit'] == "Submit") {
$id = $_POST['id'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$sql_edit = "UPDATE names SET first_name = '$first_name', last_name = '$last_name' WHERE id = '$id'";
$result_edit = mysql_query($sql_edit) or die(mysql_error());
}
?>
Try this.
$(document).ready(function(){
$(".edit").click(function(){
var tr = $(this).closest("tr");
tr.find(".td").each(function(){
var name = $(this).attr("title");
var value = $(this).html();
var input = "<input type='text' name='"+name+"' value='"+value+"' />";
$(this).html(input);
});
var submit = "<input type='button' name='Submit' value='Submit' />";
tr.find(".button").html(submit);
});
});
$(".button input[type=button]").live('click', function() {
var data = $('form#change').serialize();
// post data using ajax
$.ajax({
type: "POST",
url: "index.php?page=update_mysql",
data: data,
success: function(data) {
alert(data); // show response from the php script.
}
});
});
NOTE: I have changed the "type" attribute of submit button to "type='button'". That will not fire default submit of browser. The same button is bound to collect form data and submit using ajax.
Happy Coding.
EDIT:
It takes you to "index.php?page=my_page#" coz form is submitted whey you click the <input type="submit">. Haven't you changed it to <input type="button"> yet? You don't need a submit button when its not there to submit the form. There are other non-submit button to bind javascript handlers to.
You can use jquery.serialize():
var data = $('form').serialize();
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 have a comments section on my websites that uses jQuery to animate comments in without reloading the page, as well as deleting comments.
Right now, I have it so when you write a comment, it sends it to a external JS, then to a php file where it processes. If it was successful, it will append the comment into the comment section. My delete action: jQuery deletes my the comment ID in the mysql database.
So my issue is I want to add a delete button via jQuery and somehow call back to the javascript file and tell it the id so the delete button knows the ID to put in the form so the delete file knows what to delete?
Here's my add_comment script:
$(function() {
$(".commentbutton").click(function() {
$.ajax({
type: "POST",
url: "http://myflashpics.com/process_addcomment.php",
data: $("#commentform").serialize(),
success: function() {
var theComment = $("#commentsss").val();
var theUserId = $("#user_id_two").val();
var thePhotoId = $("#photo_id").val();
var theProfilePicture = $("#user_profile_picture").val();
var theUsername = $("#user_username").val();
// Get new HTML data
var html = "<div class='comment_odd'><img src='" + theProfilePicture + "' class='comment_thumbnail'/><div class='comment_username'>" + theUsername + "</div><div class='comment_text'>" + theComment + "</div></div>";
// Append, then fade in
$(html).hide().appendTo(thecommentsdisplay).fadeIn(500);
}
});
return false;
});
});
Thanks in advance!Coulton
EDIT 1:
Here's my comments form (just to clarify):
user_id_two (the user's ID)
commentsss (comments field)
photo_id (the id of the photo being commented on)
user_profile_picture (profile to display on the user's profile picture in the banner)
user_username (username of the user commenting)
Here's also my delete button form:
<form method='post' action='' name='deleteform' id='deleteform'>
<input type='hidden' name='userid' value='<?php echo "$userid_session"; ?>' />
<input type='hidden' name='userpass' value='<?php echo "$password_session"; ?>' />
<input type='hidden' name='pictureid' id='pictureid' value='<?php echo "$picture_id"; ?>' />
<input type='hidden' name='profilepictureid' id='profilepictureid' value='<?php echo "$user_profile_picture_id"; ?>' />
</form>
And lastly my DELETE COMMENT jQuery:
$(function() {
$(".commentdeletebutton").click(function() {
var className = $(this).attr('class');
var theID = className.replace(/delete_button commentdeletebutton delete_(\d+)/, "$1");
commentDone = "#comment_" + theID;
formDone = "#commentdeleteform_" + theID;
$.ajax({
type: "POST",
url: "http://myflashpics.com/process_deletecomment.php",
data: $(formDone).serialize(),
success: function() {
$(commentDone).hide();
}
});
return false;
});
});
If you add an link for deleting, you can insert the complete url for deleting in the href, i.e. http://myflashpics.com/process_removecomment.php?id=xx.
So, you can bind a click event to that link and get the right url using $(this).attr('href') and doing the delete using ajax.
Edited for a more complete sample:
<? [[Loop your recordset]] { ?>
<div class="comment">
Delete
<div class="comment">
[[Comment content...]]
</div>
</div>
<? } ?>
<script>
$(function() {
$(".commentdeletebutton").click(function() {
$this = $(this);
$.ajax({
url: $this.attr('href'),
success: function(data) {
$this.parent().slideUp('fast', function() {
$this.parent().remove();
});
}
});
return false;
});
});
</script>