Sending via POST differentiated mode

Question

Hello, I am with the following problem, I am using the payment method of the pagseguro, so that I fill the data in a form and send to the page of the pagseguro, and there on the page I finish the payment. but I need this external tab to open in his own site, "IFRAME" but I can not make that by clicking the "pay" button he send the content of the form to the page and open the same page with the data in my site via iframe... I will explain better...

I have here the form to be filled with variables...

<!-- Declaração do formulário -->  
<form method="post" target="pagseguro"  
action="https://pagseguro.uol.com.br/v2/checkout/payment.html">  
          
        <!-- Campos obrigatórios -->  
        <input name="receiverEmail" type="hidden" value="[email protected]">  
        <input name="currency" type="hidden" value="BRL">  
  
        <!-- Itens do pagamento (ao menos um item é obrigatório) -->  
        <input name="itemId1" type="hidden" value="0001">  
        <input name="itemDescription1" type="hidden" value="Notebook Prata">  
        <input name="itemAmount1" type="hidden" value="24300.00">  
        <input name="itemQuantity1" type="hidden" value="1">  
        <input name="itemWeight1" type="hidden" value="1000">  
        <input name="itemId2" type="hidden" value="0002">  
        <input name="itemDescription2" type="hidden" value="Notebook Rosa">  
        <input name="itemAmount2" type="hidden" value="25600.00">  
        <input name="itemQuantity2" type="hidden" value="2">  
        <input name="itemWeight2" type="hidden" value="750">  
  
        <!-- Código de referência do pagamento no seu sistema (opcional) -->  
        <input name="reference" type="hidden" value="REF1234">  
          
        <!-- Informações de frete (opcionais) -->  
        <input name="shippingType" type="hidden" value="1">  
        <input name="shippingAddressPostalCode" type="hidden" value="01452002">  
        <input name="shippingAddressStreet" type="hidden" value="Av. Brig. Faria Lima">  
        <input name="shippingAddressNumber" type="hidden" value="1384">  
        <input name="shippingAddressComplement" type="hidden" value="5o andar">  
        <input name="shippingAddressDistrict" type="hidden" value="Jardim Paulistano">  
        <input name="shippingAddressCity" type="hidden" value="Sao Paulo">  
        <input name="shippingAddressState" type="hidden" value="SP">  
        <input name="shippingAddressCountry" type="hidden" value="BRA">  
  
        <!-- Dados do comprador (opcionais) -->  
        <input name="senderName" type="hidden" value="José Comprador">  
        <input name="senderAreaCode" type="hidden" value="11">  
        <input name="senderPhone" type="hidden" value="56273440">  
        <input name="senderEmail" type="hidden" value="[email protected]">  
  
        <!-- submit do form (obrigatório) -->  
        <input alt="Pague com PagSeguro" name="submit"  type="image"  
src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/120x53-pagar.gif"/>  
          
</form>  

I made a scheme with php that before clicking pay the iframe is disabled, but when I click pay I must go back to the same page I am, and activate this iframe sending the data form above to the link that is in iframe.

<iframe style="border: 0;" src="https://pagseguro.uol.com.br/v2/checkout/payment.html" width="400px" height="600px" frameborder="0" scrolling="no"></iframe>

Answer 1

According to this answer: https://stackoverflow.com/questions/168455/how-do-you-post-to-an-iframe

You can use the target attribute of your form facing the name of your iframe, it would look like this:

<form action="url_pagseguro" method="post" target="iframe_pagseguro">
  <input type="submit" value="Do Stuff!" />
</form>

<iframe name="iframe_pagseguro"></iframe>

When uploading it will load the data into iframe instead of a new window (_blank) or on the same page (_self)

See the example "working": https://jsfiddle.net/8uz1bt2h/

Remembering that you can make iframe appear/disappear without need to reload the page, using javascript.