Javascript - formar seleccione Abrir URL elemento en una nueva ventana y enviar el formulario

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

Pregunta

ACTUALIZADO - por favor lea los detalles a continuación pregunta original

Tengo un elemento de formulario select con varias direcciones URL, que yo quiero abrir una nueva ventana cuando se selecciona - para hacer esto tengo el código siguiente en el evento onchange del elemento: 

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

Esto funciona bien. Pero también quiero enviar el formulario cuando se cambia este valor elemento select - He intentado varias cosas, pero me parece que no puede conseguir que funcione

.

Tengo jQuery, así que si es más fácil de lograr a través de ese entonces está bien.

Actualizar - Me acabo de dar cuenta que hay otro problema con lo anterior, porque algunas de las direcciones URL se utiliza realmente para generar y archivos PDF de salida, y éstos no trabajo - se abren y luego cerrar inmediatamente (al menos en IE7).

Actualización 07/05/09 - ahora que he abierto una recompensa por esta cuestión como que realmente necesita para llegar a una solución de trabajo. Me dio originalmente en torno al tema, mostrando vínculos en lugar de un elemento select de la forma, pero esto ya no es factible.

La razón que necesito lo anterior es que tengo un gran número de archivos que pueden necesitar para ser visto / impreso, demasiados para mostrar razonablemente como una lista de enlaces. Necesito enviar el formulario para registrar el hecho de un archivo en particular ha sido visto / impreso, a continuación, mostrar un registro del historial de archivos en el formulario - Me siento cómodo con la consecución de este lado de las cosas, por lo que no requieren la asistencia allí, pero pensé que ayudaría a colocar el contexto.

Por lo tanto, para aclarar mis necesidades - Necesito un botón 'Ver' seleccione el elemento y la forma que al hacer clic no sólo lanzar una descarga de archivos en una nueva ventana (tenga en cuenta el problema anterior que enfrenté cuando estos archivos son archivos PDF), pero también, envíe el formulario que contiene el elemento de selección.

¿Fue útil?

Solución

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

Otros consejos

Puede utilizar this.form.submit() para activar el envío de formulario: 

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

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

Sólo a prueba el ejemplo de Aron y funciona bien, así que yo sugeriría el error que está recibiendo es de código fuera de su evento onchange. Pruebe el siguiente ejemplo de trabajo y ver si le da el mismo 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>

Basede en lo que has descrito, su margen de beneficio probablemente se ve algo como esto: 

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

Debido a la tradición del navegador es agregar el objeto del elemento de formulario (propiedades) como nombres de entradas, el 'submit' propiedad de las máscaras de entrada inherente 'enviar' propiedad o método del formulario. Esto se puede corregir cambiando el nombre, aunque sea temporalmente, el elemento de entrada (suponiendo que hay sólo una): 

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

Si hay más de uno - por ejemplo, una serie de botones de radio denominan "submit" por alguna razón - a continuación, .elements [ 'Enviar'] debe ser un elemento de colección, que es como una matriz, la cual se puede lazo a hacer lo mismo.

Usted sabe que puede establecer un atributo de destino para la forma? 

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

Perdona el mal probablemente Javascript. Que tienden a hacer más jQuery en estos días, así que estoy oxidado en la vainilla Javascript. Pero se entiende la idea general.

Si bien no estoy familiarizado con jQuery, usted debería ser capaz de hacer algo como esto (Prototipo de estilo): 

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

A pesar de que he tenido algunos problemas impares con la presentación de formularios con Javascript antes, así que si eso no funciona, usted podría intentar llamar click() o el equivalente de fireEvent('click') el botón de envío del formulario, así: 

$('submit-button').fireEvent('click');
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top