jquery - 如何在提交 html 表单时打开 jQuery 模态窗口

Question

我正在使用一个简单的 html 表单将产品从我的网站提交到我远程托管的 Mal 电子商务购物车。 我需要在提交表单时打开一个模式窗口(包含 iframe)。我无法访问购物车的服务器端编程，那么有没有办法使用 onclick html 事件属性启动 jQuery 模式窗口？

现在，表单底部的 onclick 属性会打开一个 js 浏览器警报...基本上我需要用我的 jQuery 模态对话框窗口替换此 js 警报。

有人可以帮忙吗？

这是我的表格:

<form action="http://ww7.aitsafe.com/cf/add.cfm" method="post">
<input type="hidden" name="userid" value="96309001">
<input type="hidden" name="nocart"> 
<input type="hidden" name="producturl" value="http://www.fruitfulfarm.net/cart_2.html">
<input type="hidden" name="product" value="Test Product">
<input type="hidden" name="price" value="49.99">
<input type="hidden" name="return" 
value="www.fruitfulfarm.net/cart_2.html">
<input class="rounded" type="submit" name="submit" value="Add To Cart"
onclick="alert('Order has been added to your cart\n\nThis page will refresh');"
onkeypress="alert('Order has been added to your cart\n\nThis page will refresh');">
</form>        

Answer 1

使用onsubmit

HTML

<form method="post" action="" onsubmit="return myModal(this)">
    <!-- more inputs -->
    <input type="submit" value="Submit" />
</form>

JS

function myModal(f)
{
    var form=f,
        modal=$('<div/>', {
            'id':'alert',
            'html':'<iframe src="url"></iframe>'
        })
       .dialog({
           'title':'Iframe in a modal window',
           'modal':true,
           'width':350,
           'height':'auto',
           'buttons': {
               'OK': function() { 
                   $(this).dialog( "close" ); 
                   // do something, maybe call form.submit();
                }
            }
    });
    return false;
}

Example