(javascript) onClick="form.submit(); doesn't work on IE & Opera

Question

Hi. I have a code (see it below). It works perfectly in Firefox: it saves submitted information after clicking __JL_SAVE button and keeps user on same page. But in Internet Explorer & Opera it only redirects to index page (index.php) and doesn't save submitted information. What can I do for solving this problem? Thanks.

Here is my code:

<form action="index.php" id="mosForm" method="post" enctype="multipart/form-data">

    <fieldset>
     <legend><?=__JL_ABOUT_MYSELF?></legend>
     <span class="a" onclick="showHideLegend('about_myself_1')"><?=__JL_EDIT_BLOCK;?></span>
     <div id="about_myself_descr" style="display: block"><?=__JL_SELF_DESCR;?></div>
     <div id="about_myself_1" style="display: none"><?php include "html/about_myself_fill.php"?></div>
     <div id="about_myself_2""><?php include "html/about_myself_show.php"?></div>
    </fieldset>

    <fieldset>
     <legend><?=__JL_ABOUT_MYSELF?></legend>
     <span class="a" onclick="showHideLegend('type_1')"><?=__JL_EDIT_BLOCK;?></span>
     <?php if ($typ_block) {?>
      <?php /* <input type="checkbox" id="jl_type_block" name="jl_type_block" <?php if ($roon_type_block) echo 'checked ';?> /> */ ?>
      <input type="checkbox" id="jl_type_block" name="jl_type_block" disabled <?php  echo 'checked ';?> />
      <label for="jl_type_block"><?=__JL_ON_BLOCK?></label>
     <?php } else {
      echo __JL_OFF_BLOCK;
     }?>

     <div id="about_myself_descr" style="display: block"><?=__JL_SELF_DESCR;?></div>

     <div id="type_1" style="display : none">
      <?php include "html/type.php"?>
     </div>
     <?php if ($typ_block) { ?>
      <div id="type_2">
       <?php include "html/type_show.php"?>
      </div>
     <?php } ?>
     </fieldset>

     <fieldset>
      <legend><?=__JL_INTEREST?></legend>
      <span class="a" onclick="showHideLegend('interest_1')"><?=__JL_EDIT_BLOCK;?></span>
      <?php if ($interest_block) {?>
       <input type="checkbox" id="jl_interest_block" name="jl_interest_block" disabled <?php echo 'checked ';?> />
       <label for="jl_interest_block"><?=__JL_ON_BLOCK?></label>
      <?php } else
       echo __JL_OFF_BLOCK;
      ?>
      <div id="interest_descr" style="display:block"><?=__JL_INTEREST_DESCR;?></div>
      <div id="interest_1" style="display:none">
       <?php include "html/interest.php"?>
      </div>
      <?php if ($interest_block) { ?>
       <div id="interest_2">
       <?php include "html/interest_show.php"?>
       </div>
      <?php } ?>
     </fieldset>


      <input type="submit" name="save" value="__JL_SAVE" onClick="mosForm.submit();" />
      <input type="hidden" name="option" value="com_joomlove" />
      <input type="hidden" id="task" name="task" value="save_info" />
      </form>

Full source available here: http://narkoz.pastebin.com/f4f036f5

Answer 1

1. If you're not changing the behavior of the form, why use JavaScript to submit the form?, you're already in a submit button.

2. You should try giving the form name="mosForm", not just id="mosForm", so that the DOM reference from that event handler can be found.

Answer 2

You should really perform any submission related logic in FORM's "submit" event handler, not in "click" of one of FORM's elements. e.g.:

<form ... onsubmit="return validateForm(this);"> ... </form>

This should ensure that keyboard-based submission goes through your handler; it also gives you an ability to prevent form submission by returning falsy value from an event handler. Any truthy value, on the other hand, will automatically submit a form.