We help IT Professionals succeed at work.
Get Started
Troubleshooting Question

JavaScript: Change target then change selected option

tel2 asked
Last Modified: 2020-11-26
Hi JavaScript experts,
I’ve been struggling with this for many hours, and would appreciate your help.  Here's a majorly simplified version of my code.
I’ve got a form in HTML5 with these controls:
    Form: <form method=post name=mainForm id=mainForm>  (I’m not bothering to specify the action because the script calls itself regardless of how the form is submitted.)
    Search: <select type=submit name=search value=Search>
    Go: <select type=submit name=go value=Go>
    Add: <select type=submit name=add value=Add>
    Clear: <button type=submit formaction="">Clear</button>
      <select name=destination id=destination>
          <option value=original_window id=current_window>Current Window</option>
          <option value=new_window>New Window</option>
          <option value=csv>CSV File</option>
          <option value=xlsx>XLSX File</option>
  Plus a lot of text fields, etc.
When someone clicks Search, if the selected Destination is “New Window”, then I want the form’s target to change to “’_blank’” (instead of the default) so the search results go to a new window, and then I want the Destination to be changed back to “Original Window”.  (That's the only scenario where I want a "New Window" to appear.)  I (almost) achieved that with this HTML:
<input type=submit name=search value=Search onclick="changeTarget()">
And this JavaScript:
function changeTarget() {
  if (document.getElementById('format').value == 'new_window') {
    document.getElementById('mainForm').target = '_blank';
    // Not sure of the significance of using either or both of the following 2 lines, but that’s not my main problem.
    document.getElementById('destination').value = 'original_window';
    document.getElementById('original_window').selected = true;
  else {
    document.getElementById('mainForm').target = '_self';
When I run the above code and do a Search with a Destination of “New Window”, a new window is opened (that's good), and the Destination option gets set back to “Original Window” in the original window (that's good), but presumably because of the latter, the “destination” HTTP parameters get passed with a value of “original_window”, presumably because the Destination was reverted before the new window was created.

Q1. Any ideas how to avoid the above behaviour, i.e. so a HTTP parameter value of “new_window” is passed for the “destination” attribute?

Q2. And as a minor 2nd part to this, what is the difference between doing this:
    document.getElementById('destination').value = 'original_window';
and this:
    document.getElementById('original_window').selected = true;
From my tests, either one seems to have the same result in my case, so I don't think both are necessary.

I would have liked to put this in a jsfiddle.net for you to test, but I don’t think it’s going to work because of the change of form target.
No jQuery solutions, please - just native JavaScript, (if JavaScript is required at all).

Watch Question
Sr. System Analyst
This problem has been solved!
Unlock 1 Answer and 36 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant

An Experts Exchange subscription includes unlimited access to online courses.

Get Started
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE