Form submit from JavaScript is not working

Question

I have a form on a page I want to submit using JavaScript:

<script>
  function deleteFromlist(listname, listvalue)
  {
    if (confirm("Are you sure you want to delete this?")) {
       document.getElementById('fromList').value=listname;
       document.getElementById('deleteRecord').value=listvalue;
       document.getElementById('watchlistForm').submit(); // Fails here
    }
  }
</script>

<form method='POST'
      id='watchlistForm'
      enctype='multipart/form-data'
      action='process.php'>

  <input type='text' name='fromList' id='fromList' value=''>
  <input type='text' name='deleteRecord' id='deleteRecord' value=''>
  <input type='submit' name='submit' value='submit'>
</form>

The JavaScript function is called from a href in an table elsewhere on the page. It correctly populates the input fields, but it fails with this message:

TypeError: document.getElementById(...).submit is not a function
document.getElementById('watchlistForm').submit();

If I replace the doc....submit(); with

alert(document.getElementById('watchlistForm').innerHTML

then I get the expected output in the alert box. Hence

document.getElementById('watchlistForm')

does resolve to the form element.

Adding a submit button on the form works as expected.

Why is this not working and how can I fix it?

Answer 1

Erk, it seems that the button named 'submit' was masking out the method. Changing:

 input type='submit' name='submit' value='submit'

to

 input type='submit' name='submitButton' value='submit'

solved the problem.