Input text and image upload in ajax

Greetings!

I have here snippets that upload image. Upload is successful, and what I want to do now is to send Id so that I can save it in my db.



<?php $id = $_GET['id'];?>

<script>
$(function(){
		var btnUpload=$('#me');\\
		var mestatus=$('#mestatus');
		var files=$('#files');
		new AjaxUpload(btnUpload, {
			action: 'stud_image_act.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
					mestatus.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				mestatus.html('<img src="../images/ajax-loader.gif" height="16" width="16">');
			},
			onComplete: function(file, response){
				//On completion clear the status
				mestatus.text('Photo Uploaded Sucessfully!');
				//On completion clear the status
				files.html('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="../upload/student_'+file+'" alt="" height="120" width="130" /><br />').addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text(file).addClass('error');
				}
			}
		});
		
	});
	</script>


My question is, Is there any place in my code to send the value of my $id above?

I’m confused. It sounds like you’re trying to send a value from JavaScript to PHP, but the only id I saw in your code was already in PHP.

Do you have a value in your JavaScript that you want to save to a database? That’s relatively simple, especially with jQuery (which you seem to be using):


// something.php handles the actual "saving to a database" part
$.post('something.php', 'id=' + id);

thank you for your response. Here is my php code, I managed already the image to put it in a folder, what I want now is to put it in my database, the problem is I don’t know how to send such value to in js.

Here is my html.


<div id="image">
			<div id="flash"></div>
			<div id="ajaxresult"></div>
    				<div id="files"><li class="success"><img src  ='../images/untitled.png'></li></div>
					<div id="me" class="styleall" style=" cursor:pointer;">
						<span style="  font-family:Verdana, Geneva, sans-serif; font-size:10px;">
						<span><input type = 'hidden' name = 'ID' id='ID' value = '<?php echo $id;?>'> </span>
							<span style="cursor:pointer;" >Select image</span>
						</span>
					</div>
					<br/>
					<span id="mestatus" > </span>
					
		</div>

And here is my stud_image_act.php


echo $id = $_GET['ID'];
	
$uploaddir = '../upload/';
$file = $uploaddir ."student_".basename($_FILES['uploadfile']['name']);
$file_name= "student_".$_FILES['uploadfile']['name'];

if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file))
	{
	mysql_query("UPDATE tbl_student
				    SET stud_Image= '$file_name'
				  WHERE id = '$id'"	) or die (mysql_error());
	echo "success";
	} else {
	echo "error";
	
}

I want to send the value set in my hidden text.

see that I have the value of my Id in js and html page. I only need how to send the ID value to save it in my database in stud_image_act.php.

That’s even easier… I think. All you need to do is:

  1. Get the element. It appears to have an id of “ID”, so this should be pretty easy.
  2. Get its value. Also no big deal with jQuery.
  3. Send the value to your PHP page with AJAX. The code you’ll want to use isn’t very different from what I posted earlier, just simpler:


    javascript $.get('stud_image_act.php?ID=' + yourId);

can I put that any part of my javascript?

For the most part. Go ahead and try it, and if it still gives you trouble, come back and ask for more help!

I put your suggestion after onComplete: I presume to send the value first before it will display the success message but my function now isn’t working.

What if you put it at the end of the onSubmit function?

If that doesn’t work, can you tell more about the AjaxUpload function? Did you find it somewhere? Did you write it yourself?

still no work. I forgot the source, I just copied it. I posted my entire file, html/javascript and php…
I’m have also my external js script
Ajaxfileupload-jquery-1.3.2.js and ajaxupload.3.5.js, I think they all worked well. I really need your help.

Try this snippit:


$.get('stud_image_act.php?ID=' + $('#ID').val());

Put it before the “new AjaxUpload” part, not in any of the functions. (I think I found the source of your AjaxUpload, and I’m pretty sure it’s a red herring…)

And if that doesn’t work, then can you link to a live example?

I just followed the suggestion, It works now but still I can’t get the value of my ID.


$(function(){
		var btnUpload=$('#me');
		var mestatus=$('#mestatus');
		var files=$('#files');
		$.get('stud_image_act.php?ID=' + $('#ID').val());
		new AjaxUpload(btnUpload, {
			action: 'stud_image_act.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
					mestatus.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				mestatus.html('<img src="../images/ajax-loader.gif" height="16" width="16">');
			},
			onComplete: function(file, response){
				//On completion clear the status
				mestatus.text('Photo Uploaded Sucessfully!');
				//On completion clear the status
				files.html('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files').html('<img src="../upload/student_'+file+'" alt="" height="120" width="130" /><br />').addClass('success');
				} else{
					$('<li></li>').appendTo('#files').text(file).addClass('error');
				}
			}
		});
		
	});

As much as I want it, I don’t have access to view it live. I’m not capable to do it. Do you have other suggestion?

What does this mean? Is it failing when your JavaScript tries $(‘#ID’).val(), or is it failing when your PHP on stud_image_act.php tries to access $_GET[‘ID’]?

I tried the previous suggestion, every time I put this $.get(‘stud_image_act.php?ID=’ + yourId); inside my function, my js fail. Now I tried your recent suggestion, my js works but it missed to send the value of my id. I used echo $_GET[‘ID’] to fetch and show it’s value in stud_image_act.php but it shows nothing.

Can you confirm that the ID is actually being written into the hidden input? Using Firefox’s Firebug, Chrome’s Web Inspector, or IE’s Developer Tools?

I attached files to see what I did. Am I doing right? what does it mean? the ID is the actual number I want to get.

I meant inspect the DOM element to make sure that the value is being set correctly. This is what it would like in Chrome:

I can’t see your attachment. Can you attach it again or you may send it clarosantiago2011@gmail.com

I have installed Firefox webdeveloper DOM inspector and here’s what I’ve got. Am I near?

Not sure if you were ever able to see it, but in case you didn’t, I uploaded my attachment to imgur.

However, it looks like you’re on the right track with that DOM inspector. Just find your hidden <input> in the body, and verify that it actually has the value that you tried to set.

Off Topic:

Here’s why we’re doing all this: You’re trying to (a) set the value of a hidden <input> with PHP, (b) grab that input’s value with JavaScript, and (c) send it to another page in an AJAX request, where it can (d) be processed.

As you already posted, (d) seems to be working fine. There aren’t a whole lot of moving parts in (b) or (c); we’re letting jQuery take care of them for us. That just leaves (a)…