Javascript - form select element open url in new window and submit form

javascript jquery forms select form-submit

44,494

Solution 1

Here ya go

<script type="text/javascript">
    $(function() {
        $("#selectElement").change(function() {
            if ($(this).val()) {
                window.open($(this).val(), '_blank');
                $("#formElement").submit();
            }
        });

        // just to be sure that it is submitting, remove this code
        $("#formElement").submit(function() {
            alert('submitting ... ');
        });
    });
</script>

<form id="formElement" method="get" action="#">
    <select id="selectElement">
        <option></option>
        <option value="http://www.deviantnation.com/">View Site 1</option>
        <option value="http://stackoverflow.com/">View Site 2</option>
        <option value="http://serverfault.com/">View Site 3</option>
    </select>
</form>

Solution 2

You can use this.form.submit() to trigger the form submit:

<script language="javascript">
    function myChangeHandler() {
        window.open(this.options[this.selectedIndex].value, '_blank');
        this.form.submit();
}
</script>

<select onchange="myChangeHandler.apply(this)">
    ...
</select>

Solution 3

Just tested Aron's example and it works fine, so I would suggest the error you are getting is from code outside of your onchange event. Try the below working example and see if you get the same error.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Example onchange and submit </TITLE>

  <script language="javascript">    
   function myChangeHandler() 
   {
    window.open(this.options[this.selectedIndex].value, '_blank');
    this.form.submit();
   }
  </script>
 </HEAD>

 <BODY>
 <form id="myform1" action="test.html">
  <select onchange="myChangeHandler.apply(this)">
    <option>Please select....</option>
    <option value="http://stackoverflow.com">Stackoverflow</option>
    <option value="http://twitter.com">Twitter</option>
    </select>
  </form>
 </BODY>
</HTML>

Solution 4

Basede on what you've described, your markup probably looks something like this:

<form ...>
  <input name="submit" ...>
  ...
</form>

Because browser tradition is to add to the form element's object (as properties) inputs' names, the "submit" property from the input masks the form's inherent "submit" property or method. You can correct this by renaming, even temporarily, the input element (assuming there's just the one):

form_object.elements['submit'].name = 'notsubmit';
form_object.submit();

If there are more than one -- eg, a series of radio buttons named "submit" for some reason -- then .elements['submit'] should be an element collection, which is like an array, which you can loop over to do the same thing.

View more solutions

44,494

Author by

Danny

Senior Developer at Reckless - a digital agency based in Chester, UK.

Updated on July 25, 2022

Comments

Danny almost 2 years
UPDATED - please read further details below original question

I have a select form element with various urls, that I want to open in a new window when selected - to do this I have the following code in the element's onchange event:
```
window.open(this.options[this.selectedIndex].value,'_blank');
```
This works fine. But I also want to submit the form when changing this select element value - I've tried various things, but I can't seem to get it to work.

I have jquery, so if it's easier to achieve via that then that's fine.

Update - I've just realised there is another issue with the above, because some of the urls are actually used to generate and output pdfs, and these do not work - they open and then immediately close (at least in IE7).

UPDATE 07/05/09 - I've now opened a bounty for this question as I really need to come up with a working solution. I did originally get around the issue by displaying links instead of a form select element, but this is no longer feasible.

The reason I need the above is that I have a large number of files that might need to be viewed / printed, too many to reasonably display as a list of links. I need to submit the form to record the fact a particular file has been viewed / printed, then display a log of the file history on the form - I'm comfortable with achieving this side of things, so don't require assistance there, but I thought it would help to place the context.

So, to clarify my requirements - I need a form select element and 'View' button that when clicked will not only launch a file download in a new window (note the above issue I faced when these files were PDFs), but also submit the form that contains the select element.
Danny over 15 years

Sorry, I should have been clearer - the form's target isn't the new url, I simply want to submit the form after this specific select element is changed.
Danny over 15 years

Hi Aron. I've tried this syntax but I get an 'object doesn't support this property or method' error. I thought the above would work too, but something seems to be throwing it off?
Danny over 15 years

Very weird - I still get the same error? What could be causing this?
Danny over 15 years

Tried this but I get the same 'object doesn't support this property or method' error.
Anonymous about 15 years

@BrynJ: There are two common errors that could cause that. Either there's an element in the form with the name or id "submit", and you'll have to change that in order to get to the form's "submit" method; or the object you have isn't of the form, and possibly is an array of forms or other elements with that id or name.
Danny about 15 years

There was indeed an element named "submit" - thank for the advice, will try again!
KyleFarris about 15 years

+1 - There's no reason why this shouldn't work perfectly in every browser. If this doesn't work, then there's something wrong with BrynJ's other code somewhere.
Danny about 15 years

Thanks for the useful explanation!