Question

我有这个：

HTML

这是一个在模态窗口中打开href的按钮：

<a class="iframe button pink" href="http://www.test.php" > Pay Now <link rel="stylesheet" href="http://www.fethr.com/clients/res/buttonmodal.css">

表格：

<form method="post" />
<input type="text" name="xx" />
<input type="text" name="yy" />


 <a class="iframe button pink" href="http://www.test.php" > Pay Now <link rel="stylesheet" href="http://www.fethr.com/clients/res/buttonmodal.css">
    <script src="http://www.fethr.com/clients/res/buttonmodal.js"></script></a>

</form>

此锚点按钮。如果我点击它，它会在模态窗口中打开href。我正在尝试使用它作为提交按钮并将值发布到href以及在模态窗口中打开它。这可能吗？

Answer 1

以下是一个关于如何实现这一目标的简单示例：

HTML

<form method="post" onsubmit="return openModal()">
    <input type="hidden" name="price" class="price" value="100.00">
    <input type="submit" class="submit" value="Pay Now">
</form>

<div id="modal" style="display:none"></div>

的Javascript

function openModal(){
    // when you click the submit button
    $('.submit').click(function(){
        // Add an iframe inside the modal window, throw in the form value into the src URL
        $('#modal').html('<iframe src="http://www.domain.com/checkout.php?price=' + $('.price').val() + '"></iframe>');
        // Display the modal window
        $('#modal').show();
    }
    // Don't submit this form (we don't want the page to reload)
    return false;
}

因此，在iframe的源文件中，您只需要获取URL参数并计算它们。

这是一个简单的例子，没有你提供的示例链接（他们使用Ajax调用来实现这一点）所涉及的地方，但这应该让你开始。

使用锚标签进行表单发布

1 个答案: