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?

• Jonas Grumann: Don't you mean "document.getElementById('deleteRecord').value=listvalue;" ? I think you forgot the .value
• Liam: Do you have multiple watchlistForm(s)?
• GreyCat: Try checking the output of console.log(document.getElementById('watchlistForm').submit) - if that's not a function, it will give you a clue.
• Jonas Grumann: I tried your snippet with the ".value" fixed and I see a post request firing in the console. The request fails because I don't have the endpoint php but at least it fires.
• baao: jsfiddle.net/9ae3o4xj it works here if you add .value as commented above

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.

• Mike Cluck: Oh wow, that makes sense. I forgot you could access form elements by name through the form itself.