asked on

form not submitting properly

I'm encountering a strange problem submitting a form value using some javascript and a CF variable. Here's my code:

<form action="checkout.cfm?ID=#url.id#" method="POST"></cfoutput>
<div align="center">
<input type="submit" name="Submit" value="Pay for Order"
onclick="this.form.submit();this.value='Please Wait..';this.disabled='true';"
>
</div>
</form>

Basically the form submits the value correctly when the onclick="this.form.submit();this.value='Please Wait..';this.disabled='true';" code is removed. With the onclick code is added it doesn't submit the value for some reason. Any idea what could be causing this strange problem?

Thanks!

adonis1976

try this:

have a javascript functon :

<script type="text/javascript">
function plswait(){
form.submit.value = " Please wait... ";
form.submit.disabled = true;
return true;
}
</script>

ASKER CERTIFIED SOLUTION

adonis1976

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mrichmon

Usually you don't have an onClick in a submit button. Also you want the submit to be the LAST thing that happens and probably the disabled to be the first to prevent a double submit (also true is a value - not a string so no quotes are needed)

You have

1) Regular button with onclick that does submit
<input type="button" name="Submit" value="Pay for Order"
onclick="this.disabled=true;this.value='Please Wait..';formname.submit();">

Put your form name in for formname above

2) Submit button with onSubmit in form
adonis1976's second post is an example of this

mrichmon

Note that choices 1 and 2 above are two different choices - do one or the other - not both ;o)

Also it is a good idea not to use reserved words when naming buttons (so use "MySubmit" or "FormSubmit" or "OrderSubmit" instead of "Submit")

bluskyGuy

ASKER

Yea, I tried onclick="this.disabled=true;this.value='Please Wait..';formname.submit();" and it does a good job of not allowing the visitor to click the submit button twice...however it's still bringing up the same page after it's submitted...it's very strange :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function plswait(){
form.submit.value = " Please wait... ";
form.submit.disabled = true;
return true;
}
</script>

<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">
<title></title>
<style type="text/css">

      FORM, textarea, select, option, input, select,textfield
                  {
                  font-family: Verdana, Arial, Helvetica,

sans-serif;
                  font-size: 10px;
                  color:#000000;

                  textfield-size: 9px;
                  }

.leftNavBorder2{
      border: 1px solid #000000;
      border-top-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 1px;
      border-left-width: 0px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #000000;
      border-right-color: #000000;
      border-bottom-color: #000000;
      border-left-color: #000000;


}

.borderThin {
      border: 1px solid #000000;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-top-color: #000000;
      border-right-color: #000000;
      border-bottom-color: #000000;
      border-left-color: #000000;


}

body {
      background-color: #FFFFFF;
}
-->

.footerTxt {font-size: 10px}

