如何将表单输入传递给javascript iframe URL?

时间:2013-01-27 21:36:02

标签: javascript jquery iframe webforms argument-passing

  

可能重复:
  How do you post to an iframe?

我有一个表单,我想要做两件事 - 用一个按钮提交标准表单请求(可以正常工作),然后有第二个按钮(也可以部分工作)在页面内打开一个iframe使用附加到iframe网址的表单中的值。

这是我正在使用的脚本:

<script language="JavaScript" type="text/javascript"> 
function makeFrame() { 
ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("src", "https://www.hostname.com/filepath"); 
ifrm.style.width = 340+"px"; 
ifrm.style.height = 630+"px"; 
document.body.appendChild(ifrm); 
} 
</script>

和表格:

<FORM action="https://www.hostname.com/filepath" method="POST" name="form" id="viewGift">
  <P><br>
    <LABEL for="giftId">giftId: </LABEL><INPUT type="text" name="giftId"><BR>
    <INPUT type="radio" name="opt1" value="1" checked> opt1<BR>
    <INPUT type="radio" name="opt2" value="2"> opt2<BR>
    <INPUT type="radio" name="opt3" value="3"> opt3<BR>
    <INPUT type="radio" name="opt4" value="4"> opt4<BR>
    <INPUT type="button" value="Send Gift" onclick="formSubmit()">
    <INPUT type="button" value="Show Gift" onclick="makeFrame()">
 </P>
 </FORM>

我的表单提交正确,但我无法弄清楚如何使用Show Gift按钮将表单giftId值传递给iframe网址。如果我对URL进行硬编码,则“显示礼物”按钮的工作正常,但这对页面的用途没有多大帮助。

基本上,我需要显示礼品按钮来创建一个网址为https://www.hostname.com/filepath/giftId的iframe,其中giftId由用户输入。

1 个答案:

答案 0 :(得分:0)

这应该有效:

function makeFrame() {
    var ifrm = document.createElement("IFRAME");
    var gift_id=document.getElementById('viewGift').elements['giftId'].value
    ifrm.setAttribute("src", "https://www.hostname.com/filepath/"+gift_id);
    ifrm.style.width = 340 + "px";
    ifrm.style.height = 630 + "px";
    document.body.appendChild(ifrm);
}