Javascript - forme élément select url ouvert dans une nouvelle fenêtre et soumettre le formulaire

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

Question

MISE À JOUR - s'il vous plaît lire ci-dessous plus de détails question initiale

J'ai un élément de formulaire de sélection avec différents urls, que je veux ouvrir dans une nouvelle fenêtre lorsqu'elle est sélectionnée - pour ce faire je le code suivant dans l'événement onchange de l'élément: 

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

Cela fonctionne très bien. Mais je veux également soumettre le formulaire lors de la modification de cette valeur de l'élément de sélection - J'ai essayé différentes choses, mais je ne peux pas sembler le faire fonctionner

.

Je jquery, donc s'il est plus facile d'atteindre via ce c'est très bien.

Mise à jour - je viens de réaliser il y a un autre problème avec ce qui précède, parce que certains des urls sont effectivement utilisés pour générer et pdfs de sortie, et ceux-ci ne fonctionnent pas - ils ouvrent et fermer immédiatement (au moins dans IE7).

Mise à jour 07/05/09 - J'ai maintenant ouvert une prime pour cette question que je vraiment besoin de trouver une solution de travail. Je ne l'origine contourner le problème en affichant des liens au lieu d'une forme élément select, mais ce n'est plus possible.

La raison pour laquelle j'ai besoin ce qui précède est que j'ai un grand nombre de fichiers qui pourraient avoir besoin d'être vu / imprimé, un trop grand nombre pour afficher raisonnablement comme une liste de liens. Je dois soumettre le formulaire pour enregistrer le fait un fichier particulier a été vue / imprimé, puis afficher un journal de l'historique des fichiers sur le formulaire - Je suis à l'aise avec la réalisation de ce côté des choses, il ne faut pas besoin d'assistance communautaire, mais je pensais qu'il serait utile de placer le contexte.

Alors, pour clarifier mes besoins - je besoin d'un formulaire élément de sélection et bouton « View » que lorsque vous cliquez dessus non seulement lancer un téléchargement de fichier dans une nouvelle fenêtre (notez la question ci-dessus je faisais face lorsque ces fichiers sont au format PDF), mais également soumettre le formulaire qui contient l'élément de sélection.

Était-ce utile?

La solution

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

Autres conseils

Vous pouvez utiliser this.form.submit() pour déclencher la forme soumettre: 

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

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

Il suffit de tester l'exemple d'Aron et il fonctionne très bien, je vous conseille donc l'erreur que vous obtenez est de code en dehors de votre événement onchange. Essayez l'exemple de travail ci-dessous et voir si vous obtenez la même erreur. 

<!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 sur ce que vous avez décrit, votre balisage ressemble probablement quelque chose comme ceci: 

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

Parce que la tradition du navigateur est d'ajouter à l'objet de l'élément de formulaire (comme propriétés) les noms des entrées, le « soumettre » la propriété des masques d'entrée inhérente de propriété « soumettre » ou la méthode du formulaire. Vous pouvez corriger cela en renommant, même temporairement, l'élément d'entrée (en supposant qu'il ya juste une): 

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

S'il y a plus d'un - par exemple, une série de boutons radio nommés « Soumettre » pour une raison - alors .elements [ « submit »] devrait être une collection d'éléments, ce qui est comme un tableau, que vous pouvez boucle sur faire la même chose.

Vous savez que vous pouvez définir un attribut cible pour la forme? 

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

Pardonnez probablement mauvais Javascript. J'ai tendance à faire plus jQuery ces jours donc je suis rouillé sur la vanille Javascript. Mais vous avez l'idée générale.

Alors que je ne suis pas familier avec jQuery, vous devriez être en mesure de faire quelque chose comme ça (style Prototype): 

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

Bien que j'ai eu quelques problèmes étranges avec la présentation des formulaires avec Javascript avant, si cela ne vous pas pu travailler essayer d'appeler click() ou l'équivalent de fireEvent('click') sur le bouton d'envoi de votre formulaire, comme suit: 

$('submit-button').fireEvent('click');
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top