如何將數據從一種形式發佈到另一種形式iFrame形式

Question

我在這裏要做的就是採用一種形式的表單輸入並將其提交給鏈接到iFrame的另一種形式。這樣做的目的是，訪客可以預覽他在iframe中選擇了哪輛車，如果快樂按下保存一個表單並完成。

我覺得我幾乎接近，但我不知道如何將數據從表單一發送到iFrame文章，並找不到任何答案關於如何做到這一點。我有一個單一形式的版本如下工作，但在從一個表格中的數據不能拉提交的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

這是一種骯髒的，但如果你需要做的是在一個iFrame，它作品。您的預覽框當前只是一個表單元素，並且您基本上在其中附加了查詢字符串文本。如果您想實際將其發送到iframe本身，則需要解析輸入並將其提交到目標iFrame中的預覽頁面。你可以使用靜態命名輸入，如果你知道它們總是存在的話，或者如果會有額外的輸入，你不能預測，你可以讓JS動態地生成隱藏的輸入元素。

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

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