如何将此表单的输出发送到新的WordPress页面？

时间：2016-02-15 作者：Steve

在…上this site, 我有以下表格，允许访问者从抵押计算器中选择要使用的选项：

<select id="dynamic_select" name="cars">
<option value="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA">Borrowing Power Calculator</option>
...
</select><input id="Submitgo" type="submit" style="float:right; clear:both;"/></p>
<br class="cleanBreak" />

<script>// <![CDATA[
$(\'#Submitgo\').on(\'click\', function() { var url = $(\'#dynamic_select\').val(); window.location = url; });
// ]]></script>
选择表单选择并单击提交按钮后，用户将进入显示计算器的外部页面。

我希望表单显示在新的Wordpress页面中。

不幸的是，我是设计师，不是开发人员，所以我不知道从哪里开始。

我想也许我可以改变window.location = url 等同于Wordpress URL？

也许我需要在iframe中嵌入url？然而，我不知道如何打开窗户。转发到具有包含计算器URL的iframe的Wordpress页面的位置。

谢谢

3 个回复
SO网友:nonsensecreativity

在这种情况下，最好使用Iframe。以下是我将如何做到这一点。你真的需要提交按钮吗？在这种情况下，我不使用提交按钮，您可以根据需要更改它。此示例代码可以通过以下方式添加到WordPress页面Text 编辑器上的选项卡

<style type="text/css">
    .hideframe {
        visibility:collapse;
        display:hidden;
        height:0px;
    }
</style>

<select id="car" name="car">
    <option value="none">None</option>
    <option value="calc">Borrowing Power Calculator</option>    
</select>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById( \'car\' ).onchange = function() {
            var calc = document.getElementById( \'calc\' );
            if( this.value === \'calc\' ) {
                calc.classList.remove( \'hideframe\' );
            } else {
                calc.classList.add( \'hideframe\' );
            }
        };
    }
</script>

<!-- iframe start -->

<div id="calc" class="hideframe">
    <iframe src="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA" />
</div>
<!-- iframe end -->

SO网友:denis.stoyanov

由于您没有访问此网站和表单的权限，您的最佳选择将是使用<iframe>. 将此粘贴到某个页面：

<iframe src="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA"  style="height: 100%; width: 700px;">
  <p>
    <a href="http://www.visionabacus.com/Finance/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA">
      Fallback link for browsers that, unlikely, don\'t support frames
    </a>
  </p>
</iframe>
尽管请记住，某些浏览器不会像在具有HTTPS 表格不会显示，你会得到Mixed Content 错误。

SO网友:kinjal jethva

您应该使用以下代码获得结果：

$( "#dynamic_select" ).change( function() {
    var changingUrl = $( this ).val();
    window.location = changingUrl;
} );
在这里，通过从选择框中选择选项，您将获得所选选项URL，如下所示：

var changingUrl = $( this ).val();
然后使用以下命令根据需要重定向页面：

window.location = changingUrl;

标签： jquery   小码农  

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上，我不知道我是如何产生它的，或者它是否是正常的。我正在开发自己的插件，当一个足球队/足球队被输入到一个框中时，它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">