Home/ Questions/Q 220227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T18:55:08+00:00

if you have 3 forms (shown below) and you set two of forms to

  • 0

if you have 3 forms (shown below) and you set two of forms to not to display (display:none;) and you use javascript to toggle through each form, the forms that were set to hidden, when you set them to visible and you try to submit a form by pressing enter, it won`t submit.

the only form that will submit if the first form that is visible by default.

this works in ie7 and ie6, but not ie8 (go figure)

i am using jquery to hide and show my forms, but this should not be an issue.
i have as well tried using different css rules (like visibility:hidden) and still the same problem;

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m afraid I don’t have IE 8 here to test on, but you might try different CSS properties as a workaround:

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

    This would have the same visual effect as display: none;.

    • 0