Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: POST data not sent to page using ajaxpage

  1. #1
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Question POST data not sent to page using ajaxpage

    1) Script Title:
    Dynamic Ajax Content

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...jaxcontent.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

    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>
    Last edited by dragon_sa; 02-29-2012 at 01:30 PM. Reason: issue discovered

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Default

    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...

    Code:
    <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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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):

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dragon_sa (02-29-2012)

  6. #5
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Default

    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.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dragon_sa (02-29-2012)

  9. #7
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Default

    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

    Code:
    $('#mchange,#pchange').live('submit', function(e){
    or do I have a separate instance of the same function underneath in the script

  10. #8
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Default issue with file upload

    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.

    Code:
    <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)

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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

    Code:
    $('form').live('submit', function( . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #10
    Join Date
    Apr 2008
    Posts
    28
    Thanks
    8
    Thanked 1 Time in 1 Post

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •