Javascript - форма, выбрать элемент, открыть URL в новом окне и отправить форму - PullRequest
Новая
       10

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

2 голосов
/ 19 февраля 2009

ОБНОВЛЕНО - пожалуйста, ознакомьтесь с подробностями ниже исходного вопроса

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

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

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

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

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

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

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

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

Ответы [ 6 ]

9 голосов
/ 07 мая 2009

Вот, пожалуйста, 

<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>
3 голосов
/ 19 февраля 2009

Вы можете использовать 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>
2 голосов
/ 07 мая 2009

Только что протестировал пример 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>
1 голос
/ 07 мая 2009

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

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

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

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

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

0 голосов
/ 19 февраля 2009

Хотя я не знаком с 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');
0 голосов
/ 19 февраля 2009

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

<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. Но вы получите общее представление.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...