document.forms.gallery_form.submit is not a function

Question

I swear, I have this exact thing working on another page. I'm such a javascript noob it's embarrassing...

function delete_gallery() {
    var gallery = document.getElementById('gallery_id').value;
    var form = document.getElementById('gallery_form');
    form.setAttribute('action', 'index.php?action=delete&section=galleries&id='+gallery);
    document.forms['gallery_form'].submit();
}

Inspecting the element shows that it's updating the action correctly :

<form method="post" action="index.php?action=delete&amp;section=galleries&amp;id=12" name="gallery_form" id="gallery_form"><input type="hidden" value="12" id="gallery_id" name="gallery_id"><p>Name: <input type="text" name="name" value="Woo"></p><p>Description:<br><textarea name="description">Dee</textarea><input type="hidden" value="2" name="artist"></p><p><input type="submit" value="Submit" name="submit">
    </p></form>

Here's the button I use to call the function, it's in a table below the form:

<button onclick="delete_gallery()" type="button">Delete Gallery</button>

EDIT:

I should have mentioned I tried using the getElementById method first, ala forms.submit(); - I had the same error, which is why I switched to using document.forms[] instead.

Answer 1

Try using getElementById:

document.getElementById('gallery_form').submit();

and as you already have a reference to the form just submit it:

function delete_gallery() {
    var gallery = document.getElementById('gallery_id').value;
    var form = document.getElementById('gallery_form');
    form.setAttribute('action', 'index.php?action=delete&section=galleries&id='+gallery);
    form.submit();
}

Answer 2

It is probably because of this inside the form-

<input type="submit" value="Submit" name="submit">

form.submit is being redefined with this input. Just change the name from submit to something else, like submit1 and see if that works.