Unable to `submit()` an html form after intercepting the submit with javascript

Question

I'm trying to intercept the submission of a form in order to change the value of my keywords label.

I have the following code:

<HTML>
<FORM name="searchForm" method="get" action="tmp.html" >
<input type="text" name="keywords" />
<input type="button" name="submit" value="submit" onclick="formIntercept();"/>
</FORM>
<SCRIPT language="JavaScript">
document.searchForm.keywords.focus();
function formIntercept( ) {
    var f = document.forms['searchForm'];
    f.keywords.value = 'boo';
    f.submit();
};
</SCRIPT>
</HTML>

When I run this in chrome and click the submit button the keywords label changes to boo, but the javascript console says:

 Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.

How can I submit the form with the manipulated keywords?

What is an <input type="label" /> or more specifically, what did you really mean to put in the type attribute? — Nathan Taylor
– Nathan Taylor, Commented Apr 27, 2010 at 4:50
oops. you're right. changing type="label" to type="text" — Ross Rogers
– Ross Rogers, Commented Apr 27, 2010 at 4:54

Ross Rogers · Accepted Answer · 2012-08-13 17:15:40Z

115

The reason for the error when trying to call form.submit() is that your submit button is called "submit". This means that the "submit" property of your Form object is now a reference to the submit button, overriding the "submit" method of the form's prototype.

Renaming the submit button would allow you to call the submit() method without error.

edited Aug 13, 2012 at 17:15

Ross Rogers

24.5k28 gold badges115 silver badges175 bronze badges

answered Dec 9, 2010 at 11:48

Chris Butler

1,2641 gold badge9 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Benno Over a year ago

You sir, are a GOD! Never knew about this. I was using $('form :submit').click(); and it was crashing firefox while the Firebug console was open. I tried changing to .submit thinking it would bypass the clicking of the button, but it didn't work at all! I saw this, changed the name of the submit button and HEY PRESTO! It works! No more crashing with firebug open either. XOXOXOXOXOXOX!!!

raphie Over a year ago

I think this the answer to the actual question, the error was generated by .submit(), even though the functionality of the application works, the error would've being fixed by changing the name of the submit button without removing f.submit(); Thank you Chris, you rock!

Halil Özgür Over a year ago

Here is a test tool for checking against this (+ few similar things): kangax.github.com/domlint

Sablefoste Over a year ago

Nice validation tool, @HalilÖzgür!

atmd Over a year ago

fantastic stuff, I got stuck with this one, and the name of the submit interfering with the submit() method of the form is something I would have never thought of. every days a school day

|

Jason · Accepted Answer · 2012-04-03 12:15:04Z

9

The problem is that when some element is <input type="submit" name="submit" /> submit() method will not work. The best solution to this situation is to change the name of that submit type input to something else for example button-submit etc.

answered Apr 3, 2012 at 12:15

Jason

911 silver badge1 bronze badge

Comments

Jacob Relkin · Accepted Answer · 2010-04-27 04:59:40Z

0

<html>
<head></head>
<body>
<form name="searchForm" method="get" action="tmp.html" onsubmit="formIntercept(this);">
<input type="text" name="keywords" />
<input type="submit" name="submit" value="submit"/>
</form>
<script type="text/javascript">
document.searchForm.keywords.focus();
function formIntercept( form ) {
    form.keywords.value = 'boo';
    //form.submit();
}
</script>
</body>
</html>

edited Apr 27, 2010 at 4:59

answered Apr 27, 2010 at 4:54

Jacob Relkin

164k34 gold badges352 silver badges321 bronze badges

4 Comments

Ross Rogers Over a year ago

That was it! Your change of type="button" to type="submit" worked. Thanks!

seanmonstar Over a year ago

i imagine it was the removal of form.submit()

Ross Rogers Over a year ago

Jacob tweaked it further, but merely changing type="button" to type="submit" makes the code work. I'll take his other changes too, however, since it seems less hacky than my way.

Rumpleteaser Over a year ago

I don't think this actually answers the question or even provides the correct work around. The below answer explains why the error occurs.

leif.gruenwoldt · Accepted Answer · 2011-11-24 20:06:15Z

0

See jQuery .submit().

$("form").submit( function() {
   // TODO tweak your form data before it gets sent
});

answered Nov 24, 2011 at 20:06

leif.gruenwoldt

14.1k5 gold badges63 silver badges67 bronze badges

Comments

ainokna · Accepted Answer · 2013-04-05 11:35:51Z

0

Chris Butler explained the issue well.

You can use a native submit method of HTMLFormElement to work around a problem. In your case:

function formIntercept( ) {
    var f = document.forms['searchForm'];
    f.keywords.value = 'boo';
    HTMLFormElement.prototype.submit.call(f);
};

answered Apr 5, 2013 at 11:35

ainokna

87510 silver badges18 bronze badges

Collectives™ on Stack Overflow

Unable to `submit()` an html form after intercepting the submit with javascript

5 Answers 5

7 Comments

Comments

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

4 Comments

Comments

Comments

Linked

Related