IE8 не будет отправлять при вводе, когда у вас есть несколько форм

Question

, если у вас есть 3 формы (показанные ниже), и вы установили две формы, чтобы они не отображались (display: none;), и вы используете javascript для переключения по каждой форме, формы, которые были установлены как скрытые, когда вы устанавливаете их чтобы увидеть, и вы пытаетесь отправить форму, нажав Enter, он не будет отправлять.

единственная форма, которая будет отправлена, если первая форма отображается по умолчанию.

это работает в ie7 и ie6, но не в ie8 (см. Рисунок)

Я использую jquery, чтобы скрывать и показывать свои формы, но это не должно быть проблемой. я также попытался использовать различные правила CSS (например, видимость: скрытый) и все еще ту же проблему;

<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

Боюсь, у меня нет IE 8 для тестирования, но вы можете попробовать другие свойства CSS в качестве обходного пути:

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

Это будет иметь тот же визуальный эффект, что и display: none;.

Answer 2

Я вижу, что вы используете jQuery - возможно, вы могли бы сделать что-то вроде

$(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.
    }
  });
});

Это должно гарантировать, что при нажатии введите форму, отправляемую.