PDA

View Full Version : form submit error in non-IE browsers



tpeck
Oct 15th, 2010, 06:54 AM
I have this form which works perfectly in Internet Explorer, but doesn't work in anything else:


<FORM NAME=FORMUNIT METHOD=POST ACTION="unit.<%ScriptType%>">
<TD VALIGN="MIDDLE">
<INPUT TYPE=HIDDEN NAME=UserID VALUE="<%UserID%>">
<INPUT TYPE=HIDDEN NAME=Password VALUE="<%Password%>">
<INPUT TYPE=HIDDEN NAME=UnitID VALUE="<%UnitID%>">
<%If IsDevel%>
<A style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(<%CourseID%>,<%UnitID%>);" onclick="javascript:submit();" HREF="#">&nbsp;<%Unit%></A>
<%Else%>
<A style="width:250;text-decoration:none;background-color:<%If UnitStarted%><%If UnitCompleted%>F84A18<%Else%>orange<%EndIf%><%Else%>10F0A0<%EndIf%>;" onclick="javascript:submit();" HREF="#">&nbsp;<%Unit%></A>
<%EndIf%>
</TD>
</FORM>

I realise all the variables will mean nothing to you, but is there an obvious way to make the script cross-browser compliant?

In, say, Firefox, the only thing that is submitted is the "#" in HREF="#".

Kor
Oct 15th, 2010, 03:31 PM
onclick="javascript:submit();"

Submit what? Any method needs an object to be applied on, your case: the form itself


onclick="document.forms['FORMUNIT'].submit();return false"
.

tpeck
Oct 16th, 2010, 11:07 AM
Yes, the programmers who wrote this for us (a few years ago) seemed to have settled only for onclick="javascript:submit();".

It does work, but only in IE at the moment. I am trying to rewrite the templates.

I will try adding what you suggest.

Out of interest, does this mean that Internet Explorer is forgiving enough to allow the submit to function without the object being specified?

_Aerospace_Eng_
Oct 16th, 2010, 09:18 PM
Yes, the programmers who wrote this for us (a few years ago) seemed to have settled only for onclick="javascript:submit();".

It does work, but only in IE at the moment. I am trying to rewrite the templates.

I will try adding what you suggest.

Out of interest, does this mean that Internet Explorer is forgiving enough to allow the submit to function without the object being specified?

Yes. Since when has IE not been so forgiving? ;)

Old Pedant
Oct 16th, 2010, 09:20 PM
I don't think even MSIE can do that. I think, more likely, there is a JS function in the page named "submit" that the <a> tags are calling. And it wasn't written corrrectly, some how.

Yeah, I just tested this HTML page in MSIE:


<html>
<body>
<form>
<input name="foo">
</form>
<a href="#" onclick="submit()" />click</a>
</body>
</html>

And clicking on the link just produces an error message.

The code is also badly written even if that function exists, because since the onclick doesn't return false to the <a> tag, the normal operation of the <a> link will still occur, meaning that the page will still be refreshed by the browser. So you have a race condition no matter what: Which will happen first, the form submit or the action of the <a> link??

Ahhh...actually, I might have just diagnosed the real problem! The function *DOES* exist. And maybe *DOES* work in all browsers. But in MSIE, the submit of the form happens first whereas in other browsers the action of the <a> link (just refresh the page) occurs first.

Poke around in the full code of the page and see if I'm not right about the existence of a submit() function.

The normal way to use an onclick with <a> is to do

<a href="#" onclick="doSomething(); return false;" >

so that the return false suppresses the <a>'s action.

Old Pedant
Oct 16th, 2010, 09:23 PM
If I'm right, just recoding it to do

<A ... onclick="submit(); return false;" HREF="#">&nbsp;<%Unit%></A>

will work.

Philip M
Oct 17th, 2010, 08:42 AM
You should avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or
'text' or 'checked' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

And of course you may not give a variable a name which is a Javascript keyword or event such as alert, case, char, confirm, false, int, null, onload, return, this, void, and so on.

Also avoid words such as description, author, title, keyword and generator which may appear in META tags.

