How to perform postback operation in ASP.Net Webforms

Question

I want to perform a postback to get data, when the <div id="roomTypeContainer"> is clicked.
So, wrapped it inside a LinkButton. When I click on the div, there is an error in the browser console.

Uncaught TypeError: theForm.submit is not a function

The repeater is in a user control

ascx:

<asp:Repeater ID="rpRoomTypes" runat="server" ItemType="Sitecore.Data.Items.Item"
 OnItemDataBound="rpRoomTypes_ItemDataBound" OnItemCommand="rpRoomTypes_ItemCommand">
   <ItemTemplate>
     <sc:EditFrame ID="efRoomType" runat="server" >
      <asp:LinkButton ID="lnkRoomType" runat="server" CommandName="cmd_RoomType">
       <div id="roomTypeContainer" runat="server">
          ..some html
       </div> 
      </asp:LinkButton>
    </sc:EditFrame>
  </ItemTemplate> 
</asp:Repeater>

UPDATE: When I click the error link in browser console, this code is shown in console:

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['mainform'];
if (!theForm) {
    theForm = document.mainform;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit(); //error here
    }
}
</script>

The above code seems to be generated by Sitecore. mainform is the id of form in aspx page.

Ran the same script in console and here is the result

Check name of your form. It should be unique. If some element on page have same name as your form then this error could appear. — Anton, Apr 07 '16 at 12:25
The master page(aspx) has the form tag with id 'mainform'. This Usercontrol does not have any forms — sukesh, Apr 07 '16 at 12:46
Can you post the block of code where theForm.submit is being called? — Jay S, Apr 07 '16 at 13:06
Are you able to debug the javascript in your browser so you can get to the point of code that is throwing your error? It is likely source code in the page markup generated by .NET — Jay S, Apr 07 '16 at 13:14
Add consoloe.log(theForm) before error and check what you will see — Anton, Apr 07 '16 at 13:45
I executed the script and also `theForm` to see if it was valid. Plz see the pic. — sukesh, Apr 07 '16 at 14:06
Check out main layout aspx page, whatever you have set it as, and check the id set on the form element is like so: `
`. If it is called something else then rename it. — jammykam, Apr 07 '16 at 14:29
If you try this in another browser (Firefox/Chrome/IE) does it work? — Jay S, Apr 07 '16 at 14:30
Try `console.log(theForm.submit)` to be sure that it returns a function — Taleeb, Apr 11 '16 at 07:16
What @Taleeb wrote. Maybe you are mistakenly assigning something that is not a function to `theForm.submit` in some other script on the page..? — user1429080, Apr 11 '16 at 08:43
@Qwerty I think you should launch your page locally and then in browser see generated source code of you page for something like id="submit". If that exist just rename that element in your code and then the submit function will work again. — Lesmian, Apr 12 '16 at 11:49
In your browser's Developer Tools, put a breakpoint on the `theForm.submit();` line. Add a watch for `theForm` and `theForm.submit` (without parentheses), and post the results. — Michael Liu, Apr 13 '16 at 14:55

score 1 · Answer 1 · answered Apr 18 '16 at 04:02

Looking at this line in the generated JS:

var theForm = document.forms['mainform'];

theForm is a global variable set at page load, but I wonder if the form element is not yet created at that time (or comes after the script block - that would cause the issue too). Then, when the function runs in the doPostback, theForm.submit function will not exist since, even though the form is now in existence, the variable referencing it is still null.

In the console, just type theForm and press enter (without assigning it in the console) and see what it is set to. If it's null/undefined, then that's what's happening, in which case more info is needed to diagnose the failure (for example, why is the form not yet created).

This would be my guess as well the form might not exist yet at the time the javascript is executed. — Ruben Verschueren, Apr 19 '16 at 11:11

score 0 · Answer 2 · answered Apr 07 '16 at 21:24

0

Use name="mainform" instead of id="mainform" document.forms['something'] works using name, but not id

answered Apr 07 '16 at 21:24

Anton

9,682
11
38
68

It's the same even with `name=mainform` – sukesh Apr 11 '16 at 04:43
Do you have
? But still document.forms['mainform'].submit() in console return 'not a function'?
– Anton Apr 11 '16 at 06:22
Yes that is right. It still shows the same error as in question – sukesh Apr 11 '16 at 06:22

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

"Submit is not a function" error in JavaScript

"submit is not a function" means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.

When you name the button submit, you override the submit() function on the form.

Make sure that there is no name="submit" or id="submit" in the form.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 13 '16 at 03:07

stenlytw

938
13
18

score 0 · Answer 4 · answered Apr 17 '16 at 17:19

0

Can you show browser HTML code generated by your repeater? I suspect that your UserControl sc:EditFrame generates iframe and your LinkButton works in context of a document loaded into this iframe (which doesn't contain form).

answered Apr 17 '16 at 17:19

Alex Kudryashev

9,120
3
27
36

score 0 · Answer 5 · answered Apr 17 '16 at 21:17

0

the form.onSubmit is an event listener for the submit event, if no handler is set during execution then form.onsubmit() will throw an error.

answered Apr 17 '16 at 21:17

codeislife

1,446
1
10
7

score 0 · Answer 6 · answered Apr 18 '16 at 00:12

Your use case is pretty vague. Why do you want to put a div inside a LinkButton and that too within a repeater? Is it even clickable? Have you tested with an alert on click of the div?

Also please post the rpRoomTypes_ItemDataBound and the rpRoomTypes_ItemCommand methods.

How to perform postback operation in ASP.Net Webforms

6 Answers6