在新窗口中创建和提交表单 - 不工作

时间:2014-06-09 09:30:00

标签: javascript jquery

我想要的是在新页面中创建新表单并将其提交。我从How to create HTML Form in a new window获取了此片段。 但它只是在操作中打开一个带有URL的新窗口,而不是自动提交表单:

(function($) {
    Drupal.behaviors.ajax_example2 = {
        attach: function(context) {

         jQuery("#btn1").click(

            function () {

                var form = document.createElement("form");
                form.setAttribute("method", "post");
                form.setAttribute("action", 'http://moodle.foresteee.com/login/index.php');

// setting form target to a window named 'formresult'
                form.setAttribute("target", "formresult");

                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("username", "testaccount1@wo");
                hiddenField.setAttribute("password", "forest3");
                form.appendChild(hiddenField);
                document.body.appendChild(form);

// creating the 'formresult' window with custom features prior to submitting the form
                window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

                form.submit();
            }
            );

        }
    }
})(jQuery);

我创建了一个小链接:

<a href="#" id="btn1">Click here</a>

3 个答案:

答案 0 :(得分:3)

这似乎有效:

$('a').click(function(){
    window.open('', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
    $('<form></form>').attr('method','post').attr('action','url_to_post').attr('target','formresult').append('<input type="text" name="test" value="test_value"/>').submit();
});

JSFiddle

答案 1 :(得分:0)

所以,整个弹出窗口的东西都是90秒,不是吗?模态绝对是最佳选择,通过一个简单的框架(如bootstrap),您可以确保它与跨浏览器兼容甚至响应。此外,您的界面看起来会好很多。

请记住包含bootstrap cdn:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

HTML:

    <a class="btn btn-primary">click me bro</a>

<div id="popup" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal's rock!!</h4>
      </div>
      <div class="modal-body">
      <form method="post" action="url_to_post" target="formresult"></form>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

jquery的:

    $('a').click(function(){   
    $('.modal-body form').empty().prepend('<input type="text" name="test"   value="test_value"/>');
    $('#popup').modal('show'); 
});

查看Fiddle

答案 2 :(得分:0)

继续Flash雷霆所做的事情(他可能值得更多信任)

这是我在他的作品中找到的解决方法

http://jsfiddle.net/doiks14/a8HFa/11/

出于某种原因,IE不会回复表单中的提交事件,除非它在正文中。

我只是真的添加了$('body').append($form) - 这似乎解决了这个问题。