javascriptjqueryformsselectform-submit

JavaScript - form select element open URL in new window and submit form


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 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.


Solution

  • 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>