click() a button named 'submit' in Javascript

Question

I have this HTML:

<input type="submit" name="submit" value="Invoeren" accesskey="s" class="buttons"/>

I'd like to click() it. I can not change anything on the HTML-side. When I do getElementById("submit").click(), I get this:

>>> document.getElementById("submit").click();
Cannot convert 'document.getElementById("submit")' to object

Any hints?

Answer 1

Since you can't edit the actual HTML (to add the id attribute), and you want this to be cross-browser, you could loop over all of the input elements and check the type and value attributes until it matches your submit button:

function get_submit_button() {
    var inputs = document.getElementsByTagName('INPUT');
    for(var i=0; i < inputs.length; i++) {
        var inp = inputs[i];
        if(inp.type != 'submit') continue;
        if(inp.value == 'Invoeren' && inp.name == 'submit') {
            return inp;
            break; // exits the loop
        }
    }
    return false;
}

function click_submit() {
    var inp = get_submit_button();
    if(inp) inp.click();
}

Answer 2

NOTE: NEVER call anything in a form "submit"! It will hide the form's submit event from script.

You have many ways of accessing the button

document.querySelector("[name=submit]").click(); // first named button

document.querySelector("#form [name=submit]").click(); // in form with id="form"

Old IEs would shadow the name so you could use getElementById on a name but it is not recommended.

Older methods:

document.getElementsByName("submit")[0].click();

where 0 is the first element on the page named submit.

document.forms[0].elements[0].click(); 

where forms[0] is the first form and elements[0] is the first element

or

document.getElementsByTagName("form")[0].elements[0].click(); 

where ("form")[0] is the first form on the page and elements[0] is the first element

Answer 3

You are using getElementById but you don't have an id attribute on your input. Just because IE totally fubars the namespace and treats name attributes somewhat like id attributes does not mean that you should.

<input id="submit" ... />
...
document.getElementById('submit').click();

Answer 4

The immediate issue i can see is that you have NOT assigned id submit to your input, so this won't work:

document.getElementById("submit").........

unless you specify the id as well:

<input id="submit" type="submit" name="submit" value="Invoeren" accesskey="s" class="buttons"/>

Answer 5

There is no element with the ID "submit" -- you have an element named "submit". As Dylan points out, jQuery would make everything easier, but you can fix it yourself. If you cannot change the HTML, do something like this:

var buttons = document.getElementsByTagName("submit");
for (var i=0; i < buttons.length; i++) {
  var button = buttons[i];
  if (button.getAttribute("name") === "submit") {
     button.onclick = whatever ...

Answer 6

Your input has no id attribute so it can't be retrieved by id. Use this instead.

<input id="submit" type="submit" name="submit" value="Invoeren" accesskey="s" class="buttons"/>

Answer 7

You might want to look into jQuery. It makes everything so, so much easier.