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?

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?

• javascript
• forms

• 2 Don't you mean "document.getElementById('deleteRecord').value=listvalue;" ? I think you forgot the .value – Jonas Grumann Commented Aug 25, 2016 at 15:44
• Do you have multiple watchlistForm(s)? – Liam Commented Aug 25, 2016 at 15:45
• Try checking the output of console.log(document.getElementById('watchlistForm').submit) - if that's not a function, it will give you a clue. – GreyCat Commented Aug 25, 2016 at 15:45
• 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. – Jonas Grumann Commented Aug 25, 2016 at 15:46
• jsfiddle/9ae3o4xj it works here if you add .value as mented above – baao Commented Aug 25, 2016 at 15:46

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