Reputation: 18980

difference between document.forms[0].onsubmit and jQuery("form").submit

Why does #1 get called when the __doPostback (this dynamic JavaScript function created automatically by ASP.NET when HTML renders.. I think when Event Validation is turned on) is called, but #2 does not get called. Yet, both get called when a button is clicked?

#1

document.forms[0].onsubmit =
     function() {
     alert("called submit 1");
     jQuery("#<%=DDLUCSAddress.ClientID %>").children("option").each(function() {
     jQuery(this).remove();
   });
 };

#2

jQuery("form").submit(function() {
    alert("called submit 2");
    jQuery("#<%=DDLUCSAddress.ClientID %>").children("option").each(function() {
            jQuery(this).remove();
    });
});

Rendered HTML - If I do a Ctrl+K+D on this code, it exceeds the character limit for Stack Overflow, due to the spaces. If you'd like to look at it formatted, place into Visual Studio and press Ctrl+K+D

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<body>
<div id="sessionRefresh" style="display:none">
<script language="JavaScript" type="text/javascript" />
<form id="Form1" onsubmit="javascript:return WebForm_OnSubmit();" action="EditSampleDetails.aspx?LabAccessioningNumber=20120401-1&SampleTypeContext=247" method="post" name="Form1">
<div>
<script type="text/javascript" />
<script type="text/javascript" src="/WebResource.axd?d=EXaDJPTWpPG72bTbiKNh_OuYVox46idcF5L2FHTyi19FoknASLIR-iSOhjjdC3Xa0OCTSAQepXg5UpNN1TPkcREtvcQ1&t=634208598757546466" />
<script type="text/javascript" language="javascript" />
<script type="text/javascript" src="/WebResource.axd?d=4scrxOSLDbM-cgeLoXFnrTxM83c-T6NjCtRi_ghVZlXN0qjfjwNCtjtRWczFgkWux80g8Ip0p9JqPBJcPSlcT3N25CA1&t=634208598757546466" />
<script type="text/javascript" />
<div>
<div id="mainMenu" class="droplinetabs">
<table cellspacing="0" cellpadding="0" border="0">
<table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<td class="uIBoxInternal" colspan="2">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div id="BxWizardTitle" style="border-color:LightSteelBlue;width:100%;">
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl01", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl02", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl03", "", true, "", "", false, true))'></a>
<table cellspacing="0" cellpadding="0" style="border-width:0px;">
<tbody>
<tr>
<td class="leftNavigationCell" style="vertical-align:top;">
<td>
<td valign="top">
<table cellpadding="5">
<tbody>
<tr>
<tr>
<td>
<table cellpadding="5">
<tbody>
<tr>
<tr>
<tr>
<td>
<script type="text/javascript" />
<table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<td class="uIBoxInternal" colspan="2">
<table class="outerTableOfInputs" width="100%" cellspacing="0">
<tbody>
<tr>
<td>
<table class="tableOfInputs" width="100%" cellspacing="0">
<tbody>
<tr>
<td>
<div id="FullDataEntryEditor_UIBSampleInfo" style="border-color:LightSteelBlue;width:100%;">
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl00", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl01", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl02", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl03", "", true, "", "", false, true))'></a>

<table>
<script type="text/javascript" />
<tbody>
<tr>
<tr>
<tr>
<tr>
<td>Additional Client Number</td>
<td>
<input id="FullDataEntryEditor_TxtAdditionalClientNumber" class="LIMSFormField" type="text" autocomplete="off" name="FullDataEntryEditor$TxtAdditionalClientNumber">
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="saveCancelDeleteOuter" width="100%" cellspacing="0">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<input id="EditObjectId986257676" type="hidden" value="" name="EditObjectId986257676">
<input id="CommandName986257676" type="hidden" value="" name="CommandName986257676">
<table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<tr>
<td class="uIBoxInternal" colspan="2">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div id="FullDataEntryEditor_NMNotes_List_ListBox" style="border-color:LightSteelBlue;width:100%;">
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl00", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl01", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl02", "", true, "", "", false, true))'></a>
<a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl03", "", true, "", "", false, true))'></a>
<table id="FullDataEntryEditor_NMNotes_List_ListGrid" cellspacing="0" cellpadding="4" border="1" style="width:100%;border-collapse:collapse;" rules="all">
<tbody>
<tr class="columnHeader">
<tr style="background-color:Yellow;">
<td>
<a href="javascript:listCustomPostback(986257676,'Edit',129285);">bbbbbbbbbbbbbb</a>
</td>
<td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="pdfDisplay"></div>
<script language="javascript" type="text/javascript" />
</td>
</tr>
<tr>
</tbody>
</table>
<script type="text/javascript" />
<input id="FullDataEntryEditor_HiddenSampleType" type="hidden" value="247" name="FullDataEntryEditor$HiddenSampleType">
<input id="FullDataEntryEditor_HiddenAJAXUCSAddressValue" type="hidden" value="7533" name="FullDataEntryEditor$HiddenAJAXUCSAddressValue">
<input id="FullDataEntryEditor_HiddenAJAXUCSAddressText" type="hidden" value="[7533] A1's Primary address, a1_primary_address, madison wi, usa 53719" name="FullDataEntryEditor$HiddenAJAXUCSAddressText">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="saveCancelDeleteOuter" width="100%" cellspacing="0">
<script type="text/javascript" />
<script type="text/javascript" />
<script type="text/javascript" />
</form>
<table class="copyright" align="center">
</body>
</html>

Upvotes: 2

Answers (2)

James Montagne

Reputation: 78630

__doPostback does the following:

theform.onsubmit();

This is taking the value of the onsubmit attribute and executing it. Submit handlers attached with jquery are not set as attributes on the element so they will not fire when this is done.

EDIT:

The relevant piece of code from the jQuery source:

if ( elem.addEventListener ) {
    elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
    elem.attachEvent( "on" + type, eventHandle );
}

This is how jquery attaches its events, not with the onsubmit attribute.

Upvotes: 1

dknaack

Reputation: 60448

The first document.forms[0].onsubmit is not jQuery. It assigned to the first form in your document. It gets fired if you click the submit button on the first form
The second jQuery("form").submit is jQuery but asigned to all forms on your document. It gets fired if you click the submit button on each form within your document

Upvotes: 2

difference between document.forms[0].onsubmit and jQuery(&quot;form&quot;).submit

#1

#2

Answers (2)

Related Questions

difference between document.forms[0].onsubmit and jQuery("form").submit