Javascript - formare selezionare elemento url aperto in una nuova finestra e presentare il modulo

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

Domanda

AGGIORNAMENTO - si prega di leggere altri dettagli più avanti domanda iniziale

Ho un select elemento di modulo con vari gli URL, che voglio aprire in una nuova finestra quando selezionata - per fare questo ho il seguente codice nell'evento OnChange dell'elemento: 

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

Questo funziona bene. Ma voglio anche inviare il modulo quando si cambia questo valore elemento di selezione - Ho provato diverse cose, ma io non riesco a farlo funzionare

.

Ho jQuery, quindi se è più facile da raggiungere via che allora va bene.

Aggiornamento - ho appena capito che c'è un altro problema con quanto sopra, perché alcuni degli URL sono effettivamente utilizzati per generare file PDF e di uscita, e queste non funzionano - hanno aperto e poi subito vicino (almeno in IE7).

UPDATE 07/05/09 - Ora ho aperto una taglia per questa domanda, come ho davvero bisogno di trovare una soluzione di lavoro. Ho fatto in origine aggirare il problema mediante la visualizzazione di link, invece di un elemento di selezione forma, ma questo non è più fattibile.

La ragione per cui ho bisogno di quanto sopra è che ho un gran numero di file che potrebbe aver bisogno per essere visualizzato / stampato, troppi per visualizzare ragionevolmente come una lista di link. Ho bisogno di inviare il modulo per registrare il fatto un particolare file è stato visto / stampata, quindi visualizzare un log della cronologia dei file sulla forma - mi sento a mio agio con il raggiungimento di questo lato delle cose, in modo da non richiedere l'assistenza lì, ma ho pensato che sarebbe utile per posizionare il contesto.

Quindi, per chiarire le mie esigenze - Ho bisogno di un select elemento form e il pulsante 'Visualizza' che se cliccato non solo lanciare un file di download in una nuova finestra (notare il problema di cui sopra ho affrontato quando questi file erano PDF), ma anche inviare il modulo che contiene l'elemento di selezione.

È stato utile?

Soluzione

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

Altri suggerimenti

È possibile utilizzare this.form.submit() per attivare il modulo di conferma: 

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

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

appena testato esempio di Aron e funziona benissimo, quindi vorrei suggerire l'errore che si sta ottenendo è da codice esterno del vostro evento onchange. Provate l'esempio seguente di lavoro e vedere se si ottiene lo stesso errore. 

<!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 su quello che hai descritto, il markup probabilmente simile a questa: 

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

A causa tradizione del browser è quello di aggiungere all'oggetto del elemento del modulo (come proprietà) nomi ingressi, 'Invia' proprietà dalle maschere di input del form intrinseca proprietà 'invia' o metodo. È possibile correggere il problema, rinomina, anche temporaneamente, l'elemento di input (supponendo che c'è solo l'uno): 

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

Se ci sono più di uno - ad esempio, una serie di pulsanti di opzione chiamato "Invia" per qualche ragione - allora .elements [ 'submit'] dovrebbe essere un elemento di raccolta, che è come una matrice, che si può cappio sopra per fare la stessa cosa.

Lo sai che puoi impostare un attributo target per 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 il male probabilmente Javascript. Io tendo a fare di più in questi giorni jQuery quindi sono arrugginito su vaniglia Javascript. Ma si ottiene l'idea generale.

Mentre io non sono a conoscenza di jQuery, si dovrebbe essere in grado di fare qualcosa di simile (Prototype-style): 

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

Anche se ho avuto alcuni problemi dispari con la presentazione delle forme con Javascript prima, quindi se non funziona si potrebbe provare a chiamare click() o l'equivalente di fireEvent('click') sul pulsante di invio del modulo, in questo modo: 

$('submit-button').fireEvent('click');
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top