Javascript/DOM Why is does my form not support submit()? - asp.net

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 debugging 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>401</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>NDMI</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>401</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>NDMI</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==" />
&lt/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.

Related

Image not displaying on webpage just shows source

I am trying to dynamically display an image with text on it. There are quite a few examples of this ie Write Text On An Image in c#
For the time being this is the only thing on a visual studio generated empty winform page.
but I continue to get the same result regardless of the technique is use, so perhaps its a problem with my page?
My output page displays like this:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="index.aspx.vb" Inherits="testtext.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./index.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="G30FF0+ZAHGhkQJeBgR+oRS6OrykggI6KG2KLa2Mf0lna5zKb83yvLWtkQfnBa4AEDqKkttFuBoZ1lWeDcgqUpLSg0hHsyoD0paxcB2U0Js=" />
</div>
<div>
<p><img src="data:image/PNG;Base64, �PNG���
IHDR���5������9堢���sRGB�������gAMA����
�a��� pHYs�������o�d����IDATHKՓ��0�;�9Nvq�lb����D� />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="90059987" />
</div></form>
</body>
</html>
My code looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtmstrong textl">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%Dim cls = New testtext.clsUtil %>
<p><img src="data:image/PNG;Base64, <%cls.MakeImage("Testing") %>" />
</div>
</form>
</body>
</html>
the function .MakeImage ends as follows:
'// SET ALIGNMENT
Dim format As StringFormat = New StringFormat
format.LineAlignment = StringAlignment.Center
'// DRAW THE FONT
Dim oMemStream As MemoryStream = New MemoryStream
g.DrawString(Text, oFont, fgBrush, rectF, format)
System.Web.HttpContext.Current.Response.ContentType = "image/png"
img.Save(oMemStream, ImageFormat.Png)
oMemStream.WriteTo(System.Web.HttpContext.Current.Response.OutputStream)
'// CLEAN UP
img.Dispose()
Return Nothing
End Function
The function .MakeImage appears to be working correctly returning the image but sadly no picture is displayed.
Can you see what I am doing wrong?
two things:
your output is not base64 encoded, and your page output you’ve listed doesn’t have a closing double-quote on src=“...
Let me know if you need code on how to resolve. Deal with base64 first, in case the current output is messing up the page output.
Cheers!
Added:
use Convert.ToBase64String(bytes) to encode your bytes into a Base64 string.
Or, if you want to continue to return bytes to the client, consider just putting an image URL in like src=“/images.ashx/testing", then setting up an ASHX handler to call your image-generating function. You can return bytes without encoding.

Login Control Issue

I'm a junior in a software engineering and web development class and have ran into a problem. I need a log in page so that after a user clicks the log in button, they will be sent to my actual web page. However, every time I click the log in button I recieve this error:
Server Error in '/Case04' Application.
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.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: 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."
For this specific project, i am not concerned what the user enters as long as they enter information. I just need it so when the log in button is clicked i am sent to my actual web page which is pc.aspx.
Here is my Code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!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 id="Head1" runat="server">
<link href="login.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<%--Heading--%>
<form name="c_order" id="c_order" runat="server"
action="pc.aspx" method="get">
<table>
<tr>
<td>
<img src="mclogog.jpg" alt="heading" id="heading" />
</td>
</tr>
</table>
<%--login--%>
<asp:Login ID="login" class="login" runat="server" size="10" maxlength="25" EventValidation="false"></asp:Login>
<p id="member" >Already a member?</p>
<%--fieldset for new user --%>
<fieldset>
<legend id="bill">Shipping Information</legend>
<label for="fname" >First Name<span>*</span></label>
<input type="text" name="fname" id="fname" size="27" />
<label for="lname"> Last Name<span>*</span></label>
<input type="text" name="lname" id="lname" size="27" />
<label for="address1">Address #1<span>*</span></label>
<input type="text" name="address1" id="address1" size="57" />
<label for="address2">Address #2</label>
<input type="text" name="address2" id="address2" size="57" />
<label for="city">City<span>*</span></label></td>
<input type="text" name="city" id="city" size="40" />
<label for="state">State<span>*</span> </label>
<input type="text" name="state" id="state" size="3" />
<label for="zip">ZIP<span>*</span> </label>
<input type="text" name="zip" id="zip" size="10" maxlength="10" />
<label for="country">Country<span>*</span></label>
<input type="text" name="country" id="country" size="40" value="United States" />
<p id="ast">
* = Required field, must be filled in.
</p>
</fieldset>
</form>
</body>
</html>
I would appreciate any help, thanks!
The problem is that your page is not handling its own events. You have your < form > tag set up to post-back its values to another page.
< form ... action="pc.aspx" ... /> but your page is really called login.aspx. So, when this form's content gets posted to pc.aspx, it can't decode the viewstate, because it didn't come from pc.aspx.cs. It came from a different page.
Remove the action attribute from your form tag. Like this:
<form name="c_order" id="c_order" runat="server" method="get">