.leftNavBorder {
      border-top-width: 0px;
      border-right-width: 2px;
      border-bottom-width: 0px;
      border-left-width: 0px;
      border-top-style: none;
      border-right-style: solid;
      border-bottom-style: none;
      border-left-style: none;
      border-top-color: #000000;
      border-right-color: #000000;
      border-bottom-color: #000000;
      border-left-color: #000000;
}
a { text-decoration: none;
}
a:active { color: #000000; }
a:visited { color: #000000; }
a:inactive { color: #000000; }
a:link { color: #000000; }

.footerTopBorderOnly {

text-decoration: none;
      border-top-width: 1px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      border-left-width: 0px;
      border-top-style: solid;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
      border-top-color: #000000;
      border-right-color: #000000;
      border-bottom-color: #000000;
      border-left-color: #000000;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #333333;
}

</style>
<script language="JavaScript" type="text/JavaScript">

</script>
<link href="../border.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>

<body>
<cfinclude template="../NavTemp.cfm">
<table width="738" align="center" cellspacing="0" class="border">

<tr>
<td height="112" valign="top" ><div align="center">
<cfquery name="qGetOrderInfo" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      Orders
      WHERE ID = #URL.ID#
      AND UserID = #cookie.user#
</cfquery>

<cfif isdefined("submit")>

<cfoutput>
<CFHTTP URL="https://secure.authorize.net/gateway/transact.dll"
METHOD="POST" RESOLVEURL="no">

<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Version" VALUE="3.1">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Login" VALUE="">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Password" VALUE="">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Amount"

VALUE="#qGetOrderInfo.total#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Delim_Data" VALUE="True">

<cfquery name="CC" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      creditcards
      WHERE ID = #qGetOrderInfo.creditcardID#
</cfquery>

<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Card_Num"

VALUE="#CC.CCNumber#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Exp_Date"

VALUE="#CC.CCExpMonth##CC.CCExpYear#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Type" VALUE="AUTH_CAPTURE">

<cfquery name="user" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      Customers
      WHERE ID = #qGetOrderInfo.UserID#
</cfquery>

<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_First_Name"

VALUE="#user.first_Name#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Last_Name"

VALUE="#user.last_Name#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Address" VALUE="#user.address1#

#user.address2#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_City" VALUE="#user.city#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_State" VALUE="#user.state#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Zip" VALUE="#user.zip#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Country" VALUE="US">

<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Cust_ID" VALUE="#user.ID#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Customer_IP"

VALUE="#CGI.REMOTE_HOST#">


<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Invoice_Num" VALUE="#url.id#">
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Description" VALUE="Ordered on:

#qGetOrderInfo.orderdate#">

<CFIF IsDefined("test_only")>
<CFHTTPPARAM TYPE="FORMFIELD" NAME="x_Test_Request" VALUE="True">
</CFIF>

</CFHTTP>

<cfset ReturnedValues = CFHTTP.FileContent>
<cfset CaptureResponse = ListGetAt(ReturnedValues, 3)>

<cfif CaptureResponse is '1'>
      <cflocation url="complete.cfm?ID=#url.id#">
</cfif>

<cfif CaptureResponse is '3'>
<div align="center"><span class="style4">I'm sorry. There was an

error in your transaction. Please try your credit card

again</a>.</span>
</div>
<cfabort>
</cfif>

<cfif CaptureResponse is 'T'>
<div align="center"><span class="style4">You appear to be operating

in test mode. Please try again without the test mode active.</span>
</div>
<cfabort>
</cfif>

<div align="center"><span class="style4">Your credit card was

declined by the bank. Please enter a new credit card number.<P><form

action="orderinfo.cfm?ID=#url.id#" method="Post"><input type="submit"

value="Enter a New Credit Card Number"></form>
</div>
<cfabort>
</cfoutput>
</cfif>

<cfquery name="qGetOrderDetails" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      ItemsInOrder
      WHERE OrderID = #qGetOrderInfo.ID#
</cfquery>
<p><br>
<br>
</p>
<img src="../images/timeline3.gif" width="584" height="88"

align="middle"><br>
<br>
<table width="620" border="2" cellspacing="0" cellpadding="5"

bgcolor="#FFFFFF">
<tr><td>

<table width="610" border="0" cellspacing="5" cellpadding="3">

<tr>
      <td colspan="4">
      <font face="Arial,Helvetica,sans-serif" size="-1"><img

src="../images/confirmOrder.gif" width="151" height="27">
      </font>
      </td>
</tr>

<tr>
      <th><font face="Arial,Helvetica"

size="-1"><u>Quantity</u></font></th>
      <th><font face="Arial,Helvetica" size="-1"><u>Item

Description</u></font></th>
      <th><font face="Arial,Helvetica"

size="-1"><u>Price</u></font></th>
      <th><font face="Arial,Helvetica" size="-1"><u>Final

Price</u></font></th>
</tr>

<cfquery name="Order" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      orders
      WHERE ID = #url.id#
</cfquery>

<cfset subtotal=0>
<cfset itemtotal=0>

<cfoutput query="qGetOrderDetails">
<cfquery name="ItemDetails" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      Products
      WHERE ID = #qGetOrderDetails.Itemid#
</cfquery>
<tr>
      <td align="center" bgcolor="##FFFFFF"><font

face="Arial,Helvetica" size="-1">#qGetOrderDetails.Quanity#</font></td>
<cfquery name="Vendor" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      Vendors
      WHERE ID = #ItemDetails.Vendor#
</cfquery>

<cfquery name="Size" datasource="t" username="t"

password="t">
     SELECT      *
      FROM      sizes
      WHERE ID = #qGetOrderDetails.size#
</cfquery>

      <td bgcolor="##FFFFFF"><font face="Arial,Helvetica" size="-
1">#vendor.company# #ItemDetails.Title# (#size.Size# - #size.width#)
      </font></td>
      <td align="right" bgcolor="##FFFFFF"><font

face="Arial,Helvetica"

size="-1">#DollarFormat(ItemDetails.Price)#  </font></td>

<cfset itemtotal=#ItemDetails.Price#*#qGetOrderDetails.Quanity#>
<cfset subtotal=#subtotal# + #itemtotal#>

      <td align="right" bgcolor="##FFFFFF"><font

face="Arial,Helvetica"

size="-1">#DollarFormat(itemtotal)#  </font></td>
</tr>
</cfoutput>

<cfif #order.Shipmethod# is 'UPS-G'>
      <cfif #subtotal# GT 50>
            <cfset Shipping=0>
      <cfelse>
            <cfset Shipping=5>
      </cfif>
</cfif>

<cfif #order.Shipmethod# is 'USPS-P'>
      <cfset Shipping=7>
</cfif>

<cfif #order.Shipmethod# is 'UPS-O'>
      <cfif #order.totalitems# EQ 1>
            <cfset Shipping=20>
      <cfelse>
            <cfset Shipping=5+(#order.totalitems#*15)>
      </cfif>
</cfif>

<cfif #order.Shipmethod# is 'UPS-2'>
      <cfif #order.totalitems# EQ 1>
            <cfset Shipping=10>
      <cfelse>
            <cfset Shipping=2+(#order.totalitems#*8)>
      </cfif>
</cfif>

<cfif #order.Shipmethod# is 'UPS3'>
      <cfif #order.totalitems# EQ 1>
            <cfset Shipping=8>
      <cfelse>
            <cfset Shipping=2+(#order.totalitems#*6)>
      </cfif>
</cfif>

<cfquery name="Taxes" datasource="t" username="t"

password="t">
      SELECT      *
      FROM      taxes
      WHERE State_abv = '#qGetOrderInfo.ShipState#'
</cfquery>

<cfif #Taxes.recordcount# GT 0>
      <cfset Tax=#Subtotal# * #Taxes.rate#>
<cfelse>
      <cfset Tax=0>
</cfif>

<cfif qGetOrderInfo.Coupon GT 0>
      <cfquery name="Couponamount" datasource="t"

username="t" password="t">
            SELECT      *
            FROM      Coupons
            WHERE ID = #qGetOrderInfo.Coupon#
      </cfquery>
      <cfset coupon = #subtotal# / #Couponamount.percentoff#>
<cfelse>
      <cfset coupon = 0>
</cfif>

<cfset Total=(#subtotal#-#coupon#) + (#Shipping# + #Tax#)>

<cfoutput>
<tr>
      <td colspan="3" align="right"><font face="Arial,Helvetica"

size="-1"><b>Order Subtotal  </b></font></td>
      <td align="right" bgcolor="##FFFFFF"><font

face="Arial,Helvetica"

size="-1"><b>#DollarFormat(Subtotal)#  </b></font></td>
</tr>

<cfif qGetOrderInfo.Coupon GT 0>
<tr>
      <td colspan="3" align="right"><font face="Arial,Helvetica"

size="-1"><b>Coupon Percent Discount (#couponamount.percentoff#%

Discount)  </b></font></td>
      <td align="right" bgcolor="##FFFFFF"><font

face="Arial,Helvetica"

size="-1"><b>#DollarFormat(coupon)#  </b></font></td>
</tr>
</cfif>

<tr>
      <td colspan="3" align="right"><font

face="Arial,Helvetica,sans-serif"

size="-1"><b>Shipping  </b></font></td>
      <td align="right" bgcolor="##FFFFFF"><font

face="Arial,Helvetica"

size="-1"><b>#DollarFormat(Shipping)#  </b></font></td>
</tr>

<tr>
      <td colspan="3" align="right"><font

face="Arial,Helvetica,sans-serif"

size="-1"><b>Tax  </b></font></td>
      <td align="right" bgcolor="##FFFFFF"><font

face="Arial,Helvetica"

size="-1"><b>#DollarFormat(Tax)#  </b></font></td>
</tr>

<tr>
      <td colspan="3" align="right"><font

face="Arial,Helvetica,sans-serif" size="-1"><b>Total of This

Order  </b></font></td>
      <td align="right" bgcolor="##FFFFFF"><font

face="Arial,Helvetica"

size="-1"><b>#DollarFormat(Total)#  </b></font></td>
</tr>
</cfoutput>

      <cfquery datasource="t" username="t"

password="t">
            Update orders
            set total=#total#
            where ID = #url.id#
      </cfquery>

</table>
</td></tr></table>

<br><br>

</div></td></tr>
<tr>
<td>
<div align="center" class="style4">Please check and confirm the

following information necessary to process your order.
</div>

<cfoutput>
<form name="hhhh" action="checkout.cfm?ID=#url.id#" method="POST">
</cfoutput>
<div align="center">
<input type="submit" name="Submit" value="Pay for Order"
>
</div>
</form>
<form action="../cart.cfm" method="POST">
<div align="center">
<input type="submit" name="Return" value="Go back to Cart">
</div>
</form>
</td>

</tr>

</table>

</div></td>
</tr>
</table>

</body>
</html>

trailblazzyr55

Well one problem I noticed right off the bat is you have multiple forms in your page. This is not allowed, you must only have one form per page, this is probably why your submit button isn't working.

Try reformatting your page with only one form tag and I bet you it'll work perfect!!

trailblazzyr55

Here you can do this, it'll work much better for you...

<form action="" method="post" name="Something" onSubmit="plswait(this);">

Inside you can have three submit's by doing this...

<input type="submit" name="Return" value="Go back to Cart" onClick="this.form.action='../cart.cfm';">
<input type="submit" value="Enter a New Credit Card Number" onClick="this.form.action='orderinfo.cfm?ID=#url.id#';">
<input type="submit" name="Submit" value="Pay for Order" onClick="this.form.action='checkout.cfm?ID=#url.id#';"

</form>

this way you have one form, each submit button will go to it's own place, and in the form tag you can call your javascript by how I have it above. That should get you going :o)

regards,
~trail

bluskyGuy

ASKER

hmm, now there's an idea..i'll give it a shot. Thanks!

trailblazzyr55

make sure you have your cfoutput's surrounding your input button's so they get the variable values between the ##'s
just start your form tag before your first submit, and end it after the last, and add a cfoutput before the first form tag and after the last form tag

Like so...

<cfoutput>
<form action="" method="post" name="Something" onSubmit="return plswait(this);">

+--------Page Contents----------+

<input type="submit" name="Return" value="Go back to Cart" onClick="this.form.action='../cart.cfm';">

+--------more Contents----------+

<input type="submit" value="Enter a New Credit Card Number" onClick="this.form.action='orderinfo.cfm?ID=#url.id#';">

+--------additional Contents----------+

<input type="submit" name="Submit" value="Pay for Order" onClick="this.form.action='checkout.cfm?ID=#url.id#';"

</form>
<cfoutput>

Also I made a slight correction to your form tag's onClick, I forgot to add the "return" in there..

the example above is correct

hope that helps,
regards,
~trail

adonis1976

u dont have the onSubmit in the form definition in your page.. also make the button submit button not just a plain button.. it will work..

<form "all other things" onSubmit="return plswait(this)">

trailblazzyr55

adonis1976,

that's what i just posted...

>> <form action="" method="post" name="Something" onSubmit="return plswait(this);">

:o) ~trail

trailblazzyr55

if you noticed he was trying to use three forms and thier actions to direct where the submit button would go based on which was selected. problem is you can only have one form in the page or you will have all sorts of little bugs and errors, it just won't work.

One thing I forgot to point out however, is that if he wanted to do something like apply the plswait() function to only one of the submit buttons, then he could do something liek this...

<input type="submit"
name="Submit"
value="Pay for Order"
onClick="this.form.action='checkout.cfm?ID=#url.id#'; return plswait(this);">

or if he wants it for all the submit buttons, put it in the <form onSubmit attribute... like so or like I said earlier...

<form action="" method="post" name="Something" onSubmit="return plswait(this);">

bluskyGuy,

Just one catch I saw in my example, in the last submit button I'm missing a ">" might give an error if you cut and paste, just add it in there, should be like this...

<input type="submit" name="Submit" value="Pay for Order" onClick="this.form.action='checkout.cfm?ID=#url.id#';">

regards,
~trail

adonis1976

not a problem trail.. u get the points or i get, its all good.. v helped another expert... :-)

mrichmon

Also, besides making only one form, make sure that you have the action tag for that form defined - not blank.

The blank is what is causing it to go to the same page

trailblazzyr55

mrichmon,

you have to have the action blank in the form tag...

reason being.. you define it in the submit button, this way each submit can go to a different location...

<form action="" method="post" name="Something" onSubmit="return plswait(this);">

action is defined here....

<input type="submit" name="Submit" value="Pay for Order" onClick="this.form.action='checkout.cfm?ID=#url.id#';">

^
here

~trail

mrichmon

Well you can do it like that, but you don't need to have it blank for that javascript code to work. And if the page right now is going nowhere - then that javascript is not working and that is the cause of the blank action tag.

So I recommend not starting the action tag as blank. Instead start it as the default location - like submit order (i.e. checkout). Then in the case that javascript doesn't work or it is turned off people can still place orders and your company still makes money.

Then if javascript does work it overwrites that default.

trailblazzyr55

yeah... that's a good point :o)

~trail

bluskyGuy

ASKER

Basically all I'm looking to do is prevent the user from double-clicking the order button...is it absolutely necessary to only have one <form> tag on the page? I have the following form field setup...

<form name="hhhh" action="checkout.cfm?ID=#url.id#" method="POST" >

<div align="center">
<input type="submit" name="Submit" value="Pay for Order" onClick="this.form.action='checkout.cfm?ID=#url.id#'; return plswait(this);">
</div>
</form>

However, it doesn't seem to be doing anything. I can click on the button and the button isn't greyed out (the javascript appears to be setup correctly as well...here's that syntax):

<script type="text/javascript">
function plswait(){
form.submit.value = " Please wait... ";
form.submit.disabled = true;
return true;
}
</script>

Thanks for the help!

trailblazzyr55

try this to test..

<form name="hhhh" action="checkout.cfm?ID=#url.id#" method="POST" onSubmit="return plswait(this);">

<div align="center">
<input type="submit" name="Submit" value="Pay for Order" onClick="this.form.action='checkout.cfm?ID=#url.id#';">
</div>
</form>

bluskyGuy

ASKER

Ok, i copied and pasted that code and it's still not greying out the submit button...any ideas?

mrichmon

Honestly the best way to do what you are doing (in my opinion) is as follows:

1 Form - only 1 action location (usually the same page)
3 Buttons - 1 per each action you want

It doesn't hurt to prevent double click on ALL buttons so.....

<form name="OrderForm" action="thispage.cfm" method="post" onSubmit="return pleasewait();">

<div id="Patience"></div>

form....

<input type="submit" name="GoBack" value="Go back to Cart">
<input type="submit" name="NewCC" value="Enter a New Credit Card Number">
<input type="submit" name="Pay" value="Pay for Order">
</form>

pleasewait function looks like:

<script type="text/javascript">
var submitted = false;
function pleasewait(){
document.getElementById("Patience").InnerHtml = "Please wait....";
submitted = true;
if(submitted) { return true; }
else {return false; }
}
</script>

Then the cold fusion in the page looks like:

<cfif IsDefined("Form.GoBack")>
<cflocation url="previouspage.cfm">
<cfelseif IsDefined("Form.NewCC")>
<cflocation url="newCCpage.cfm">
<cfelseif IsDefined("Form.Pay")>
<cflocation url="checkout.cfm">
</cfif>

So the page loads normally if none of those buttons are defiend and submit buttons are only defined when clicked.

mrichmon

Note that the above will not visually disable the submit buttons - the user can click as many times as they want, but the page will actually only BE submitted once. ;o)

bluskyGuy

ASKER

Ok, cool...i'll give this recommendation a shot!

trailblazzyr55

if you do it mrichmon's way... make sure you're passing your url variables along in the cflocation..

<form name="OrderForm" action="thispage.cfm?ID=#url.id#" method="post" onSubmit="return pleasewait();">

<cfif IsDefined("Form.GoBack")>
<cflocation url="../cart.cfm?ID=#url.id#">
<cfelseif IsDefined("Form.NewCC")>
<cflocation url="orderinfo.cfm?ID=#url.id#">
<cfelseif IsDefined("Form.Pay")>
<cflocation url="checkout.cfm?ID=#url.id#">
</cfif>

mrichmon

yes if you need the url variable

trailblazzyr55

just awaiting feedback ;o)

trailblazzyr55

mrichmon, I believe the solution to thier problem was found between the comments we posted, basically letting them know that multiple forms would not work, and providing alternatives to what they originally had, you had a good point on 05/04/2005 12:00PM PDT as well with that post and that should've given them two options between what we posted as a solution.

I would say split mrichmon & trailblazzyr55 should no further comments be posted by bluskyGuy

regards,
~trail