The pages using this framework use event handlers to manage validation and submittal; some pages use a hidden form for the actual submittal, in which case the form the user completes has no action attribute, so a form-level onSubmit() handler is inappropriate. The user form's buttons have an onClick() event handler that performs validation and displays errors if necessary. If the data are valid it populates the hidden form (if used) and issues
form.submit().
You are correct that the (HTML DOM) "id" must be unique. I hoped that was the answer, but the behavior I've seen also occurs on forms with only a single submit button where no duplicate id exists (for example, the entry to a wizard, where there are only Reset and Continue buttons). In any case, IE and FF seem to ignore duplicate id's (though it's a good thing I wasn't doing any DOM stuff here!). The WebKit-based browsers may be less forgiving.
I'm unsure what you mean in your last three points...
On point two, are you asserting that form elements of type='submit' are not submitted to the server? This is exactly the behavior I'm seeing with the WebKit-based browsers (the whole point of my original question), but it is most certainly
not the behavior of IE and FF. Please run the testForm.asp and TestFormHandler.asp (see below) under each browser, and you'll see that IE and FF do in fact include the submit button in the result (at least with method='POST'), so the button is accessible in the resulting form handler, meaning it can distinguish between the the buttons the user might have available, whether they be "Previous", "Next", "Finish" or "Cancel".
On point three, I have no idea what you mean by "submit and image input information is submitted only for the one which started the submit". In that context, what is "the one"? The form itself, or the button the user clicked? Form submittal can be initiated via a button of type=submit, but It can also be initiated by programatically invoking the
submit() method on a form object (not necessarily the form the user sees, as described above), in which case the the button's event handler returns false to suppress submission of the visible form.
On point four, are you asserting that a "programmitic" submittal, i.e.,
form.submit(), does not transfer the form data to the server? This is certainly not the case as the code below demonstrates.
By "specification", I mean the W3C's HTML 4.01 specification. Please see
successful controls, which clearly specifies that the active submit button (regardless of how many submit buttons may be present) is a "successful control" and will be included in the data transferred to the server. IE and FF honor this requirement; WebKit-based browsers apparently do not.
Here are the test pages (I hope it doesn't mess with the quotes this time...):
testForm.asp
Code:
<%@ language="JavaScript" %>
<% Response.Buffer = true %>
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test Form</title>
<script language="JavaScript">
<!--
function handleSubmit(navForm, navButton) {
var theForm = new Object(navForm);
var theButton = new Object(navButton);
var obj = null;
var hidden = null;
var val = 0;
var selection = 0;
var i, j;
// get the selection and hidden field reference
for (i=0, j=theForm.length; i<j; i++) {
obj = new Object(theForm.elements[i]);
if (obj.type == "radio") {
val = parseInt(obj.value);
if (obj.checked == true) { selection = val; }
}
if (obj.type == "hidden") {
hidden = obj;
}
}
// in real form, validation would be done here. just set hidden field
hidden.value = "The button clicked was '" + navButton.name + "', the selection was '" + selection + "'";
alert("set hidden.value = '" + hidden.value + "' - about to submit form.");
theForm.submit();
return true;
}
-->
</script>
</head>
<body>
<h1>Test Form</h1>
<form name='testForm' id='testForm' method='POST' action='testFormHandler.asp' >
<table>
<tr><td colspan='2'>Please make a selection:</td></tr>
<tr><td><input type='radio' name='navChoice' id='navChoice1' value='1' checked='checked' /></td><td>Choice 1</td></tr>
<tr><td><input type='radio' name='navChoice' id='navChoice2' value='2' /> </td><td>Choice 2</td></tr>
<tr><td colspan='2'>
<input type='reset' name='navReset' id='navReset' value='Reset' />
<input type='submit' name='navButton' id='navButton' value='Continue' onClick='return (handleSubmit(testForm,this)); ' />
</td></tr>
</table>
<input type='hidden' name='navHidden' id='navHidden' value='not set' />
</form>
</body>
</html>
testFormHandler.asp
Code:
<%@ language="JavaScript" %>
<% Response.Buffer = true %>
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test Form Handler</title>
</head>
<body>
<h1>Test Form Handler</h1>
<%
// display the contents of the user agent header and the query string
var userAgent = new String(Request.ServerVariables ("HTTP_USER_AGENT"));
var msg = "", f = null, q = null, v = null;
for (f = new Enumerator(Request.Form()); !f.atEnd(); f.moveNext()) {
q = f.item();
v = Request.Form(q);
if (msg != null) { msg += ", "; }
msg += (q + " = '" + v + "'");
}
Response.write("HTTP_USER_AGENT : " + userAgent + "<br />");
Response.write("Query string: " + msg + "<br />");
%>
</body>
</html>
