如何将数据从一种形式发布到另一种iFrame形式

Question

All I am looking to do here is take the form inputs of one form and submit it to another form linked to an iFrame. Purpose of this is that the visitor can preview what car he has selected in the iframe, if happy press save one form one and done.

I feel like I'm almost close, but I can't figure how to send the data from form one to the iFrame post and can't find any answers on how to do this. I got a single form version working as below, but can't pull in the data from form one to submit to iFrame

<form action="/save.php" method="post" id="save">

  <input type="text" name="firstname">
  <input type="text" name="carname">
  <input type="text" name="cartype">

  <button type="submit" name="save">Save</button>      
</form>



<form action="/preview.php"  target="iframe" method="post" id="iframebox">

  <button id="preview" type="submit" name="reload" value="post">Reload</button>   

</form>

<iframe name="iframe" src="/preview.php" ></iframe>


            $('#preview').click(function(e){
                e.preventDefault();
                var d = $("#save").serialize();
                $('#iframebox').append(d);
                $('#iframebox').submit();
            });

Answer 1

This is kind of dirty, but if you need to do it in an iFrame, it works. Your preview box currently was just a form element and you were appending query string text inside of it essentially. If you want to actually send it to the iframe itself, you need to parse the inputs and have it submit to the preview page that is in the targeted iFrame. You can either use static named inputs if you know that they will always exist, or if there are going to be additional inputs that you cannot predict, you can have the JS generate hidden input elements on the fly.

In form.php

<form action="save.php" method="post" id="save">

    <input type="text" name="firstname" placeholder="firstname">
    <input type="text" name="carname" placeholder="carname">
    <input type="text" name="cartype" placeholder="cartype">

    <button type="submit" name="save">
        Save
    </button>
    <button id="preview">
        Preview
    </button>
</form>

<form action="preview.php"  target="iframe" method="post" id="iframebox">
    <input type="hidden" name="firstname">
    <input type="hidden" name="carname">
    <input type="hidden" name="cartype">
</form>

<iframe name="iframe" src="preview.php" ></iframe>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $('#preview').click(function(e) {
        e.preventDefault();
        $("#save input").each(function(index, value){
            $('#iframebox input[name="' + value.name + '"]').val(value.value);
        });
        $('#iframebox').submit();
        return false;
    });
</script>

In preview.php

    <ul>
        <li>
            First Name : <?php echo $_POST['firstname'] ? : "N/A"; ?>
        </li>
        <li>
            Car Name : <?php echo $_POST['carname'] ? : "N/A"; ?>
        </li>
        <li>
            Car Type : <?php echo $_POST['cartype'] ? : "N/A"; ?>
        </li>
    </ul>