PL/SQL Server Page cannot find form

For some reason, this code does not work. It cannot find "User.ex6a1_order_receipt". However, if I type the URL in manually I can navigate to it. What am I doing wrong? This is the complete error.
The requested URL /classpsp/User.ex6a1_order_receipt was not found on this server
<form action="User.ex6a1_order_receipt" method="post">
--stuff here
</form>
Here is the complete code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<%#page language="PL/SQL"%>
<%#plsql procedure="ex6a1_order_sentiment"%>
<head>
<title>Order Sentiment</title>
</head>
<body>
<div align="center"><p><h2>Sentiment for Occasion</h2>
Order Sentiment<br>
<hr /></div>
<br>
<!-- Start Page Content -->
<p><b>Enter Order</b></p>
<form action="User.ex6a1_order_receipt" method="post">
<p>Sentiment ID: <input type=text name="sentiment_id_text" value="" size=5 maxlength=20></p>
<p>Quantity: <input type=text name="Quantity_text" value="" size=5 maxlength=20></p>
<p>Customer ID:<select name="CustomerFormBox_text">
<option value="103" selected>Sania Raina</option>
<option value="101">Tracey Bussell</option>
<option value="102">Lacy George</option>
<option value="104">Tom Peters</option>
<option value="105">Sharon Key</option></select></p>
<p>Payment Type: <input type=radio name="paymentTypeRadio" value="Check">Check
<input type=radio name="paymentTypeRadio_text" value="CC" checked>Credit Card</p>
<input type=reset name="ResetButton" value="Reset"/>
<input type=submit name="FormsButton1" value="Process Order"/>
</form>
</body>
</html>
Any ideas? I'm completely lost.
This usually happens because the package User.ex6a1_order_receipt does not have all of the form elements specified in the procedure's parameters.
For simplicity, use flexible parameter passing:
http://docs.oracle.com/cd/B14099_19/web.1012/b14010/concept.htm#i1005764
http://vanbortel.blogspot.com/2006/09/modplsql-and-flexible-parameter.html
Then you can pass any number form items into the procedure without needing to change the package's parameters.
Inside of the package, use a function and turn the parameters into a associative array for easy processing.

w3c validation issues

im confused, the w3c validation service seems to be saying that asp.net cannot legally render a hidden field inside a form tag on the page, have a look at this ...
http://validator.w3.org/check?uri=http%3a%2f%2fmotcombegarage%2eco%2euk%2f
from what i can tell it seems to be saying that the following code sample is invalid markup WTF !!!
<html>
<head> ... header stuff ... </head>
<body>
<form method="post" action="" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKt17cxAr+s9MgFAqjXzJsHz7KyzLpZjYtTK89blY7GgKAElK/5syvVNn4h7rVehcQ=" />
</div>
... other code ...
</form>
</body>
</html>
This presents 2 problems for me if the code is in fact invalid:
This code is generated by the .net framework for handling postbacks so editing it could be a problem
i have no idea what the valid context for a form field should be (lolz)
Is this a bug or have i done something wrong ???
EDIT:
As pointed out by Peter O below I added the missing div tag in my markup ... comparing this to the markup that the validator uses shows that this div whilst present in the markup is apparently not worth validating ... so that kinda changes the question to ... why is it ignoring that div ? ...
Seems a bit odd that you can't put an input tag inside a form tag directly though ... surely thats the point of a form tag, to contain input tags ??
The only way I've seemed to get rid of the message, following the code on your homepage, is to assign a value to the first hidden input
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="toverton" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
</div>
In all liklihood, this is most likely a bug.
The INPUT elements should be placed within a DIV element, like this:
<form ... >
<div>
<input type="hidden" ... />
<input type="hidden" ... />
<input type="hidden" ... />
</div>
</form>

Trouble getting to PayPal Buy Now Buttons to work on a single page in ASP.NET

