`
天梯梦
  • 浏览: 13729552 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

提交表单到弹出窗口 Submit a form into a popup

 
阅读更多

实例目的:一些网站不允许被包含在iframe中(例如paypal standard),为了实现让用户仍然留在本站的目的,下面的实例可供参考。

 

方法一: HTML的方式 DEMO

<form id="paypal-payment-form" name="paypal-payment-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="POPUPW"
                  onsubmit="POPUPW = window.open('about:blank','POPUPW','width=900,height=700,scrollbars=yes,resizable=yes');">
                <input type="hidden" name="cmd" value="_xclick">
                <input type="hidden" name="business" value="gotoinquire@gmail.com">
                <input type="hidden" name="item_name" value="Donate to Developer">
                <input type="hidden" name="item_number" value="for-iKS">
                <input type="hidden" name="amount" value="">
                <input type="hidden" name="currency_code" value="USD">
                <input type="hidden" name="bn" value="PP-BuyNowBF">
                <input type="hidden" name="first_name" value="Your First Name">
                <input type="hidden" name="last_name" value="Your Last Name">
                <input type="hidden" name="email" value="Your Email">
                <input type="submit" name="submit" value="Click Paypal Button 点击这里">
            </form>

 

方法二: Javscript的方式 DEMO

<script>
function target_popup(form) {
    window.open('about:blank','POPUPW','width=900,height=700,scrollbars=yes,resizable=yes');
    form.target = 'POPUPW';
}
</script>
<form id="paypal-payment-form" name="paypal-payment-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="target_popup(this)">
                <input type="hidden" name="cmd" value="_xclick">
                <input type="hidden" name="business" value="gotoinquire@gmail.com">
                <input type="hidden" name="item_name" value="Donate to Developer">
                <input type="hidden" name="item_number" value="for-iKS">
                <input type="hidden" name="amount" value="">
                <input type="hidden" name="currency_code" value="USD">
                <input type="hidden" name="bn" value="PP-BuyNowBF">
                <input type="hidden" name="first_name" value="Your First Name">
                <input type="hidden" name="last_name" value="Your Last Name">
                <input type="hidden" name="email" value="Your Email">
                <input type="submit" name="submit" value="Click Paypal Button 点击这里">
            </form>

 

方法三: 链接的方式 , DEMO

 

<a href="javascript:OpenWindowWithPost('https://www.paypal.com/cgi-bin/webscr','width=1000, height=600, left=100, top=100, resizable=yes, scrollbars=yes','gotoinquire@gmail.com','Paypal')">Click Paypal Button 点击这里</a>

        <script>
            function OpenWindowWithPost(url, windowoption, name)
            {
                var params = { 'cmd' : '_xclick',  'item_name' : 'Donate to Developer',  'item_number' : 'for-iKS',  'currency_code' : 'USD',  'bn' : 'PP-BuyNowBF',  'first_name' : 'Your First Name', 'last_name' : 'Your Last Name', 'email' : 'Your Email', 'amount' : '', 'business': 'gotoinquire@gmail.com' };

                var form = document.createElement("form");
                form.setAttribute("method", "post");
                form.setAttribute("action", url);
                form.setAttribute("target", name);
                for (var i in params)
                {
                    if (params.hasOwnProperty(i))
                    {
                        var input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = i;
                        input.value = params[i];
                        form.appendChild(input);
                    }
                }
                document.body.appendChild(form);
                //note I am using a post.htm page since I did not want to make double request to the page
                //it might have some Page_Load call which might screw things up.
                window.open("post.htm", name, windowoption);
                form.submit();
                document.body.removeChild(form);
            }
        </script>

 

 

 

原文/转自:提交表单到弹出窗口 Submit a form into a popup

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    jQuery popup javascript 弹出窗口

    总的来说,jQuery popup javascript弹出窗口的实现涉及到JavaScript编程、CSS样式设计、事件处理、浏览器兼容性优化等多个方面,是一个综合性的网页开发任务。通过研究提供的文件,可以深入理解这些技术的结合应用。

    点击按钮弹出窗口

    5. **关闭弹出窗口**:为了提供关闭弹出窗口的功能,可以在弹出窗口的内部添加一个关闭按钮(例如`&lt;span id="close"&gt;&times;&lt;/span&gt;`),并添加相应的事件监听器来处理关闭操作: ```javascript document....

    jquery弹出窗口

    在弹出窗口中进行表单提交,我们可以创建一个包含表单的弹出窗口,并使用jQuery处理表单的提交事件。以下是一个简单的例子: 1. 更新HTML结构,添加表单: ```html &lt;div id="popup" style="display:none;"&gt; 弹出...

    Popup例子 实现弹出窗口的关闭

    "Popup例子 实现弹出窗口的关闭"这个主题聚焦于如何在WP应用中设计并实现一个功能完善的弹出窗口(Popup),并且允许用户通过点击弹出窗口外部的任何地方来关闭它。下面我们将详细探讨这一技术。 首先,Popup是...

    弹出窗口效果

    "jQuery + CSS 实现绚丽的弹出窗口效果"这个主题涉及到两个关键的技术:JavaScript 库 jQuery 和样式语言 CSS。它们共同作用,使得弹出窗口不仅具有基本的显示功能,还能实现丰富的动态效果和视觉吸引力。 首先,...

    鼠标点击按钮弹出层可以写from表单登陆框弹出层

    4. **表单交互**:用户在弹出层中填写信息后,点击提交按钮,JavaScript会收集表单数据并通过Ajax请求发送到服务器。这样,页面不会刷新,保持弹出层的显示状态。 5. **服务器响应处理**:服务器验证用户信息后,...

    popup MSN 风格的消息弹出窗口

    在ASP.NET开发中,实现这种Popup MSN风格的弹出窗口主要涉及到以下几个关键技术点: 1. **JavaScript/jQuery**: 通常,弹出窗口的动态显示和隐藏是通过客户端脚本实现的。JavaScript或jQuery库可以帮助我们在用户...

    jQuery实现弹出窗口中切换登录与注册表单

    总的来说,使用jQuery实现弹出窗口中的登录与注册表单切换是一项常见的前端任务,它涉及到DOM操作、事件处理以及可能的表单验证和安全措施。通过熟练掌握jQuery,我们可以创建出更加动态和用户友好的Web应用界面。

    js 自动弹出窗口 下来菜单效果

    在探讨“js自动弹出窗口下来菜单效果”的知识点时,我们不仅关注JavaScript代码本身,还应当深入了解其背后的逻辑与应用场景。这段代码展示了如何利用JavaScript创建一个动态下拉菜单,并在用户选择菜单项时自动打开...

    popup 弹出框 js

    在网页设计和开发中,`popup`弹出框是一种常见的用户交互元素,它可以在用户进行特定操作或需要显示额外信息时出现。`popup`通常用于登录注册、消息提示、广告展示、确认操作等场景。本篇文章将深入探讨`popup`弹出...

    jquery自定义弹出窗口

    - **交互式功能**:弹出窗口可以包含表单、图表或其他互动元素,提升用户体验。 总结,jQuery自定义弹出窗口提供了更大的灵活性和控制力,使得弹出窗口的样式、内容和行为可以根据项目需求进行定制。通过学习和实践...

    jquery的一个弹出窗口

    // 关闭弹出窗口,可以绑定到弹出窗口内的关闭按钮或背景点击事件 $('#popup .close-btn, #popup').click(function(event) { if (event.target.id !== 'popup') { hidePopup(); } }); }); ``` 4. **预览和测试...

    js-弹出窗口

    在JavaScript和CSS的世界里,创建弹出窗口是一种常见的交互设计技术。这种技术使得用户能够在一个新的、独立的界面中查看或操作信息,而不会干扰主页面的内容。在本案例中,我们将探讨如何利用这两个强大的工具来...

    17、Jquery支持自定义弹出窗口插件

    弹出窗口通常是在主页面上覆盖一层半透明或全屏的元素,用来显示额外的信息、提示、表单或任何其他内容,而不会中断用户的浏览体验。这些窗口可以通过点击按钮、链接或其他交互触发。 创建一个自定义的jQuery弹出...

    arcgis 自定义弹出窗口

    在ArcGIS for Silverlight中,弹出窗口(Popup)通常用于显示地图上的图层或特征的详细信息。默认的弹出窗口虽然实用,但可能无法满足所有需求,因此自定义弹出窗口显得尤为重要。自定义弹出窗口允许开发者根据应用...

    popup弹出框

    popup 弹出框参数详解 在使用 jQuery 创建弹出框(popup)时,需要了解各种参数的名称、类别、描述等信息。本文将详细介绍这些参数,以便更好地使用 popup。 1. text (string, 必须):弹出窗口中要显示的内容,...

    百度的弹出窗口

    在这里,我们将深入探讨JavaScript弹出窗口的原理、实现方式以及可能涉及到的`popup.js`和`PopupsUtil.js`这两个文件的角色。 首先,JavaScript弹出窗口通常通过以下几种方式创建: 1. `window.alert()`: 这个函数...

    Flex 弹出窗口代码

    在Flex编程中,"弹出窗口代码"是一个常见的需求,特别是在设计用户交互界面时,我们经常需要实现点击按钮后打开一个新的窗口或者对话框来展示更多信息或进行特定操作。本篇将详细讲解如何在Flex中创建一个点击按钮后...

    JQUERY 弹出窗口

    在"JQUERY 弹出窗口"这个主题中,我们主要探讨的是如何利用jQuery实现弹出对话框或者弹出层的功能,这些功能通常用于显示提示信息、用户确认、表单填写等多种场景。 首先,jQuery 提供的 `.show()`, `.hide()`, 和 ...

    弹出窗口的创建

    在JavaScript编程中,弹出窗口是一种...这样的弹出窗口可以广泛应用于各种Web应用程序中,如表单提交、信息提示、用户交互等场景。理解并掌握这种自定义弹出窗口的创建方法对于提升Web应用的用户体验和交互性至关重要。

Global site tag (gtag.js) - Google Analytics