Javascript - форма выберите элемент, откройте URL-адрес в новом окне и отправьте форму

StackOverflow https://stackoverflow.com/questions/564980

Вопрос

ОБНОВЛЕННЫЙ - пожалуйста, прочтите более подробную информацию ниже первоначального вопроса

У меня есть элемент формы выбора с различными URL-адресами, который я хочу открыть в новом окне при выборе - для этого у меня есть следующий код в событии onchange элемента:

window.open(this.options[this.selectedIndex].value,'_blank');

Это работает нормально.Но я также хочу отправлять форму при изменении значения этого элемента select - я пробовал разные вещи, но, похоже, у меня не получается заставить это работать.

У меня есть jquery, так что если с его помощью этого легче достичь, то все в порядке.

Обновление - я только что понял, что есть еще одна проблема с приведенным выше, потому что некоторые URL-адреса фактически используются для создания и вывода PDF-файлов, и они не работают - они открываются, а затем немедленно закрываются (по крайней мере, в IE7).

ОБНОВЛЕНИЕ 07/05/09 - Сейчас я открыл награду за этот вопрос, так как мне действительно нужно найти рабочее решение.Изначально я решил обойти проблему, отображая ссылки вместо элемента выбора формы, но это больше невозможно.

Причина, по которой мне нужно это вышесказанное, заключается в том, что у меня есть большое количество файлов, которые, возможно, потребуется просмотреть / распечатать, слишком много, чтобы разумно отображать в виде списка ссылок.Мне нужно отправить форму, чтобы зафиксировать факт просмотра / распечатки определенного файла, затем отобразить журнал истории файлов в форме - мне удобно работать с этой стороной дела, поэтому помощь там не требуется, но я подумал, что это поможет разместить контекст.

Итак, чтобы уточнить мои требования - мне нужен элемент выбора формы и кнопка "Просмотр", при нажатии на которую не только запускается загрузка файла в новом окне (обратите внимание на вышеупомянутую проблему, с которой я столкнулся, когда эти файлы были PDF-файлами), но и отправляется форма, содержащая элемент выбора.

Это было полезно?

Решение

Вот ты иди

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

Другие советы

Вы можете использовать this.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, и он работает нормально, поэтому я бы предположил, что ошибка, которую вы получаете, связана с кодом вне вашего события onchange.Попробуйте приведенный ниже рабочий пример и посмотрите, получите ли вы ту же ошибку.

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

Основываясь на том, что вы описали, ваша разметка, вероятно, выглядит примерно так:

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

Поскольку традиция браузера состоит в том, чтобы добавить к именам входов элемента формы (как свойства), свойство «отправить» из входного маскируется, присущее свойству или методу формы «отправить». Вы можете исправить это, переименуя, даже временно, входной элемент (при условии, что есть только один):

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

Если есть более одного - например, серия радиопроизводительных кнопок, названных «отправить» по какой -то причине - тогда .Elements ['Ready'] должна быть коллекцией элементов, которая похожа на массив, который вы можете зацикливаться на Сделайте то же самое.

Вы знаете, что можете установить целевой атрибут для формы?

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

Прости, вероятно, плохой JavaScript. В наши дни я склонен делать больше jQuery, поэтому я ржаво на ванильном JavaScript. Но вы получаете общую идею.

Хотя я не знаком с jQuery, вы сможете сделать что-то подобное (стиль прототипа):

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

Хотя у меня было несколько странных проблем с отправкой форм с JavaScript, поэтому, если это не сработает, вы могли бы попробовать позвонить click() или эквивалент fireEvent('click') На кнопке отправки вашей формы, например:

$('submit-button').fireEvent('click');
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top