Print and Submit Form Button doesn't work in Chrome - PHP Server Side Scripting forum at WebmasterWorld - WebmasterWorld

Forum Moderators: coopster

Message Too Old, No Replies

Print and Submit Form Button doesn't work in Chrome

Form button works in all other browsers except Chrome

Jade_Turtle

1:52 pm on Apr 23, 2012 (gmt 0)

10+ Year Member

Hello all, I'm new to coding, having used a WYSIWYG program in the past. I'm more of a design person than a coding person, so my apologies in advance.

Here is a simple form I created that has a print and submit button. It submits data to a MySql database and send an email to a distribution list. It also auto-responds back to the sender. It works fine in IE,Safari and Firefox, but refuses to submit in Google Chrome. It goes to the print screen, but won't go any further.

Having done some research, I think I'm leaving off a piece of code that only Chrome needs and it may have something to do with return false; but I can't figure out where to put it or how to make print and submit function work in chrome when it works fine in the other browsers. Any help would be much appreciated.

I've only included the function event and the button script code. Please advise if you need to see more of the code. Thank you so much!

<?php

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>JadeTurtle Designs</title>

<script language="javascript" type="text/javascript">

function PrintMeSubmitMe()
{
window.print();
SubmitMe();
}

function SubmitMe()
{
document.MyForm.submit();
}
</script>
</head>
<body>

<input type="submit" id="contactButton1" onclick="PrintMeSubmitMe(this);return false;" name="" value="Send" style="position:absolute;left:423px;top:580px;width:96px;height:25px;z-index:12;" tabindex="11">

</div>
</body>
</html>

rainborick

3:14 pm on Apr 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Chrome may not handle your method of addressing the form element to be submitted. You might try:


<script language="javascript" type="text/javascript">

function PrintMeSubmitMe(subButton)
{
window.print();
SubmitMe(subButton.form);
}

function SubmitMe(theForm)
{
theForm.submit();
}
</script>

which should work in all browsers.

incrediBILL

3:24 pm on Apr 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

It's a form element without a form.

Try adding the <form></form> tags around your form elements and see what happens.

rocknbil

3:37 pm on Apr 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Right, but you haven't shown us how you've named or ID'ed the form :-) Also there may be some internal browser functioning involved that may prevent it from working - that is, as you know, window.print() brings up the print dialogue which waits for user input. It may never go on to print. Doesn't hurt to try though.

Here's a more compact solution that should also do the same thing. Note that when you do this,

onclick="PrintMeSubmitMe(this);return false;"

"this" refers to the button, which is pretty useless in itself. At the very least you'd put (this.form) there to pass a reference to the form, but there's a better way anyway - what if someone doesn't have the ability to click? Or presses enter? Put it in the onsubmit, in which case, "this" does pass a reference to the form. Note also the movement of the return value into the function.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>JadeTurtle Designs</title>
<script language="javascript" type="text/javascript">
// accept the fomr object as a parameter
function PrintMeSubmitMe(theForm) {
window.print();
theForm.submit();
return false;
}
</script>
</head>
<body>
<form action="youraction.php" name="myFormName" id="myFormID" method="post" onsubmit="return PrintMeSubmitMe(this);">
<input type="submit" id="contactButton1" value="Send" style="position:absolute;left:423px;top:580px;width:96px;height:25px;z-index:12;" tabindex="11">
</div>
</body>
</html>

The previous renders the form naming and id'ing irrelevant, but if you must reference them, you should use id's instead, not names.

frm = documentGetElementByID('myFormID');
frm.submit();

Jade_Turtle

4:00 pm on Apr 23, 2012 (gmt 0)

10+ Year Member

@rocknbil...That works! Awesome! Thank you so much.

rocknbil

4:26 pm on Apr 24, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Cool, but don't use that "as posted." It was for example only and is missing a closing </form>.