I confess I am a noob to asp.net and web forms. I'm having an issue incorporating a few PayPal Buy Now buttons on a single page. Basically, the problem is no matter which "Buy Now" button is clicked, the user is taken to paypal to buy the product represented by the last button on the page.
The code for my first button is something like this...
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ABC123">
<asp:ImageButton runat="server" id="PPImageButton1" PostBackUrl="https://www.paypal.com/cgi-bin/webscr" ImageUrl="https://www.paypal.com/en_US/i/btn/btn_buynow_SM.gif"/>
My second button is similar to...
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ABC456">
<asp:ImageButton runat="server" id="PPImageButton2" PostBackUrl="https://www.paypal.com/cgi-bin/webscr" ImageUrl="https://www.paypal.com/en_US/i/btn/btn_buynow_SM.gif"/>
How can I make the first button send value ABC123 to the PayPal service instead of ABC456?
Thanks in advance.
The POST content of a button is every input in the FORM tag that surrounds the submit button. So to have each button submit a separate set of hidden fields you need to wrap the button and the desired hidden fields in a separate form:
<form ... >
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ABC123">
<asp:ImageButton runat="server" id="PPImageButton1" PostBackUrl="https://www.paypal.com/cgi-bin/webscr" ImageUrl="https://www.paypal.com/en_US/i/btn/btn_buynow_SM.gif"/>
</form>
<form ... >
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ABC456">
<asp:ImageButton runat="server" id="PPImageButton1" PostBackUrl="https://www.paypal.com/cgi-bin/webscr" ImageUrl="https://www.paypal.com/en_US/i/btn/btn_buynow_SM.gif"/>
</form>
My noob solution for this was to cut each of the buy-it-now buttons and its associated fields out of the aspx page, and put each set in a separate html page.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>first button</title>
</head>
<body>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="paypal">
<input type="hidden" value="_s-xclick" name="cmd" /> <input type="hidden" value="???????" name="hosted_button_id" />
<table>
<tbody>
<tr>
<td><input type="hidden" value="Member name" name="on0" />Member name</td>
<td><input maxlength="60" size="30" name="os0" /></td></tr>
<tr>
<td><input type="hidden" value="Membership No. (if known)" name="on1" />Membership No. (if known)</td>
<td><input maxlength="60" size="6" name="os1" /></td></tr></tbody></table>
<input type="image" alt="PayPal - The safer, easier way to pay online." src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" name="submit" /> <img height="1" alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" border="0"/> </form>
</body>
</html>
In the place in the aspx page where you removed the button and other fields, insert an iframe which points to the html page like this:
<iframe width="600" height="" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="mybuttonpage1.htm"></iframe>
It's not your button that sends the value - it's the form it's in, and/or the code behind it.
Could you:
Post the form code?
Post the code behind for this page?
Here is a solution the the multiple form problem when using PayPal with ASP.NET:
http://www.codersbarn.com/post/2008/03/08/Solution-to-ASPNET-Form-PayPal-Problem.aspx
I discuss several workarounds for the problems of inserting PayPal code into an ASP.NET page, and present a different approach in my article at http://blackbeltcoder.com/Articles/ecommerce/quick-and-dirty-buy-now-buttons-in-asp-net.
In the end, you don't need to use a form because PayPal allows you to use a regular anchor link.
I was able to get it to work by removing all the other button containers from the DOM in jQuery. Add a class to your container, and add a CssClass to the ImageButton, "PayPalImageButtons"
<div>
Buy This First Product Below
</div>
<div class="ManualPurchase PayPalButtons">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="ABC123" />
<asp:ImageButton CssClass="PayPalImageButtons" runat="server" id="PPImageButton1" PostBackUrl="https://www.paypal.com/cgi-bin/webscr" ImageUrl="https://www.paypal.com/en_US/i/btn/btn_buynow_SM.gif" />
</div>
<div>
Buy This Second Product Below
</div>
<div class="ManualPurchase PayPalButtons">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="ABC456" />
<asp:ImageButton CssClass="PayPalImageButtons" runat="server" id="PPImageButton1" PostBackUrl="https://www.paypal.com/cgi-bin/webscr" ImageUrl="https://www.paypal.com/en_US/i/btn/btn_buynow_SM.gif" />
</div>
and the jQuery
<script type="text/javascript">
function pageLoad() {
$(".PayPalImageButtons").click(function (e) {
$(this).parent().addClass("keep");
$(".PayPalButtons").not(".keep").remove();
});
}
</script>
My next step is dealing with the removed elements height and maybe a Please Wait dialog while the PayPal page is loaded

Resources