CODEWITHSUNDEEP
javascriptjquery
AgA
AgA

Reputation: 2126

Creating and submitting form in new window - not working

What I want is to create new form in a new page and have it submitted. I've picked up this snippet from How to create HTML Form in a new window. But it's only opening a new window with the URL in the action and not submitting the form automatically:

(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);

And I've created a small link:

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

Upvotes: 1

Views: 298

Answers (3)

andyw_
andyw_

Reputation: 500

Continuing what Flash Thunder has done (he probably deserves more credit)

This is the fix that I found to his work

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

For some reason, IE won't respond to a submit event from a form unless its in the body.

I've only really added $('body').append($form) - this seems to fix it.

Upvotes: 0

user3743250
user3743250

Reputation: 89

So, the whole popup window thing is a little 90s, isn't it? Modals are definitely the way to go and via a simple framework such as bootstrap, you can ensure that it will be cross-browser compatible and even responsive. Plus your interface will look a lot better.

just remember to include the 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'); 
});

check it out Fiddle

Upvotes: 0

Flash Thunder
Flash Thunder

Reputation: 12036

This seems to be working:

$('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

Upvotes: 3

Related Questions