ansaurus

Question

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

Answer 1

+1 A:

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>

Aron Rotteveel 2009-02-19 12:07:05

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?

BrynJ 2009-02-19 12:13:23

edited and tested the code now. this should work.

Aron Rotteveel 2009-02-19 12:18:18

Very weird - I still get the same error? What could be causing this?

BrynJ 2009-02-19 13:11:01

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

Anonymous 2009-05-07 11:42:48

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

BrynJ 2009-05-07 12:30:13

Answer 2

A:

You know you can set a target attribute for the form?

<form target="_blank" method="post">
  <select onchange="load()">
    ...
  </select>
</form>
<script>
  load() {
    document.forms[0].action = this.value;
    document.forms[0].submit();
  }
</script>

Forgive the probably bad Javascript. I tend to do more jQuery these days so I'm rusty on vanilla Javascript. But you get the general idea.

cletus 2009-02-19 12:07:48

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.

BrynJ 2009-02-19 12:12:12

Answer 3

A:

While I'm not familiar with jQuery, you should be able to do something like this (Prototype-style):

$('select-field').observe('change',function(event){
  window.open(this.options[this.selectedIndex].value,'_blank');
  this.form.submit();
}

Though I have had a few odd issues with submitting forms with Javascript before, so if that doesn't work you could try calling click() or the equivalent of fireEvent('click') on your form's submit button, like so:

$('submit-button').fireEvent('click');

Luke 2009-02-19 12:08:00

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

BrynJ 2009-02-19 13:47:44

Answer 4

+3 A:

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/"&gt;View Site 1</option>
        <option value="http://stackoverflow.com/"&gt;View Site 2</option>
        <option value="http://serverfault.com/"&gt;View Site 3</option>
    </select>
</form>

Chad Grant 2009-05-07 11:58:23

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

KyleFarris 2009-05-08 04:46:58

...and indeed it does :) And I've managed to resolve the issue I had with IE closing the pop up too.

BrynJ 2009-05-08 12:49:53

Answer 5

+1 A:

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"&gt;Stackoverflow&lt;/option&gt;
    <option value="http://twitter.com"&gt;Twitter&lt;/option&gt;
    </select>
  </form>
 </BODY>
</HTML>

Gais 2009-05-07 12:12:43

Answer 6

+1 A:

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.

Anonymous 2009-05-07 12:48:26

Thanks for the useful explanation!

BrynJ 2009-05-08 12:48:51

ansaurus

tags:

views:

answers:

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

related questions