Question

我在页面上有一个简单的模态对话框，点击Go按钮，用户应该根据下拉列表中的选定选项导航到另一个页面;看起来像mysite.com/<cfoutput>#product_name#</cfoutput>;我收到了一个错误，它让我无处可去。我试过几件不同的东西，一定是缺少真正的小东西。任何见解？感谢

<div id="home-choose-spec" class="modal fade home-spec-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">            
        <div class="modal-dialog modal-sm login-modal">
            <div class="modal-content white-bg rounded">
                <div class="modal-body">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
                    <div class="reg-block border-none">
                        <div class="reg-block-header">
                            <h2 class="dark-blue bold">Select a product:</h2>                                                                   
                        </div>

                        <div class="margin-bottom-20">

                            <form class="reg-page" method="post">
                                <select name="pid" id="pid" class="form-control input margin-bottom-20">
                                <cfoutput query="products"> 
                             <option value="#pid#">#product_name#</option>
                     </cfoutput>
                                </select>                                                             
                             <a class="btn btn-lg btn-block btn-home-spec-choice light-blue-bg white bold rounded" href=’mysite.com/<cfoutput>#product_name#</cfoutput>’>Go!</a>
                            </form>
                        </div>
                      </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

目前还不清楚问题是什么......你是否收到了javascript错误或cf错误，但似乎你试图在同一页面的同一个实例中使用产品名称。

这完全有可能，但不是你怎么做的。看起来你正试图在没有提交页面的情况下获得盒子的价值。

在链接中添加ID，我选择了mlink。

您可以在初始加载时使用cf填充等于默认选定选项值的值

<div class="modal-body">
    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
    <div class="reg-block border-none">
        <div class="reg-block-header">
            <h2 class="dark-blue bold">Select a product:</h2>                                                                   
        </div>

        <div class="margin-bottom-20">

            <form class="reg-page" method="post">
                <select name="pid" id="pid" class="form-control input margin-bottom-20">
                <cfoutput query="products"> 
             <option value="#pid#">#product_name#</option>
     </cfoutput>
                </select>                                                             
             <a id="mlink" class="btn btn-lg btn-block btn-home-spec-choice light-blue-bg white bold rounded" href=’#’>Go!</a>
            </form>
        </div>
      </div>
</div>

然后使用像这样的javascript

document.getElementById('mlink').onclick = function (e) {
    var pidselect = document.getElementById('pid')
    this.href = "http://somesite.com/"+ pidselect.options[pidselect.selectedIndex].innerHTML;
}

这是一个JSFiddle演示，在函数中还有两行代码，用于在触发之前捕获链接，使用href值提醒您，并停止触发（这样您就不会离开jsfiddle页。

请注意，jsfiddle中的html与此处不同（我删除了cfoutputs并复制了一个选项，因此有一些东西可以证明它正在运行，所以如果你复制html，请从这个页面复制它。

从模态弹出窗口重定向

1 个答案: