Javascript/DOM Why is does my form not support submit()?_问答_开发者

This is my first time working with asp.net and javascript, so I don't know a lot of the nice web resources, or much about debu开发者_StackOverflowgging javascript. I'm looking to find out why on line oFormObject.submit(); Microsoft JScript runtime error: Object doesn't support this property or method.

I'm using links to function as buttons because I'm terrible at aesthetics and I think links will look more professional than a table of 50 buttons. I read that this solution may cause issues with browsers trying to pre-render my links and causing lots of extra traffic and problems, but the Css I found to make a button look like a link seemed to have alignment and spacing issues.

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
  Defect Severity Assessment Code List
</title></head>
<body>
<form name="form1" method="post" action="CodeList.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>

<div>
<p>Welcome Maslow</p><SCRIPT language="JavaScript">
function submitForm(intId)
{ oFormObject= document.getElementById(""form"+_StrCodeId + @""");
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
  oFormObject.submit();
}
</SCRIPT> <form method="post" action="CodeAssessment.aspx" id="formcodeId">
<table name="codeId" id="codeId" value="0" type="hidden" class="linkTable">
<tr>
   <th>Completed</th><th>Code</th><th>Description</th><th>Code Present Since</th>
</tr><tr class="row">
<td><input name="401" type="checkbox" value="401" DISABLED /></td><td><a href="javascript:submitForm(0);">401</a></td><td>Missing Original Document/form</td><td>2009.10.16</td>
</tr><tr class="rowAlternate">
<td><input name="NDMI" type="checkbox" checked="checked" value="NDMI" DISABLED /></td>
<td><a href="javascript:submitForm(1);">NDMI</a></td>
<td>Note date is missing</td>    <td>2009.10.15</td>
</tr>
 </table><input type="submit" />
</form>
</div>
</form>
</body>
</html>

If I change the script line to oFormObject= document.forms[0]; it submits the asp.net's viewstate form posting back to the same page instead of where I want to go. so the rest of the code on the page appears to work.

So we solved this in another answer, but using comments, so this is just incase anyone else has the same problem,

It's all down to the form having a runat="server" attribute, this generates the viewstate input, then when the form is submitted to the second page, it tries to fill out the page with the details from the viewstate, however as in this case the form is submitted to another page, the two pages don't match up and when it tries to deal with the viewstate input it throws the error.

The solution is to either remove the runat="server" attribute on the form, or to set EnableViewStateMac="False" attribute from the second page.

I'm not really into asp.net but into javascript, so I'd say there's a parse error in

oFormObject= document.getElementById(""form"+_StrCodeId + @""");

the quotes just don't match. i'd say you try to change it to

oFormObject= document.getElementById("formcodeId");

instead

Ok apparently you can't nest forms in html/DOM. I have changed my asp.net provided form and now it navigates but crashes saying

Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
 Defect Severity Assessment Code List
</title></head>
<body>
<form name="form1" method="post" action="CodeAssessment.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>

<div>
<p>Welcome Maslow</p><SCRIPT language="JavaScript">
function submitForm(intId)
{ oFormObject= document.forms[0];
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
oFormObject.submit();
}

</SCRIPT> <table name="codeId" id="codeId" value="0" type="hidden" class="linkTable">
<tr>
    <th>Completed</th><th>Code</th><th>Description</th><th>Code Present Since</th>
</tr><tr class="row">
    <td><input name="401" type="checkbox" value="401" DISABLED /></td>
<td><a href="javascript:submitForm(0);">401</a></td><td>Missing Original Document/form</td><td>2009.10.16</td>

</tr><tr class="rowAlternate">
    <td><input name="NDMI" type="checkbox" checked="checked" value="NDMI" DISABLED /></td>
<td><a href="javascript:submitForm(1);">NDMI</a></td><td>Note date is missing</td><td>2009.10.15</td>
</tr>
</table><input id="testSubmit" type="submit" />
</div>
</form>
</body>
</html>

I don't see what the issue is now, the code you posted in your answer worked fine for me, only problem I have is that I dont have a CodeAssesment.aspx page so I get a HTML404 error, but thats it. Your original code document.getElementById(""form"+_StrCodeId + @"""); was not valid, and you don't have a variable called StrCodeId,

Try

oFormObject = document.getElementById("form"+intId);

Ok solved the crashing, so I put another answer, its because you've copied the source code and used that to create the outline again, I think, as you shouldn't have the hidden input viewstate as part of the page, it gets generated automatically on build. Remove this line and try it

<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>

I trimmed out my dynamic code generation section

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
 Defect Severity Assessment Code List
</title><script type="text/javascript">
function submitForm(intId)
{ oFormObject= document.forms[0];
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
  oFormObject.submit();
}
</script> </head>
<body>
<form name="form1" method="post" action="CodeAssessment.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzMxMzk5NjY5ZGTQg8pLRPHaRM4Idd6LyKDmFvMpNA==" />
</div>

<div>
<input type="submit" />
</div>
</form>
</body>
</html>

Hey look there's another div again. I don't see where this is coming from. and I'm still getting Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.