IE8 ne pas soumettre sur entrer lorsque vous avez plusieurs formulaires

Question

si vous avez 3 formes (ci-dessous) et vous définissez deux des formes de ne pas afficher (affichage: aucun;) et vous utilisez javascript pour basculer entre chaque formulaire, les formulaires qui ont été mis à masqué, lorsque vous les définissez à visible et que vous essayez de soumettre un formulaire en appuyant sur Entrée, il ne sera pas soumis.

le seul formulaire qui sera envoyé si le premier formulaire est visible par défaut.

cela fonctionne dans IE7 et IE6, mais pas IE8 (allez comprendre)

J'utilise jquery pour cacher et montrer mes formes, mais cela ne devrait pas être un problème. J'ai aussi bien essayé d'utiliser différentes règles CSS (comme la visibilité: caché) et toujours le même problème;

<a href="" onclick="$('#form1').show();$('#form2').hide();$('#form3').hide();">form1</a> 
    <a href="" onclick="$('#form1').hide();$('#form2').show();$('#form3').hide();">form2</a> 
    <a href="" onclick="$('#form1').hide();$('#form2').show();$('#form3').hide();">form3</a> 

<div id="form1"> 
     <form method="get" action="test1/" > 
     <input type="text" name="text1" id="text1" /> 
     <input type="text" name="text2" id="text2" /> 
     <input type="text" name="text3" id="text3" /> 
     <input type="submit" name="submit1" value="submit1"/> 
     </form> 
    </div> 

<div id="form2" > 
<form method="get" action="test2/" style="display:none" > 
<input type="text" name="text4" id="text4" /> 
<input type="text" name="text5" id="text5" /> 
<input type="text" name="text6" id="text6" /> 
<input type="submit" name="submit2" value="submit2"/> 
</form> 
</div> 

<div id="form3" > 
    <form method="get" action="test3/" style="display:none" > 
     <input type="text" name="text7" id="text7" /> 
     <input type="text" name="text8" id="text8" /> 
     <input type="text" name="text9" id="text9" /> 
     <input type="submit" name="submit3" value="submit3"/> 
    </form> 
</div> 

Answer 1

Je crains que je n'ai pas IE 8 ici pour tester, mais vous pouvez essayer différentes propriétés CSS comme une solution de contournement:

<style type="text/css"> 
.hide { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
</style> 

<a href="" onclick="$('#form1').removeClass('hide');$('#form2').addClass('hide');$('#form3').removeClass('hide');">form1</a> 
<a href="" onclick="$('#form1').addClass('hide');$('#form2').removeClass('hide');$('#form3').addClass('hide');">form2</a> 
<a href="" onclick="$('#form1').addClass('hide');$('#form2').removeClass('hide');$('#form3').addClass('hide');">form3</a> 

Cela aurait le même effet visuel que display: none;.

Answer 2

Je vois que vous utilisez jQuery - vous pourriez probablement faire quelque chose le long des lignes de

$(function() { // execute when document ready 
    $("input").keyup(function(e) { 
    if (e.keyCode==13) { // enter 
     var form = $(this).parents("form").get(0); // first <form> tag that is a parent. 
     if (form) form.submit(); 
     return e.preventDefault(); // stop it from activating in other browsers. 
    } 
    }); 
}); 

Cela devrait assurer lorsque vous appuyez sur Entrée qu'une forme présente.