Form target to be the iframes PARENT

Question

I have a form that is inside of an iframe and I need to make sure that form submits to the parent of the iframe. Target="_top" and target="_parent" isn't working and I am starting to get a little bit aggravated with myself.

If anyone can point me in the right direction that'd be awesome. :)

I have a normal iframe with the src to an html page - that html page goes has this...

<form action="#" method="post" target="_parent" >
  <table id="Table_01" width="308" height="411" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="6">
            <img src="index_01.png" width="308" height="163" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">
            <img src="index_02.png" width="112" height="142" alt=""></td>
        <td colspan="3" style="background-image: url('optin_name.png');" width="189" height="40" alt="">
         <input type="text" name="name" style="background: transparent;border:0px;font-size:25px;width:185px;height:37px">
        </td>
        <td rowspan="6">
            <img src="index_04.png" width="7" height="247" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="index_05.png" width="189" height="33" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" style="background-image: url('optin_email.png');" width="188" height="40" alt="">
            <input type="text" name="email" style="background: transparent;font-size:25px;border:0px;width:185px;height:37px;">
        </td>
        <td rowspan="4">
            <img src="index_07.png" width="1" height="174" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="index_08.png" width="188" height="29" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="index_09.png" width="73" height="105" alt=""></td>
        <td colspan="2" style="background-image: url('optin_submit.png');" width="174" height="54" alt="">
            <input type="submit" name="submit" value="                 " style="background: transparent;border:0px;width:170px;height:50px;">
        </td>
        <td rowspan="2">
            <img src="index_11.png" width="53" height="105" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="index_12.png" width="174" height="51" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="spacer.gif" width="73" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="39" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="135" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="53" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="spacer.gif" width="7" height="1" alt=""></td>
    </tr>
</table>
</form>

I cannot get it to post to the iframes parent windows opposed to in a new windows and/or inside the iframe itself, both are no no's.

Answer 1

Your action attribute in the form seems to be a problem. Which URL do you want to post your data to? Try replace the # in the action attribute with the target URL.

Answer 2

1. prevent default submit behaviour
2. using window.parent to access the parent
3. let the parent to post the form value of the one in iframe

How to do a Jquery Callback after form submit?

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});