views:

1272

answers:

2

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

I see you're using jQuery - you could probably do something along the lines of

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

That should ensure when you hit enter that a form submits.

gnarf
the only reason why this solution wouldn't if you had an auto complete drop down. when you hit enter to select an item from the drop down..it would just submit the form.you wouldn't want that in some cases
dezwald
+1  A: 

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

Paul D. Waite