为表单发布使用锚标签答案

【问题标题】：Use an anchor tag for form post为表单发布使用锚标签
【发布时间】：2014-01-03 22:00:40
【问题描述】：

我有这个：

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 以及在模式窗口中打开它。这可能吗？

【问题讨论】：

你在那个可怜的a标签内试图做的事情是对人类的犯罪......
@RCorrie 我想在任何网站上嵌入它，这就是为什么这么多脚本和所有脚本。jquery modal 窗口的脚本，以及相同的 css
您能进一步解释一下吗？我不确定您要做什么，抱歉
锚中的链接和脚本标签是什么？锚点不是头部，也不是提交按钮。您可以将表单提交给这个特定的操作......只需使用 jQuery 在表单上调用 submit()。
@Rcorrie 我实际上需要将一些参数发布到该 url。href 中的 url 是一种付款形式。因此必须将一些参数，如 'amount' ， 'name' 等发布到付款表单，并在 jquery 窗口中打开它。这就是我想要实现的目标

标签： php jquery html ajax modal-window

【解决方案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 调用来实现此目的），但这应该可以帮助您入门。

【讨论】：