Submit a form in a popup and then close the popup

Question

This seemed so trivial when I started off with it  My objective is this     When user clicks on a button  open up a form in a new window  Once the form is submitted  close the popup and return to the original page  The reverse order is fine too - i e   I am okay if the popup is closed and then the form submits    Here s how I m doing this    lt form action   system wpacert  method  post  enctype  multipart form-data  onsubmit  return closeSelf    name  certform  gt                   lt div gt Certificate 1   lt input type  file  name  cert1   gt  lt  div gt                   lt div gt Certificate 2   lt input type  file  name  cert2   gt  lt  div gt                   lt div gt Certificate 3   lt input type  file  name  cert3   gt  lt  div gt                    lt div gt  lt input type  submit  value  Upload   gt  lt  div gt               lt  form gt    and the Javascript looks like this    lt script type  text javascript  gt  function closeSelf        self close        return true     lt  script gt    This seems to work fine on IE8 and Chrome  but Firefox refuses to submit the form  it just closes the popup  What might I be doing wrong   EDIT   Had forgotten to post the code the opens the popup  Here it is    lt div gt  lt input type  submit  value  Upload Certificates  onclick  popupUploadForm     gt      And the corresponding javascript   function popupUploadForm            var newWindow   window open   cert html    name    height 500 width 600

User · Answer

Try like this as well  covertPostSub   xyz test jsp    param1 param1 amp param2 param2    self   true    covertPostSub   xyz test jsp    param1 param1 amp param2 param2    blank   true     var convPop   null  function covertPostSub action paramsTosend targetIframe isWindow       var Popup   null      var form   document createElement  form        form setAttribute  method    POST        form setAttribute  id   TheForm        form setAttribute  action   action       form setAttribute  target   targetIframe       var params   paramsTosend      params   params substring 1  params length       params   params split   amp         for var key 0  key lt params length  key              var sa   params key           sa   sa split               var xs    sa 1             if params hasOwnProperty key                 var hiddenField   document createElement  input                hiddenField setAttribute  type    hidden                hiddenField setAttribute  name   sa 0                hiddenField setAttribute  value  xs                form appendChild hiddenField                        document body appendChild form       form style display    none       if isWindow           window open      formpopup   width 900 height 590 toolbar no scrollbars yes resizable no location 0 directories 0 status 1 menubar 0 left 60 top 60            form target    formpopup           form submit         else          form submit

User · Answer

Here s how I ended up doing this            lt div id  divform  gt               lt form action   system wpacert  method  post  enctype  multipart form-data  name  certform  gt                   lt div gt Certificate 1   lt input type  file  name  cert1   gt  lt  div gt                   lt div gt Certificate 2   lt input type  file  name  cert2   gt  lt  div gt                    lt div gt  lt input type  button  value  Upload  onclick  closeSelf      gt  lt  div gt               lt  form gt           lt  div gt           lt div  id  closelink  style  display none  gt               lt a href  javascript window close    gt Click Here to Close this Page lt  a gt           lt  div gt   function closeSelf        document forms  certform   submit        hide document getElementById  divform         unHide document getElementById  closelink          Where hide   and unhide   set the style display to  none  and  block  respectively   Not exactly what I had in mind  but this will have to do for the time being  Works on IE  Safari  FF and Chrome

User · Answer

I have executed the code in my machine its working for IE and FF also   function closeSelf           do something      if condition satisfied          alert  conditions satisfied  submiting the form            document forms  certform   submit           window close         else         alert  conditions not satisfied  returning to form                   lt form action   system wpacert  method  post  enctype  multipart form-data  name  certform  gt          lt div gt Certificate 1   lt input type  file  name  cert1   gt  lt  div gt          lt div gt Certificate 2   lt input type  file  name  cert2   gt  lt  div gt          lt div gt Certificate 3   lt input type  file  name  cert3   gt  lt  div gt             change the submit button to normal button         lt div gt  lt input type  button  value  Upload   onclick  closeSelf      gt  lt  div gt   lt  form gt

User · Answer

The Solution on top won t work because a submit redirects the page to the endpoint of form and wait for response to redirect  I see that this is an old Question but Most Asked and even i came to know the answer Still here is my solution what i am implementing  I tried to keep it secure with Nonce but if you don t care then not required  Method 1  You need to Pop up the form  document getElementById  edit info button   addEventListener  click  function            window open     url  quot updateuserinfo quot       newwindow    width 400 height 600 scrollbars no             Then you have the form open   Submit the form normally   Then return an HTTPResponse in render to a template HTML file  With a STRICT Content Security Policy  A Variable that contains the following script  Nonce contains a Base64 128bits or larger randomly generated string for every request made to server    lt script nonce  quot   nonce   quot  gt window close   lt  script gt   Method 2  Or you can redirect to another Page which is suppose to close     Which already Contains the window close   script  This will close the pop up window  Method 3  Otherwise the simplest will be Use a Ajax call if you are comfortable with one Use then   and check your condition to the httpresponse from the server Close the window when success

User · Answer

I know this is an old question  but I stumbled across it when I was having a similar issue  and just wanted to share how I ended achieving the results you requested so future people can pick what works best for their situation    First  I utilize the onsubmit event in the form  and pass this to the function to make it easier to deal with this particular form    lt form action   system wpacert  onsubmit  return closeSelf this    method  post  enctype  multipart form-data   name  certform  gt       lt div gt Certificate 1   lt input type  file  name  cert1   gt  lt  div gt       lt div gt Certificate 2   lt input type  file  name  cert2   gt  lt  div gt       lt div gt Certificate 3   lt input type  file  name  cert3   gt  lt  div gt        lt div gt  lt input type  submit  value  Upload   gt  lt  div gt   lt  form gt    In our function  we ll submit the form data  and then we ll close the window  This will allow it to submit the data  and once it s done  then it ll close the window and return you to your original window     lt script type  text javascript  gt    function closeSelf  f         f submit         window close         lt  script gt    Hope this helps someone out  Enjoy     Option 2  This option will let you submit via AJAX  and if it s successful  it ll close the window  This prevents windows from closing prior to the data being submitted  Credits to http   jquery malsup com form  for their work on the jQuery Form Plugin  First  remove your onsubmit onclick events from the form submit button  Place an ID on the form so AJAX can find it    lt form action   system wpacert  method  post  enctype  multipart form-data   id  certform  gt       lt div gt Certificate 1   lt input type  file  name  cert1   gt  lt  div gt       lt div gt Certificate 2   lt input type  file  name  cert2   gt  lt  div gt       lt div gt Certificate 3   lt input type  file  name  cert3   gt  lt  div gt        lt div gt  lt input type  submit  value  Upload   gt  lt  div gt   lt  form gt    Second  you ll want to throw this script at the bottom  don t forget to reference the plugin  If the form submission is successful  it ll close the window     lt script src  http   ajax googleapis com ajax libs jquery 1 7 jquery js  gt  lt  script gt    lt script src  http   malsup github com jquery form js  gt  lt  script gt         lt script gt           document  ready function                    certform   ajaxForm function                window close                                  lt  script gt

[javascript] Submit a form in a popup, and then close the popup

Examples related to javascript

Examples related to html

[javascript] Submit a form in a popup, and then close the popup

Examples related to javascript

Examples related to html

Examples related to popup