POST data not sent to page using ajaxpage

[dragon_sa]

1) Script Title:
Dynamic Ajax Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:
I am now using the script in a form to post data back to the same page in a div tag and process my form data with the php. When I click submit the page reloads fine but it does not send the form POST data to the page and therefore does not process the form inputs, if i remove the ajaxpage call and submit the page it all works fine, how can I send my input post data back to the page using the ajaxpage call?

Here is the code



<?php
session_start();
// include definitions
require_once('../scripts/defs.php');
// set time variable for form processing protection
$current=time();
// define index site link
$site=LINKPRE."index.html";
// check for admin user
if ($_SESSION['type'] != 'admin') {
header("Location: $site");
}
// check for get page variable
if (!isset($_GET['page']) || (!in_array($_GET['page'], array('home', 'profile', 'contact', 'suppliers')))) {
header("Location: $site");
} else {
$page=$_GET['page'];
$pageSET=$_GET['page'].".inc";
}
// check for time session variable
// if (!isset($_SESSION['timenode']) || ($_SESSION['timenode'] != $_POST['setTime'])) {
// check for and process mouseForm submit
if (isset($_POST['mchange']) && isset($_POST['mouse']) && $_POST['mouse'] != '') {
$mouseSET=$_POST['mouse'];
$file=IMGINC.$pageSET;
$data=file($file);
// build new file
$rebuild=$data[0];
$rebuild.=$mouseSET;
$rebuild.=$data[2];
// write new file
$new=fopen($file,"w");
fwrite($new,$rebuild);
fclose($new);
// set time check session
$_SESSION['timenode']=$_POST['setTime'];
}
// check for and process mouseForm submit
// }
// Get home image date
$file=IMGINC.$pageSET;
$data=file($file);
// load image data for preview
$img=LINKPRE.IMG.$data[0];
$alt=$data[1];
// print options menu and info
?>
<link href="admin.css" rel="stylesheet" type="text/css" />
<div id="bgIMGhead">
<div id="bgIMGtext"><b>Current Image For <?php echo ucfirst($page).$_SESSION['timenode'].$_POST['mouse']; ?> Page</b><div id="bgIMGname"><b>Filename:</b> <?php echo $data[0]; ?></div>
<div id="bgIMGmouse">
<form method="POST" action="javascript:ajaxpage('bgIMG.php?page=<?php echo $page; ?>', 'rightContent');" name="mouseForm">
<input name="mouse" type="text" size="60" value="<?php echo $data[1]; ?>" />
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="submit" name="mchange" value="Change Text" />
&nbsp;&nbsp;<b>( Changes Mouse Over Text )</b>
</form>
</div>
</div>
<div id="bgIMGswap">
<form method="POST" action="javascript:ajaxpage('bgIMG.php?page=<?php echo $page; ?>', 'rightContent');" name="change" enctype="multipart/form-data">
<input name="image_file" type="file" size="60" id="image_file" accept="image/jpeg" />&nbsp;&nbsp;
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="submit" name="pchange" value="Change Image" />
</form>
</div>
</div>
<div id="showIMG"><img src="<?php echo $img; ?>" alt="<?php echo $alt; ?>" title="<?php echo $alt; ?>" width="776px" border="0px"></div>

[jscheuer1]

That AJAX script doesn't send post data, it's an AJAX get script.

What do you mean by:


When I click submit the page reloads fine

If you are truly submitting the form, and the page is truly reloading and it's both the page listed as the action attribute of the form and the page which interprets the form's data, it should be fine.

If however you are submitting via AJAX in the hope that the page will update without reloading, you need a script that can send a POST request.

If I could see your page, that would be much better than you trying to explain it further.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[dragon_sa]

Ok I have changed the method to jquery for sending the variables based on some more searching and finding a response to a post by jscheuer1, a very helpful moderator :)

I am using this now to send the form with jquery-1-7.min.js and it is mostly working now. BUT...



<form action="#" onsubmit="$.ajax({url:'bgIMG.php?page=<?php echo $page; ?>', data: $(this).serialize(), cache: false, type: 'post', success: function(data){$('#rightContent').html(data);}});return false;" name="mouseForm">
<input name="mouse" type="text" size="60" value="<?php echo $data[1]; ?>" />
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="submit" name="mchange" value="Change Text" />
&nbsp;&nbsp;<b>( Changes Mouse Over Text )</b>
</form>


But it does not send the post name of the submit button so when i check if $_POST['mchange'] is set it does not exist, is there a reason for this and is it possible to send that POST variable of the submit(type) input as well?

[jscheuer1]

At least three choices only do one of the following three (added/changed lines highlighted):


<form action="#" onsubmit="$.ajax({url:'bgIMG.php?page=<?php echo $page; ?>', data: $(this).serialize(), cache: false, type: 'post', success: function(data){$('#rightContent').html(data);}});return false;" name="mouseForm">
<input name="mouse" type="text" size="60" value="<?php echo $data[1]; ?>" />
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="hidden" name="mchange" value="Change Text" />
<input type="submit" value="Change Text" />
&nbsp;&nbsp;<b>( Changes Mouse Over Text )</b>
</form>

