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

如何在html表单提交上打开jQuery模态窗口

1 个答案: