We help IT Professionals succeed at work.
Troubleshooting Question

Open new window after form submit

tel2
tel2 asked
on
84 Views
Last Modified: 2020-09-28
Hi Web Dev Experts,

I'm not sure how Perlish this will work out to be, but I’ve got an existing Perl CGI application which contains a form, which when submitted with the appropriate values, redisplays that same form (as per the form action).  That part works fine, but I’d like to make it so the submit opens a separate window (browser tab) at the same time, and displays a table in it.  The source of the HTML for that table is in a variable (say $table), not in a file.

The user would then either copy data from that table on the new window to the clipboard, or print the webpage, and when finished the user would close the window leaving them with the original window (which contains the form) only.

(One reason I want a new window is, it has to contain the table only, because I don't want any thing else like navigation controls being included in any printout, and I don't want the user to have to click the browser's back button to get back to the main window.)
 
I know I could write the HTML in $table out to a file, then display a link to that file (e.g. <a href="table.txt" target="_blank">Click for printable table</a>) on the main window after the submit, which the user could then click, but that’s an extra step for the user which I definitely want to avoid, which is why I’m asking for help.
 
I’d also prefer not to write the table to a file, mainly because then I have to somehow delete it after it’s been used, which is just more work, but I’m flexible on this.
 
Any suggestions on how to achieve the above, please?

I'm not wanting any jQuery solutions, but I might be willing to tolerate a bit (or even a byte) of plain JavaScript if required.
I'm using Perl's CGI module, so maybe it has something which could help.

I've also posted this question here: https://www.perlmonks.org/?node_id=11122052

Thanks.
tel2
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Table on a new tab is simply a new web page. You can design this page the way you want, on the fly(PHP) or other wise. You can send data to this page via post or get from a form.
CERTIFIED EXPERT

Author

Commented:
Hi aboo_s,

> "Table on a new tab is simply a new web page."
I know it is.  (It's a new web page in a new window.)

> "You can design this page the way you want, on the fly(PHP) or other wise."
My problem is not with designing the page (for the new window).  The page is basically just a table.  I'm using Perl, not PHP, as stated twice.

> "You can send data to this page via post or get from a form."
You understand the form action is already returning the same webpage with the same form, but in addition I want a new (2nd) window to appear at the same time, right?

Did you carefully read and understand the question, aboo_s?
CERTIFIED EXPERT

Commented:
You can have your CGI(not PHP) add a script to your document's onload listener in case form submitted(2nd time). Script will send a form to table file in new tab.The form is there from the beginning it only submits with js.
CERTIFIED EXPERT

Author

Commented:
Thanks aboo_s,

Could you please show me the relevant bits of code required for that, because I don't fully understand it yet.  I'm not asking for a full script.  (I know I didn't provide any code for you.)
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Commented:
let form = document.getElementById('myform'); 
form.action = 'table.html';
form.method = 'GET'; 
form.submit();
CERTIFIED EXPERT

Commented:
In body tag should add onload=my function()
Where myfunction is the code that submits the form
CERTIFIED EXPERT

Author

Commented:
Thank you Julian, Michel and aboo,

I'll start by looking at Julian's solution.
Julian, your solution looks promising, and the demo seems to work, but I see the new window opens a file ("https://your.domain/path/to/script").  Any suggestions on how to meet this requirement from my original post, in your code:
"I’d also prefer not to write the table to a file, mainly because then I have to somehow delete it after it’s been used, which is just more work, but I’m flexible on this."
​As mentioned, my table is in the $table variable.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
@tel2 - my solution does not need a file
CERTIFIED EXPERT

Author

Commented:
Yeah, I had noticed that, Michel, and I intend to test it later.
But while we're talking, I see you specified height and width for the new window.  How would I make that just a full size new window/tab?
And does the HTML table have to be in an array (e.g. @table)?  Mine is in a scalar: $table.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Tab:
const w = window.open("","tableWin"); 

Open in new window


I am not a perl coder. Change @table to $table  - I thought @ was neater because it was clearer in the JS code and I was not sure if heredoc would allow $table
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:

I’d also prefer not to write the table to a file, mainly because then I have to somehow delete it after it’s been used, which is just more work, but I’m flexible on this 

Why do you need to write it to a file? Simply point the window location at a script that returns the data that you want. In other words - the script that would have written the data to file - simply have that write the html out and send it back to the browser - no physical file is created and you don't have to mess about with passing data from browser window to another.

One should look at this from the point of what you can do vs what you should do. If the data you are dealing with is being managed from the server then this should be your single source of truth. When you pass data from one browser window to another - that is sourced from the server - there is potential for that data to be out of sync with that on the server. The logical solution is therefore to always get the data from the same source.

In the context of this question that would be a script that renders out the table (not to a file) and sends it back as html.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
PS: You can avoid dealing with popup blockers if you do

<div id="tableDiv" style="display:none">$table</div>

Open in new window


and when you want to show you can do

document.getElementById("tableDiv").style.display="block";

Open in new window

CERTIFIED EXPERT

Author

Commented:
Thanks Michel,
Yes, I do want to avoid popup blockers, please.
But I don't understand how (or whether) the code in your last post combines with your previous code.  Or does it just replace somehow?
Sorry - I don't know much JavaScript.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Combines, but you can just use html too

$table = ....
my $div = <<'DIV';
    <div style="position: absolute; top:300px; left:300px; overflow: scroll; height: 500px; width: 500px">$table</div>
DIV
print qq($div);

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Usually users should get a message asking if they want to allow the page to open a window - once they answer yes they should be good to go.

The other option is to place the table in a faux popup i.e. a <div> that is styled to look like a popup.

This can be loaded with AJAX from the same source - or populated directly from the page.

This article describes the basic process https://www.experts-exchange.com/articles/28838/Create-a-responsive-confirmation-popup-using-HTML-CSS-jQuery-and-Promises.html
CERTIFIED EXPERT

Author

Commented:
Thanks Julian.  I might look at that later.

Hi Michel,
I'm trying to test your solution.  Can't get it to work in Perl, so for now I've tried simplifying it to a static webpage, like this:

<html>

<body>

   <form method=post>

      This is the form<br>

      <input type=submit name=go value=Go>

   </form>

  <div style="position: absolute; top:100px; left:300px; overflow: scroll; height: 500px; width: 500px">The table would go here</div>

</body>

</html>


But alas, everything appears in one window.
What have I got wrong?
I thought when you said "Combines, but you can just use html too", you meant I can get rid of the JavaScript.  No?

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You have to hide your div and then show it when you need it as shown below.

HOWEVER: Remember with this solution you need to either set the target of your form to an in page element OR you need to submit your form by AJAX or else the form submission is going to wipe out the popup.
<html>
<head>
<style>
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.8);
    display: none;
    justify-content: center;
    align-items: center;
}
.popup {
    overflow: scroll;
    height: 500px;
    width: 500px;
    background: white;
    color: #444;
    padding: 2rem;
}
</style>
</head>
<body>
<form method="post" action="reflect.php">
    This is the form<br>
    <input type=submit name=go value=Go>
</form>
<div id="overlay" class="overlay">
<div class="popup">The table would go here</div>
</div>
<script>
window.addEventListener('submit', function(e) {
    e.preventDefault();
    document.getElementById('overlay').style.display = 'flex';
})
</script>
</body>
</html>
Working sample here
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Sorry I’m not near a computer for some hours so have a look at Julian’s answer
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
So simpler (remember I do not do perl):

print <<<form
    <form method=post>
      This is the form<br>
      <input type=submit name=go value=Go>
    </form>
form

if (length $table) {
  print <<<tablediv
    <div class="popup">$table</div>
  tablediv
}

Open in new window



with some CSS

.popup {
  border: 1px solid black;
  position: absolute;
  top: 100px;
  left: 300px;
  overflow: scroll;
  height: 500px;
  width: 500px;
  padding: 5px;
}

Open in new window



If you want to hide it and show it on click you can do

if (length $table) {
  print <<<tablediv
    <div class="popup hide">$table</div>
  tablediv
}

Open in new window


ADD this to the stylesheet:
.hide { display: none; }

Open in new window


and have a button somewhere:

<button type="button" onclick="document.querySelector('.popup').classList.toggle('hide')">Toggle table</button>

Open in new window

CERTIFIED EXPERT

Author

Commented:
Hi Julian, Michel and aboo_s,

Popup options aren't attractive to me because of popup blockers, so I want to avoid them, as I've said above.
But it looks as if some of your solutions seem to not create popups, which is good.
Thanks for all your answers, and the code, including live demos from Julian!
I plan to award points accordingly.

Someone (trwww) at PerlMonks (see link at the bottom of my original post) brought to my attention that the <form> element has a target attribute, which I was not previously aware of.  I think that would have been a simple solution to the question I posted by itself, except for something that I had not thought to mention, which was that opening the 2nd window is conditional on the "printable" option being selected from a <select> dropdown.  So, with some tips from W3Schools, I was able to create a JavaScript function to change the form's target between "_self" and "printable", depending on the option selected.  And it seems to even work (in my >3000 line script), with not much additional code, no popups, no CSS changes, and I understand it.

And Julian, the form action I've been using before this change (and still now after it) is to run the same script, so I continue to avoid writing a file, as you have suggested I can do.

But thanks for all your work, which may be of help to others, and gave me some tips.

Sorry, I didn't understand your answers this time, aboo_s, but thanks for trying to help.

tel2
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
brought to my attention that the <form> element has a target attribute, which I was not previously aware of.

If you refer to my answer here https://www.experts-exchange.com/questions/29195399/Open-new-window-after-form-submit.html#a43162419


HOWEVER: Remember with this solution you need to either set the target of your form to an in page element OR you need to submit your form by AJAX or else the form submission is going to wipe out the popup. 

Also bear in mind that in your OP you said
That part works fine, but I’d like to make it so the submit opens a separate window (browser tab) at the same time, and displays a table in it

But glad you got sorted.
CERTIFIED EXPERT

Author

Commented:
Hi Julian,
Looks as if I misunderstood you back then, sorry.  Must be frustrating.  (Good thing you got most of the points.)
The form in the code you provided in that post, i.e.
    <form method="post" action="reflect.php">
had no target attribute, and I didn't fully understand what you meant in your "HOWEVER" section.  Maybe I should have taken the time to ask.  Reading "set the target of your form to an in page element" didn't make me think of a target attribute.  I would have thought maybe you meant simply changing the action attribute to point to an anchor on the page (e.g. action="reflect.php#table_section").  What did you mean by "set the target of your form to an in page element", exactly?

"Also bear in mind that in your OP you said..."

Yes, I did say that.  What point are you making about it, please?  Are you saying that I should have said I would be willing to accept a solution which doesn't "redisplay that same form"?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:

(Sample)had no target attribute 
:) That was because your question specifically asked for a popup so the sample was geared for that.
What did you mean by " set the target of your form to an in page element", exactly?
A form can be set to load to the same window (default) a new window (_blank) a named window or to a named iframe.
In the case of the iframe you can send the results of the form to an iframe on the same page. (See it working here)

Yes, I did say that.  What point are you making about it, please? 
I was pointing out that the target option was not on the radar as your OP was originally asking about a popup i.e. it seemed from your opening post that you specifically wanted a solution that opened a popup (either in page or as a separate window)
CERTIFIED EXPERT

Author

Commented:
"That was because your question specifically asked for a popup so the sample was geared for that."
Oh.  Please quote my wording where I specifically asked for a popup, Julian.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
The title of the question for one

Open new window after form submit

The main gist of the question seemed to revolve around opening a new window.

That part works fine, but I’d like to make it so the submit opens a separate window (browser tab) at the same time, and displays a table in it.  The source of the HTML for that table is in a variable (say $table), not in a file.

The user would then either copy data from that table on the new window to the clipboard, or print the webpage, and when finished the user would close the window leaving them with the original window (which contains the form) only.

(One reason I want a new window is, it has to contain the table only, because I don't want any thing else like navigation controls being included in any printout, and I don't want the user to have to click the browser's back button to get back to the main window.) 
CERTIFIED EXPERT

Author

Commented:
Maybe I've learned the wrong terminology, but I never said I wanted a "popup" window.
How should I have described the type of thing that appears when someone clicks a link like:
 <a href="..." target="_blank">
Julian?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Popup can mean one of two things
A new window - i.e. a new browser tab or a new browser window. If we are talking about popup blockers then this is the domain of popup blockers - opening new windows.

A styled div (as per my sample). In this case we stay on the same page it just looks like a separate window. This will not trigger a popup blocker.

Neither of these overlaps with the target method which sends the content to an iframe on the same page.In other words you have your form - you submit and then somewhere else on the page the content from the form submit loads (as per my second sample).

Unless the iframe is contained in the second type of popup described above - it does not look like a new window.


CERTIFIED EXPERT

Author

Commented:
Thanks for that, Julian.

I've got 4 simple questions.  If you give me 4 simple answers, that may clear some things up for me.

Q1. What is the name of the thing (window, popup, or whatever) that appears in the browser when someone clicks a link like this: <a href="..." target="_blank"> ?

Q2. Is the above (in Q1) subject to popup blockers?

Q3. What is the name of the thing (window, popup, or whatever) that appears in the browser when someone submits a form like this: <form method=post action="..." target="_blank"> ?

Q4. Is the above (in Q3) subject to popup blockers?

If you can give 4 separate numbered answers for clarity, that should help.

Thanks.
tel2
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Q1: Tab or Window (but sometimes referred to a popup - standards are a bit loose in this area)

Q2: Yes. Anything that results in a new window or tab being opened can trigger popup blockers.

Q3: As above target="_blank" means open a new tab / window.

Q4: Same as 2 (Yes)

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I do not totally agree on this
Q2: Any action on a link or a form that targets a new tab/window would not normally trigger a popup blocker unless the action is triggered by automated click. If a user clicks on a button or a link, the user should expect something to happen and the browser will not block that action.
Possibly agressive internet security addons might block this
CERTIFIED EXPERT

Author

Commented:
I love these EE opinion polls.

I can't personally recall clicking a <a href="..." target="..."> link and getting blocked, but I do get blocked sometimes when logged in to NZ's tax site when I click links which seem to be using JavaScript.

Sorry if my original question, which I tried to make as clear as possible, still wasn't clear.

Thanks for your efforts, guys.  Take the rest of the week off...if you want to.  It's nearly 7pm on Friday here in NZ, so I think I will.

tel2
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
@Michel

Note the answer to my question 2 said can not will. The point was to distinguish between windows that open new tabs vs faux popus that are styled divs.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
@Julian

I wanted to make the distinction between window.open() or link.click() or submitbutton.click() or form.submit() AND the user clicking on a submit button where the form has taget="_blank" or a link that has target="blank"

So you have a much greater chance on the second set where the user clicks something than if you click it using script
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.