Or (this one you gotta scroll to see the highlighted addition):


<form action="#" onsubmit="$.ajax({url:'bgIMG.php?page=<?php echo $page; ?>', data: $(this).serialize() + '&mchange=' + this.elements.mchange.value, cache: false, type: 'post', success: function(data){$('#rightContent').html(data);}});return false;" name="mouseForm">
<input name="mouse" type="text" size="60" value="<?php echo $data[1]; ?>" />
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="submit" name="mchange" value="Change Text" />
&nbsp;&nbsp;<b>( Changes Mouse Over Text )</b>
</form>

Or - Just forget about (remove) the requirement on bgIMG.php for that value. This last is easiest and best unless that value actually helps bgIMG.php process the request.

[dragon_sa]

Thanks John, I will use the hidden field option, its only because I will have a couple of forms on the page and I use it to determine which form I am processing in the script.

[jscheuer1]

Great. BTW, for ease on the eye especially when editing or using it as a template as to how to treat other forms, you can do like:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#mchange').live('submit', function(e){
$.ajax({
url:'bgIMG.php?page=<?php echo $page; ?>',
data: $(this).serialize(),
cache: false,
type: 'post',
success: function(data){
$('#rightContent').html(data);
}
});
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="mchange" action="#">
<input name="mouse" type="text" size="60" value="<?php echo $data[1]; ?>" />
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="hidden" name="mchange" value="Change Text" />
<input type="submit" value="Change Text" /> &nbsp;&nbsp;<b>( Changes Mouse Over Text )</b>
</form>
<div id="rightContent"></div>
</body>
</html>

[dragon_sa]

I have 2 forms on the page 1 is called mchange as shown here the other is called pchange.

With that script do I just use it like this


$('#mchange,#pchange').live('submit', function(e){

or do I have a separate instance of the same function underneath in the script

[dragon_sa]

I have now discovered that this doesnt work with image file upload, is this still possible, I have checked for the $file variables and they dont pass across, here is the form for the image upload.



<form action="#" onsubmit="$.ajax({url:'bgIMG.php?page=<?php echo $page; ?>', data: $(this).serialize(), cache: false, type: 'post', success: function(data){$('#rightContent').html(data);}});return false;" name="change" enctype="multipart/form-data">
<input type="file" name="image_file" size="60" id="image_file" accept="image/jpeg" />&nbsp;&nbsp;
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="hidden" name="pchange" value="1" />
<input type="submit" value="Change Image" />
</form>


what do I need to change so it possible to upload the file, the other 2 variables(pchange, setTime) do pass across just not the file(image_file)

[jscheuer1]

If you want them both to receive the same treatment when submitted, yes.

In fact, if they are the only 2 forms on the page, and they're hard coded on the page, something like:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('form').submit(function(e){
$.ajax({
url:'bgIMG.php?page=<?php echo $page; ?>',
data: $(this).serialize(),
cache: false,
type: 'post',
success: function(data){
$('#rightContent').html(data);
}
});
e.preventDefault();
});
});
</script>
</head>
<body>
<form action="#">
<input name="image" type="text" size="60" value="<?php echo $data[0]; ?>" />
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="hidden" name="pchange" value="Change Image" />
<input type="submit" value="Change Image" /> &nbsp;&nbsp;<b>( Changes Image )</b>
</form>
<form action="#">
<input name="mouse" type="text" size="60" value="<?php echo $data[1]; ?>" />
<input type="hidden" name="setTime" value="<?php echo $current; ?>" />
<input type="hidden" name="mchange" value="Change Text" />
<input type="submit" value="Change Text" /> &nbsp;&nbsp;<b>( Changes Mouse Over Text )</b>
</form>
<div id="rightContent"></div>
</body>
</html>

No id's required because the form tag itself may be used as the selector.

I thought the forms themselves were also being imported via AJAX. If they are you still need the .live() syntax


$('form').live('submit', function( . . .

[dragon_sa]

Hi John

regarding the two forms you have there, the image one would need to be type "file" not type "text" to enable file selection for upload, also dont I need to have in the file upload form tag enctype="multipart/form-data" so it can post the file to be processed?

I am going to attach the files so you can see what I am actually doing, I dont have the processing for the image included in the file yet I have just been testing for the presence of it first before I add the actual php processing to that.

Thank you again for your help

[jscheuer1]

I thought the file might be changed from a select or entered from a list of files already on the server.

If you're going to have the user upload a file then you will need to use something else. Google:

jquery ajax file upload plugin

for some options.

To put it bluntly though, I'm not all that familiar with doing this via AJAX either with or without jQuery. I helped one person use one of those (from the above results) and it worked out, but they had already taken a stab at it. I only helped them overcome a syntax error or something like that.

You could instead choose to do that part via ordinary PHP - in an iframe.