redemption in a blog

Beware of form parameters named ’submit’

August 16, 2006

Well, that is if you are ever going to be submitting the form via Javascript. We had to generate forms on the fly and POST them behind the scenes (i.e. in hidden <iframe>s), and got a decent script going, until a particular case failed for no apparent reason. I finally found that the problem was due to a form parameter named “submit” that overwrote the submit() function of the <form>. That’s, of course, after looking at all the wrong places.

So this doesn’t work:

<form id="ninjaForm" action="/come/get/some" method="post">
  <input id="someParam" name="someParam"
    type="hidden" value="Some value" />
  <input id="submit" name="submit"
    type="hidden" value="Start search" />
</form>
<script type="text/javascript">
  setTimeout("document.ninjaForm.submit()", 200);
</script>

When the browser tries to execute “document.ninjaForm.submit()”, it sees the “submit” form field (which overwrote the submit() function) instead and complains that “submit is not a function”.

Do this instead:

<form id="ninjaForm" action="/come/get/some" method="post">
  <script type="text/javascript">
    // Alias the submit function in case there is a 'submit' param.
    ninjaForm = document.getElementById('ninjaForm');
    ninjaForm.__submit = ninjaForm.submit;
  </script>
  <input id="someParam" name="someParam"
    type="hidden" value="Some value" />
  <input id="submit" name="submit"
    type="hidden" value="Start search" />
</form>
<script type="text/javascript">
  setTimeout("ninjaForm.__submit();", 200);
</script>

That’s one way to workaround, of course, and we can get away with the “ninjaForm” global in this case.

Posted by Chu Yeow at August 16, 2006 SGT | Permalink | | Category: JavaScript