(And *NEVER* use the name "submit", because then your JS code can't call document.formname.submit() if you ever need to).

tpeck
Oct 17th, 2010, 12:41 PM
Thanks! There are about 25 or so FORMS on the page called FORMUNIT but all use onclick="javascript:submit();".

That said, there are numerous other forms on the page with different names that DO submit using the form name, but not the name FORMUNIT.

So I am mystified.

When I get access to the site (it will take a week), I will try the return false idea and report back if it works.

Philip M
Oct 17th, 2010, 01:35 PM
Thanks! There are about 25 or so FORMS on the page called FORMUNIT but all use onclick="javascript:submit();".


Impossible. :( You may not have multiple forms on a page with the same name.

glenngv
Oct 17th, 2010, 10:26 PM
It's not recommended to have multiple forms with the same name and should be avoided when possible. But technically, it's possible and valid. You just need to use document['formname'] and not document.forms['formname'] to access the forms. Try this example:


<html>
<head>
<script type="text/javascript">
window.onload = function(){
var forms1 = document['f1'];
alert('f1 count: ' + forms1.length);
for (var i=0; i<forms1.length; i++){
alert('f1[' + i + '] input field name = ' + forms1[i].elements[0].name);
}

var forms2 = document['f2'];
alert('f2 count: ' + forms2.length);
for (var j=0; j<forms2.length; j++){
alert('f2[' + j + '] input field name = ' + forms2[j].elements[0].name);
}
}
</script>
</head>
<body>
<p>
Form 1:
<form name="f1"><input name="f1_0_e" /></form>
<form name="f1"><input name="f1_1_e" /></form>
<form name="f1"><input name="f1_2_e" /></form>
</p>

<p>
Form 2:
<form name="f2"><input name="f2_0_e" /></form>
<form name="f2"><input name="f2_1_e" /></form>
</p>

</body>
</html>

Philip M
Oct 18th, 2010, 07:31 AM
That's interesting, but for the life of me I cannot see why anyone would want or need to have multiple forms with the same name as per your example. :confused:

As I see it, if you have 25 forms, if you submit form 12, form 12 and it's variables will be the only thing passed onto the processing script. Each form must have it's own submit button for the values to get passed. If you need to use more than one form, then you will have multiple submit buttons. A person can only hit submit one form at a time. This means if you have 25 forms, you can only get the values from one of them, not all 25.

glenngv
Oct 18th, 2010, 09:29 AM
I totally agree with you. I just showed that it's technically possible to have that and the page will still work.

Kor
Oct 18th, 2010, 11:08 AM
Well things changed somehow since the modern Doctypes (HTML 4 Strict, XHTML, HTML5) allow the forms to bear only ids, not [B]name[/]s. In this case the whole syntax must slide from DOM0 to DOM1+ :)

tpeck
Oct 19th, 2010, 04:00 PM
OK, the source of the entire, rather repetitive page is here:

As I said, it works perfectly (as part of a large system) and submits each FORMUNIT link without getting confused, but in IE only.


<script language="JavaScript" type="text/javascript">
var iGlobalCourseID;
var iGlobalUnitID;

function setvalues(int_type){
if (int_type == 2) {
document.FORMDELETE.CourseID.value = iGlobalCourseID;
document.FORMDELETE.UnitID.value = iGlobalUnitID;
} else {
document.FORMEDIT.CourseID.value = iGlobalCourseID;
document.FORMEDIT.UnitID.value = iGlobalUnitID;
}
return true;
}

function mouseClicked(iCourseID,iUnitID){
iGlobalCourseID = iCourseID;
iGlobalUnitID = iUnitID;
menu.style.left = event.x;
menu.style.top = event.y;
menu.style.display = "block";
}
</script>
<div id="menu" style="position:absolute;top:0;left:0;display:none;border:1 solid black;background-color:white;">
<form name="FORMEDIT" method="POST" action="UnitEdit.exe" onsubmit="return setvalues(1)">
<td valign="MIDDLE"><input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value>
<input type="HIDDEN" name="UnitID" value>
<input type="IMAGE" src="/Images/wtlook_electronics/Edit.gif" border="0">
</td>
</form>
<form name="FORMDELETE" method="POST" action="UnitEdit.exe" onsubmit="return setvalues(2)">
<td valign="MIDDLE"><input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value>
<input type="HIDDEN" name="UnitID" value>
<input type="HIDDEN" name="Action.Delete" value="1">
<input type="IMAGE" src="/Images/wtlook_electronics/Delete.gif" border="0">
</td>
</form>
</div>
<html>

<head>
<title>Unit List</title>
<basefont face="Arial" color="#000000">
</head>

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false;" onclick="javascript:if(typeof(menu) != 'undefined'){menu.style.display='none'}" bgcolor="#FFFFFF">

<script src="js/ssm.js" type="text/javascript"></script>
<script src="js/ssmsettings.js" type="text/javascript"></script>
<script src="js/quote.js" type="text/javascript"></script>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height="40">
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td width="30">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
<body>

<link rel="stylesheet" href="js/ssmitems.css" type="text/css" />
<form method="POST" name="FORM_COMPETENCY" action="Login.exe">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<tr>
<td>
<script type="text/javascript">addLink("Course Menu", "javascript:document.FORM_COMPETENCY.submit();", "_parent");</script>
</td>
</tr>
</form>
<tr>
<td>
<script type="text/javascript">addText("Course Sections");</script>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">addText("Section Contents");</script>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">addText("Page Menu");</script>
</td>
</tr>
<script type="text/javascript">addText("");</script>
<tr>
<td>&nbsp;</td>
</tr>
<form method="POST" name="FORM_MESSAGES" action="Messages.exe">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<tr>
<td>
<script type="text/javascript">addLink("Messages", "javascript:document.FORM_MESSAGES.submit();", "_parent");</script>
</td>
</tr>
</form>
<form method="POST" name="FORM_THREADS" action="Threads.exe">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<tr>
<td>
<script type="text/javascript">addLink("Threads", "javascript:document.FORM_THREADS.submit();", "_parent");</script>
</td>
</tr>
</form>
<form method="POST" name="FORM_ONE2ONE" action="One2one.exe">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<tr>
<td>
<script type="text/javascript">addLink("One2one", "javascript:document.FORM_ONE2ONE.submit();", "_parent");</script>
</td>
</tr>
</form>
<tr>
<td>&nbsp;</td>
</tr>
<script type="text/javascript">addText("");</script>
<form method="POST" name="FORM_GRAPHS" action="graphs.exe">
<input type="HIDDEN" name="View" value="Developer">
<input type="HIDDEN" name="CourseId" value="420">
<input type="HIDDEN" name="Context" value="Global">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<tr>
<td>
<script type="text/javascript">addLink("Graphs", "javascript:document.FORM_GRAPHS.submit();", "_parent");</script>
</td>
</tr>
</form>
<form method="POST" name="FORM_VARIABLETYPES" action="VariableTypes.exe">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<tr>
<td valign="MIDDLE">
<script type="text/javascript">addLink("Variable Types", "javascript:document.FORM_VARIABLETYPES.submit();", "_parent");</script>
</td>
</tr>
</form>
<form method="POST" name="FORM_USERVARIABLES" action="UserVariables.exe">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<input type="HIDDEN" name="StudentID" value="835">
<tr>
<td valign="MIDDLE">
<script type="text/javascript">addLink("User Variables", "javascript:document.FORM_USERVARIABLES.submit();", "_parent");</script>
</td>
</tr>
</form>
<form method="POST" name="FORM_COMPVARIABLES" action="CourseVariables.exe">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<input type="HIDDEN" name="StudentID" value="835">
<tr>
<td valign="MIDDLE">
<script type="text/javascript">addLink("Comp Variables", "javascript:document.FORM_COMPVARIABLES.submit();", "_parent");</script>
</td>
</tr>
</form>

</body>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td width="15"></td>
<td>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="LEFT">
<img src="/Images/wtlook_electronics/ELEMENTSAVAILABLE.gif"></td>
<td align="RIGHT"></td>
</tr>
<tr>
<td colspan="2"><hr noshade size="1"></td>
</tr>
</table>
<table size="90%" cellpadding="0" cellspacing="0" border="0" align="TOP">
<tr>
<td>
<table>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1481">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1481);" onclick="javascript:submit();" href="#">&nbsp;Welcome</a>
</td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1483">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1483);" onclick="javascript:submit();" href="#">&nbsp;Timetable</a>
</td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1484">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1484);" onclick="javascript:submit();" href="#">&nbsp;Introduction</a>
</td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1485">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1485);" onclick="javascript:submit();" href="#">&nbsp;Basic
Hints</a> </td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1486">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1486);" onclick="javascript:submit();" href="#">&nbsp;Practice
Test 1</a> </td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1487">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1487);" onclick="javascript:submit();" href="#">&nbsp;Listening</a>
</td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1488">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1488);" onclick="javascript:submit();" href="#">&nbsp;Reading</a>
</td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1489">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1489);" onclick="javascript:submit();" href="#">&nbsp;Practice
Test 2</a> </td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1490">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1490);" onclick="javascript:submit();" href="#">&nbsp;Writing</a>
</td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form name="FORMUNIT" method="POST" action="unit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="UnitID" value="1491">
<a style="width:250;text-decoration:none;background-color:cyan;" oncontextmenu="javascript:mouseClicked(420,1491);" onclick="javascript:submit();" href="#">&nbsp;Speaking</a>
</td>
</form>
<td>&nbsp; </td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form>
<td></td>
</form>
<td>&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<td>&nbsp; </td>
<form>
<td></td>
</form>
<td>&nbsp; </td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
<form method="POST" action="UnitEdit.exe">
<td valign="MIDDLE">
<input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<input type="IMAGE" src="/Images/wtlook_electronics/Add.gif" border="0">
</td>
</form>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<form method="POST" action="UnitOrder.exe">
<td><input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<input type="IMAGE" src="/Images/wtlook_electronics/Order.gif" border="0">
</td>
</form>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp; </td>
<form method="POST" action="CourseImages.exe">
<td><input type="HIDDEN" name="UserID" value="835">
<input type="HIDDEN" name="Password" value="vct1D8ZbMTMF">
<input type="HIDDEN" name="CourseID" value="420">
<input type="IMAGE" src="/Images/wtlook_electronics/Images.gif" border="0">
</td>
</form>
</tr>
</table>
<br>
<br>
<dir>
</dir>
</td>
<td width="2"></td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr height="200">
<td>&nbsp; </td>
</tr>
</table>
<script type="text/javascript">buildMenu();</script>

</body>
</basefont>

</html>