Skip to content

Instantly share code, notes, and snippets.

@JamoCA

JamoCA/IESafari_ButtonJSTest.cfm

Last active August 27, 2015 18:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JamoCA/9f1787c4939f2c2873fc to your computer and use it in GitHub Desktop.
Save JamoCA/9f1787c4939f2c2873fc to your computer and use it in GitHub Desktop.
Download ZIP
Using inline onclick JS to submit a form fails to post fields when using Internet Explorer, Edge & Safari. Firefox & Google Chrome work.
Raw
IESafari_ButtonJSTest.cfm
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p>When using Internet Explorer 11, Edge & Safari (not sure of all versions), this fails to post the fields "Fuseaction" and "ContinueBtn" with the form.<br>
This functions properly when using either Firefox or Chrome.<br>
NOTE: I also unbind form validation, but it's not necessary to include it for this demo. If the jQuery form submit is removed,
it submits both fields, but both fields should still be posted under any circumstances.</p>
<p><b>I realize why this is happening... initially in the demo, I didn't have a "name" attribute for the hidden INPUT field.
But if is important to note that while Firefox & Chrome include the clicked named submit button during the JS form submit, IE/Edge/Safari don't.</b></p>
<p>8/27/2015 Follow up: According to the <a href="http://www.w3.org/TR/html5/forms.html#constructing-form-data-set">HTML spec</a>, the
submit button should only be posted if it's the "submitter". If JS is used to post the form, IE/Edge doesn't include the button.
An interop bug for the IE/Edge team was filed by <a href="https://twitter.com/jonathansampson">Jonathan Sampson</a> to consider Chrome/Firefox's behavior.</p>
<form id="theForm" action="./IESafari_ButtonJSTest.cfm" method="post">
<input id="fuseaction" type="hidden" name="Fuseaction" value="Process">
<input type="submit" name="ContinueBtn" value="Continue" onclick="$('#fuseaction').val('DoNotProcess');$('#theForm').submit();">
</form>
<CFIF CGI.Request_Method IS "post">
<CFOUTPUT>
<div><b>Browser:</b> #CGI.Http_User_Agent#<br>
<b>Form.ContinueBtn Exists:</b> = #YesNoFormat(StructKeyExists(Form, "ContinueBtn"))#</div>
</CFOUTPUT>
<CFDUMP VAR="#Form#" label="FORM variables">
</CFIF>
<p>But if you use jQuery & bind the click function, it works:</p>
<form id="theForm2" action="./IESafari_ButtonJSTest.cfm" method="post">
<input id="fuseaction2" type="hidden" name="Fuseaction" value="Process">
<input type="submit" id="buContinue" name="ContinueBtn" value="Continue">
</form>
<script type="text/javascript">
$(function(){
$('#buContinue').click(function(e){
$('#fuseaction2').val('CheckOut');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment