problème avec les boîtes de sélection - secondes options basées sur la première sélection

Question

Je viens de poster une question à propos de l'ouverture dans une nouvelle fenêtre, mais si j'utilise window.location cela ne fonctionne pas ?? Y at-il un problème avec mon javascript?

<script type="text/javascript"> 

function setOptions(chosen){ 

var selbox = document.formName.table; 
selbox.options.length = 0; 

if (chosen == " ") { 
selbox.options[selbox.options.length] = new Option('No diploma selected',' '); 
} 
if (chosen == "1") { 
selbox.options[selbox.options.length] = new Option('first choice - option one','http://www.pitman-training.com'); 
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo'); 
} 
if (chosen == "2") { 
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone'); 
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo'); 
selbox.options[selbox.options.length] = new Option('second choice - option three','twothree'); 
selbox.options[selbox.options.length] = new Option('second choice - option four','twofour'); 
} 
if (chosen == "3") { 
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone'); 
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo'); 
} 
} 

</script> 

Son un peu en désordre, je sais ...

<form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 

<select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);"> 
<option value=" " selected="selected">Please select a diploma</option> 
<option value="1">First Choice</option> 
<option value="2">Second Choice</option> 
<option value="3">Third Choice</option> 
</select> 

<select name="table" size="1" > 
<option value=" " selected="selected">No diploma selected</option> 
</select> 

<input type="submit" onclick="ob=this.form.table;window.location(ob.options[ob.selectedIndex].value)"/> 


</form> 

pour être honnête, je ne suis pas content de ce que je veux quand même un moyen de cacher le bouton Soumettre jusqu'à ce que la seconde zone sélectionnée a été sélectionné ... mais je ne suis pas un expert Java! Est-ce que quelqu'un peut-il me montrer la bonne direction?

Answer 1

Je ne peux pas dire si vous dites que vous voulez dans une nouvelle fenêtre ou non, donc ...

Si vous voulez une nouvelle fenêtre puis

window.open(ob.options[ob.selectedIndex].value) 

Si vous voulez que la même fenêtre puis

window.location = ob.options[ob.selectedIndex].value 

Answer 2

J'ai quelques suggestions.

• Vous devriez capturer l'événement onsubmit de votre formulaire plutôt que l'événement onclick de votre bouton soumettre. Les formulaires peuvent être envoyés sans utiliser le bouton (par exemple, en appuyant sur Entrée) afin que votre événement onclick ne le soit pas. La fonction window.open(url) permet d'ouvrir une nouvelle fenêtre. Plutôt que de masquer le bouton d'entrée (ce qui n'empêchera pas les utilisateurs du clavier de soumettre le formulaire), dans l'événement onsubmit, assurez-vous que les options sont sélectionnées et return false; si elles ne le sont pas.
• Vous pouvez consommer et accélérer votre code en ne faisant pas autant de recherches sur les objets élémentaires.
• Utilisez this à l'intérieur d'un attribut de gestionnaire d'événement pour obtenir un handle de l'élément de déclenchement, par ex. <select name="optone" size="1" onchange="setOptions(this.options[this.selectedIndex].value);">

Exemple:

document.formName.table.onsubmit = function() 
{ 
    if (this.table.selectedIndex == 0 && this.optone.selectedIndex == 0) 
    { 
     // This is just an example. Showing a div would be better than alert(); 
     alert("You haven't filled in the required elements"); 

     // Cancel submission by returning false 
     return false; 
    } 
    ob=this.table; 

    // Open a new window and go to URL: 
    window.open(ob.options[ob.selectedIndex].value); 

    // Go to URL in current window: 
    // window.location = ob.options[ob.selectedIndex].value; 
} 
function setOptions(chosen){  
    var selbox = document.formName.table; 
    var options = selbox.options; 
    var cOpt = options.length = 0; 

    if (chosen == " ") { 
     options[cOpt++] = new Option('No diploma selected',' '); 
    } 
    else if (chosen == "1") { 
     options[cOpt++] = new Option('first choice - option one','http://www.pitman-training.com'); 
     options[cOpt++] = new Option('first choice - option two','onetwo'); 
    } 
    else if (chosen == "2") { 
     options[cOpt++] = new Option('second choice - option one','twoone'); 
     options[cOpt++] = new Option('second choice - option two','twotwo'); 
     options[cOpt++] = new Option('second choice - option three','twothree'); 
     options[cOpt++] = new Option('second choice - option four','twofour'); 
    } 
    else if (chosen == "3") { 
     options[cOpt++] = new Option('third choice - option one','threeone'); 
     options[cOpt++] = new Option('third choice - option two','threetwo'); 
    } 
} 

Utilisez toujours else if le cas échéant et essayer de réduire à des noeuds DOM lookups et leurs propriétés (par exemple selbox.options.length). cOpt++ permet d'utiliser la valeur actuelle de cOpt, puis de l'incrémenter de 1, vous n'avez donc pas besoin de vérifier la longueur de selbox.options.