Needing to Pass Post Data to new page after Redirect (using iFrames)

Question

I am in somewhat of a sticky situation now because my client insists on keeping the iframe functionality and now wants a page, after submitting information, to review and look over said information before submitting, if it's not right, go back and re-submit changes.

Basically, before you get confused I just want to use the form's action and post method using a button OUTSIDE the iframe....

I am using Codiqa's buttons outside the iframe to target the inner frame's js functions, so when I call this review function it redirects to the page, however, the new page does not display the information I have seemingly passed along to it via Ajax. Can someone please tell me why it isn't working? The HTML and all is irrelevant because I am simply passing input IDs and to the ajax data (eID collects and iterates through the html input IDs), this is strictly a need for a special JS function I might be missing. When Codiqa button is pressed, it is calling the "reviewdata()" function in the JS:

JS

//UPLOAD DATA
//Global variables
var extractform = {
    'cable_no' : "",
    'section_no' : "",
    'extract_ft' : "",
    'cable_status' : "",
    'conduit_status' : "",
    'extract_date' : "",
    'extraction_team' : ""
}

function reviewdata() { 

//Read all of the data from the page
for (eID in extractform) {
    extractform[eID] = document.getElementById(eID).value;
}
        review_extractform();
}
function review_extractform() {
$.ajax({
    type: 'POST',
    url: './php/review.php',
    data: extractform,
    async: false,
    dataType: 'text',
    success: function() {
    },
    complete: function() {
        window.location.assign("./extraction/php/review.php?");
    }
});
};

THEN THE AJAX PASSES TO THIS PAGE WHICH IS THE REDIRECT PAGE

PHP

//Assign passed parameters
$cable_no = $_POST['cable_no'];
$section_no = $_POST['section_no'];
$extract_ft = $_POST['extract_ft'];
$cable_status = $_POST['cable_status'];
$conduit_status = $_POST['conduit_status'];
$extract_date = $_POST['extract_date'];
$extraction_team = $_POST['extraction_team'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Sample Title</title>
</head>

<body>
<table align="center" width="100%">
    <tr>
        <th>Cable Type</th>
        <th>Section Number</th>
        <th>Extracted Footage</th>
        <th>Cable Status</th>
        <th>Conduit Status</th>
        <th>Extract Date</th>
        <th>Extraction Team</th>
    </tr>
    <tr style="text-align:center;">
        <td><?php echo $cable_no; ?></td>
        <td><?php echo $section_no; ?></td>
        <td><?php echo $extract_ft; ?></td>
        <td><?php echo $cable_status; ?></td>
        <td><?php echo $conduit_status; ?></td>
        <td><?php echo $extract_date; ?></td>
        <td><?php echo $extraction_team; ?></td>
    </tr>
</table>
</body>
</html>

lda155 · Answer 1 · 2013-04-19T21:44:54.903

Im not certain on the AJAX aspect, nor am i certain what you are trying to do.

On the second code section you are creating new php variables $cable_no = $_POST['cable_no']; that should work for assigning values, if the post is coming from the previous page by the form action.

I always name each field of the form with the same name and id (I've forgotten which one it uses) i.e:

Name: <input type="text" name="name" id="name">

If you need the values saved even for different pages and refreshes you might want to use a cookie or session(cookie) a cookie stores information on the users machine and a session cookie uses a token and stores the data on the server. (I think it also has a default time of 90 minutes for a session cookie).

Also you might want to post your actual form page. It might help resolve the problem. I don't have the necessary knowledge for the JSON bit or combining jquery(ajax) with php.

Added note: You should also start transitioning to HTML5 using the HTML5 doctype <!DOCTYPE html> (which is much simpler to remember)

Thanks for the tips. I would normally have used a form submit, issue is I can't find a way to target the iframe's submit button for the form with a button outside the iFrame... Is there a way to target the form submit within the iframe? Because the form action and post method are unacessible as far as I know from the parent window's button. — jflay, Apr 20 '13 at 14:46

Bradmage · Answer 2 · 2013-04-23T05:56:45.673

1

I'm sure this would be a faster solution to using ajax. Just change your $_POST to $_GET

function review_extractform() {
    var url = "./extraction/php/review.php?";
    //var queryString = extractform.join();
    var queryString = $('iframe_id').serialize();
    document.getElementId('iframe_id').src = url  + queryString;
}

Edit: added .serialize()

edited Apr 23 '13 at 05:56

answered Apr 20 '13 at 06:00

Bradmage

1,233
1
15
41

that is not loading the iframe to the review.php though – jflay Apr 22 '13 at 15:35
That code will load review.php into an iFrame. You just need to change 'iframe_id' to the id of your iFrame. – Bradmage Apr 23 '13 at 05:58
@jflay Is there any reason you are using javascript, and not
– Bradmage Apr 23 '13 at 05:59
The reason is because, as I've said above, I have a button outside the iframe that I am using to target the iframe's JS functions, but I cannot find a way to use this outside button to use the post/action attributes in the form HTML (which exists in the iframe). So I am forced to try and workaround this using javascript to act as the post and action. I agree, I want to use the form attributes, but the way the client has things designed I am using iframes... sigh – jflay Apr 25 '13 at 16:58
1

@jflay Yeah those restrictions suck. It sounds like you need something like `document.getElementById('targetFrame').contentWindow.targetFunction();` to call the javascript located inside the iframe. [reference](http://stackoverflow.com/questions/251420/invoking-javascript-in-iframe-from-parent-page) – Bradmage Apr 26 '13 at 04:24
Bradley, I actually am already doing that, what I am trying to ask is is there javascript that, like the above code you just provided, can target the form submit button? So instead of targeting the iframe function, can I target the form's submit button within the iframe from outside the iframe, so that I can tap into the form's action/post (which is inside the iframe)? – jflay Apr 29 '13 at 16:26
If I'm understanding the problem now, it has been answered [here](http://stackoverflow.com/a/14667249/1246494) – Bradmage Apr 30 '13 at 04:19

Needing to Pass Post Data to new page after Redirect (using iFrames)

2 Answers2