提交表单并同时加载iframe

时间:2011-03-03 20:44:39

标签: forms bing-api

我希望能够同时提交表单并加载不可见的iframe,从根本上触发两件事情:1。使用Bing的API执行搜索,2。在输入中输入输入的文本以便大声读出

我既有独立工作,又没有同时工作。

我已经读过你不能有2个表单操作,所以可以通过onclick一个提交按钮来做某事吗?

这是我的代码,目前我有两种形式,我想在单击一个按钮时将它们组合起来执行这两种操作。对于如何做到这一点,我完全接受其他建议!

    <html>
<head>
   <link href="styles.css" rel="stylesheet" type="text/css" />
<title>PHP Bing</title>
</head>
<body><form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>"> 
Enter Search:<input type="text" id="searchText" name="searchText" value="<?php 
if (isset($_POST['searchText'])){
  echo($_POST['searchText']); }
else { 
echo('');
} ?>"/>

<input type="submit" value="Search!" name="submit" id="searchButton" />
<?php
if (isset($_POST['submit'])) {

$request = 
'http://api.bing.net/json.aspx?Appid=8CFD0925A6B1745AFE2F0F359DCD8D4D9DD6A5CE&sources=web&Web.Count=5&query=' . urlencode( $_POST["searchText"]);$response  = file_get_contents($request);
$jsonobj  = json_decode($response);
echo('<ul ID="resultList">');                    

foreach($jsonobj->SearchResponse->Web->Results as $value) {

echo('<li class="resultlistitem"><a href="' . $value->Url . '">'. $value->Title .'</a>');
echo('<p>'. $value->Description .'</p>');
echo('</li>');
}
echo("</ul>");
}
?>
</form>


<form method="post" action="http://vozme.com/text2voice.php" target="hiddeniframe">
<textarea id="text" cols="40" rows="1" name="text">
Enter Text
</textarea><br>
<button style="background-color:white;
background-image:
url(http://vozme.com/img/megaphone40x40w.gif);
background-position: top center;
background-repeat:no-repeat;
height: 48px; font-size:70%;
padding:4px 4px 4px 44px;">
</button>
</form>


 <iframe height="1" width="1" name="hiddeniframe" style="display: none;"></iframe>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

您需要在JS中注册按钮单击事件,并使其1)加载iframe,并2)提交表单。 (如果你反过来这样做,iframe加载可能会在首页卸载时中止)

简化示例(为简洁起见使用jQuery):

<form id="someform" action="/foo/bar" method="POST">
   <button id="yourbutton">should trigger two actions</button>
</form>
<iframe id="some_iframe"></iframe>

<script>
    $(document).ready(function(){ // register to run this when page is ready
        $('#yourbutton').click(function(){ // register to run this when #yourbutton clicked
             $('#some_iframe').load(function(){ // register to run this when #some_iframe loads
                 $('#someform').submit();
             });
             // and *then* load the iframe
             $('#some_iframe').setAttribute('src','http://example.com/some/URL');
        });
    });
</script>