JavaScript - Formular Wählen Sie Element Wählen

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

Frage

AKTUALISIERT - Bitte lesen Sie weitere Details unter der Originalfrage

Ich habe ein Auswahlformelement mit verschiedenen URLs, das ich bei Auswahl in einem neuen Fenster öffnen möchte. Dazu habe ich den folgenden Code im Onchange -Ereignis des Elements:

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

Das funktioniert gut. Aber ich möchte auch das Formular einreichen, wenn ich diesen ausgewählten Elementwert ändere - ich habe verschiedene Dinge ausprobiert, aber ich kann es anscheinend nicht zum Laufen bringen.

Ich habe JQuery. Wenn es also einfacher ist, über das zu erreichen, dann ist das in Ordnung.

Update - Ich habe gerade festgestellt, dass es ein weiteres Problem mit dem oben genannten gibt, da einige der URLs tatsächlich verwendet werden, um PDFs zu erzeugen und auszugeben, und diese funktionieren nicht - sie öffnen sich und schließen dann sofort (zumindest in IE7).

Aktualisieren Sie 07/05/09 - Ich habe jetzt ein Kopfgeld für diese Frage geöffnet, da ich wirklich eine funktionierende Lösung finden muss. Ich habe das Problem ursprünglich umgegangen, indem ich Links anstelle eines Formularauswahlelements angezeigt habe, aber dies ist nicht mehr machbar.

Der Grund, warum ich das oben genannte brauche, ist, dass ich eine große Anzahl von Dateien habe, die möglicherweise angezeigt / gedruckt werden müssen, zu viele, um sie als Liste von Links annähern zu anzeigen. Ich muss das Formular einreichen, um die Tatsache aufzuzeichnen, dass eine bestimmte Datei angezeigt / gedruckt wurde, und dann ein Protokoll des Dateiverlaufs auf dem Formular anzeigen - ich bin zufrieden damit, diese Seite der Dinge zu erreichen. Erfordern Sie dort also keine Unterstützung. Aber ich dachte, es würde helfen, den Kontext zu stellen.

Um meine Anforderungen zu verdeutlichen - ich benötige ein Formular aus, das Element und die Schaltfläche "anzeigen" ausgewählt wird, die beim Klicken nicht nur eine Datei herunterladen wird (beachten Sie das obige Ausgabe, mit dem ich ausgesetzt war, als diese Dateien PDFs waren), sondern auch die Senden von der Formular, das das Auswahlelement enthält.

War es hilfreich?

Lösung

Hier gehst du

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

Andere Tipps

Sie können verwenden this.form.submit() Um das Formular auszulösen: Senden:

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

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

Gerade das Beispiel von Aron getestet und es funktioniert einwandfrei. Ich würde daher vorschlagen, dass der Fehler, den Sie erhalten, von Code außerhalb Ihres Onchange -Ereignisses stammt. Versuchen Sie das unten stehende Beispiel und prüfen Sie, ob Sie den gleichen Fehler erhalten.

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

Basiert auf dem, was Sie beschrieben haben, sieht Ihr Markup wahrscheinlich so aus:

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

Da die Browser -Tradition das Objekt des Formularelements (als Eigenschaften) eingibt, maskiert die Eigenschaft "Senden" von der Eingabe die Eigenschaft oder Methode des Formulars "Senden". Sie können dies korrigieren, indem Sie auch vorübergehend das Eingabeelement umbenennen (vorausgesetzt, es gibt nur das eine):

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

Wenn es mehr als eine - z. B. eine Reihe von Quartierschaltflächen mit dem Namen "Senden" aus irgendeinem Grund gibt - dann sollte .Elements ['Subjekt'] eine Elementsammlung sein, die wie ein Array ist, mit dem Sie übergehen können mach das selbe.

Sie wissen, dass Sie ein Zielattribut für das Formular festlegen können?

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

Vergib dem wahrscheinlich schlechten JavaScript. Ich neige dazu, heutzutage mehr JQuery zu machen, also bin ich auf Vanille -JavaScript verrostet. Aber Sie bekommen die allgemeine Idee.

Obwohl ich mit JQuery nicht vertraut bin, sollten Sie in der Lage sein, so etwas zu tun (Prototypstil):

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

Obwohl ich einige seltsame Probleme beim Einreichen von Formularen mit JavaScript zuvor hatte. Wenn das nicht funktioniert, können Sie versuchen, anzurufen click() oder das Äquivalent von fireEvent('click') Auf der Schaltfläche Ihres Formulars senden Sie wie so:

$('submit-button').fireEvent('click');
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top