Javascript interact with ColdFusion

Thank you for your reply!

However, after I added the value, the If never tests to true any more no matter what I have entered. In another word, the alert part never got called, and it always posted the form.

By the way, I want to do an alert before the IF test to see the value of the field, but it seems the function itself is not been call this time.

function validate_form(thisform)
{alert("here is the value" + thisform.NumbArtFiles.value );
if (thisform.NumbArtFiles.value !=1)
      {
      alert("You have said 1 ...");
      NumbArtFiles.focus();
      return false;
      }
      return true;
}

Any thing I did wrong here?

Thanks again!

What is the value contained in 'thisform.NumbArtFiles.value' ? If it is equal to 1, well, there's your problem ;-)

I have tested with 1, and whole bunch of non-1 numbers. But it seems the Javascript function did not get called.

And my original code always calls, but because the IF always true, so the alert fired every time, however, even the function return false, the posting is not delayed...

My last post has this in its first line, with the same intension as you have suggested:

alert("here is the value" + thisform.NumbArtFiles.value );

But it did not get called.

I went back and added the alert as you have done, and it DID fire.

So, that tell me the parameter to the function did not get passed correctly. I have tried several ways, but have not figured out the RIGHT way. Here are my tries:
A)
onsubmit="return validate_form(this)"
function validate_form(thisForm)
B)
onsubmit="return validate_form(thisForm)"
function validate_form(thisForm)
C)
onsubmit="return validate_form(this.NumbArtFiles)"
function validate_form(this.NumbArtFiles)

A) is the winner.

Change the alert that is on the first line to this:

alert(thisForm.NumbArtFiles.value);

and tell us what it displays?

With
alert(thisForm.NumbArtFiles.value);
as the first line,

nothing displayed. No alert pop up. The cfm on cfform action="OrderProc.cfm got run, and a record wrote to the back end.

I even tried next D some thing like this...
D)
onsubmit="return validate_form(thisForm)"
function validate_form(#Order.NumbArtFiles#)

But the alert did not fire. The param I want to pass in is from cfinput field. Probably I should have made myself clear at the every begining. Here is how the whole tag looks like. I guess the important things are variable name and data type. I know for a fact that the input has made it to the back end.

<tr>
<td width="150"><font color="Red">*</font>Number of Art Files being Transferred</td>
<td width="270"><cfinput type="text" name="NumbArtFiles" value="#Order.NumbArtFiles#" message="Please enter a Number for Art File Transferred." validate="float" required="Yes" class="text"><br>(Please enter numeric value. Enter 0 for none.)
      </td>
</tr>

Time to run this page in a debugger and step through function 'validate_form' and see what is *really* happening.

give this a shot...

<script type="text/javascript">
function validateForm(frmObj){
 alert("Validation Processing...");
 if(frmObj.NumbArtFiles.value != 1){
  alert("NumArtFiles.value is not 1, Form shouldn't submit.");
  frmObj.NumbArtFiles.focus();
  return false;
 }else{
  alert("NumArtFiles.value is 1, Form should submit.");
 }
 return true;
}
</script>


<cfform action="OrderProc.cfm" name="Order" onsubmit="return validateForm(this);" method="post">



NOTE: in every case above, you have this line...

NumbArtFiles.focus();

which is incorrect because you're not prefixing it with the form it's in, so it will cause you issues, you needed to add the form object prefix.... My example has a few different alert()'s to show where you are in the function as the script runs, you can remove those, they're basically for your reference in debugging... good luck ;o)

-tb55

Trailblazzr55,
Thank you for reply, but I could not make any of your alert come up. The onsubmit was been ignored, and the submit went through.

This is harder than I thought. I have increased the credit point.

I'm telling you, it is time to run this page in a debugger and step through the code to see what is *really* happening. Further guesswork is futile.

is there a reason why you're using <cfform>? Are your input fields <cfinput> or <input>?

can you post the code for you whole page?

debug away too as Badotz mentioned...

Ok, I am going to debug. I am asp.net guy, and my ide here is Dreamweaver MX. I assume this is the right ide for debuging cfm and javascript. I will dig in the the doc/help file.

Here is the whole cfm page. Thanks!

<!--- Processing --->
<cfinclude template="../OnlyDistrib.cfm">

<cfoutput>

<!---Will be querying the pricebook later.  Need to know which one.  --->
<cfset PriceBook = Year(Now()) & "CAT">

<!---This form will create a new order if there's no url.OrderID --->
<cfif IsDefined("url.OrderID")>
      <cfset FormTitle="Change Order">
      <cfquery name="Order" datasource="QWrightSQL">
            SELECT * FROM stsWebOrders WHERE OrderID = #url.OrderID#
      </cfquery>

      <cfif Order.RecordCount EQ "0"><cfthrow type="OrderEntry" message="OrderID specified in URL does not exist"></cfif>

      <cfif Order.CustomerID NEQ user.user_id><cfthrow type="NotPermitted" message="User #user.user_id# has been denied permission to view order #url.OrderID# of user/customer #order.CustomerID#."></cfif>

      <cfif Order.Status EQ "Checked">
            <cflocation url="OrderView.cfm?OrderID=#Order.OrderID#">
      </cfif>
<cfelse>
      <cfset FormTitle="Add Order">
      <cfparam name="url.part" default="">
      <cfset defaultsize="">
      <cfif url.part NEQ "">
            <!---Automatically fill in size, but only if that item comes in only 1 size. --->
            <cfquery name="Sizes" datasource="QWrightSQL">
                  SELECT stsItem11Header.SizeDesc
                  FROM stsItem11Header
                  WHERE stsItem11Header.ProductFamily='#url.part#' AND PriceBook = '#PriceBook#'
                  GROUP BY stsItem11Header.SizeDesc;
            </cfquery>
            <cfif Sizes.RecordCount EQ "1">
                  <cfset defaultsize=Sizes.SizeDesc>
            </cfif>
      </cfif>

      <cfquery name="DeleteBlankOrders" datasource="QWrightSQL">
            DELETE FROM stsWebOrders WHERE stsWebOrders.CustomerID = '#user.user_id#' AND ( stsWebOrders.ItemNumber IS NULL OR stsWebOrders.ItemNumber = '' ) AND GetDate() > EditClearDT
      </cfquery>

      <!--- This file can be called from the PriceItNow (quickquote) side of the world, too.  If it was, we stuff the
                  new order with the provided information during creation.  Otherwise, just create a blank order. --->
      <cfif IsDefined("form.priceitnow") And (form.priceitnow IS "1")>
            <!--- Came from PriceItNow, so create the order with as much information as we have: --->
            <cfquery name="CreateOrder" datasource="QWrightSQL">
                  INSERT INTO stsWebOrders ("CustomerID", "ItemNumber", "Size", "Quantity", "Instructions", "Colors", "UnitPrice", "TotalPrice", "CutType", "Numbering") SELECT '#user.user_id#', '#form.frmItemNumber#', '#form.frmSize#', '#form.frmQuantity#', '#form.frmInstructions#', '#form.frmColors#', '#form.frmUnitPrice#', '#form.frmTotalPrice#', '#form.frmCutType#', '#form.frmNumbering#'
            </cfquery>
      <cfelse>
            <!--- Didn't come from PriceItNow, so just create a blank order: --->
            <cfquery name="CreateOrder" datasource="QWrightSQL">
                  INSERT INTO stsWebOrders ("CustomerID", "ItemNumber", "Size") SELECT '#user.user_id#', '#url.part#', '#defaultsize#'
            </cfquery>
      </cfif>
      
      <cfquery name="GetOrderNumber" datasource="QWrightSQL">
            SELECT MAX(OrderID) AS NewOrder FROM stsWebOrders WHERE CustomerID = '#user.user_id#'
      </cfquery>

      <cfquery name="Order" datasource="QWrightSQL">
            SELECT * FROM stsWebOrders WHERE OrderID = #GetOrderNumber.NewOrder#
      </cfquery>
</cfif>

<cfquery name="Lock" datasource="QWrightSQL">
      UPDATE stsWebOrders SET Status = 'Editing...', EditClearDT = DateAdd(hour, 1, GetDate()) WHERE OrderID = #Order.OrderID#
</cfquery>

<cfquery name="ProductList" datasource="QWrightSQL">
      SELECT stsItem11Header.ProductFamily, stsItem11Header.ProductFamily + ' - ' + Min(stsItem11Header.ItemDesc) AS ItemDesc
      FROM stsItem11Header
      WHERE stsItem11Header.PriceBook='#PriceBook#'
      GROUP BY stsItem11Header.ProductFamily
</cfquery>

<cfinclude template="../nocache.cfm">

<cfset title="Submit Order">

<!--- Output --->
<cfinclude template="../CustomerCenter/header.cfm">

<table width="570" align="center">
  <tr>
      <td><div align="right"><br>
            <img src="../Images/page_titles/PlaceOrder.gif" width="380" height="26">
        </div></td>
  </tr>
  <tr>
      <td>&nbsp;</td>
  </tr>
</table>


      <script language="JavaScript1.2">
      function GoCatalog(){
            window.open('../scio/content_view.cfm?item_type=pf&item_id=' + document.Order.ItemNumber.value, '_new','width=600,height=300,scrollbars=yes,resizable=yes')
      }
      </script>
<script type="text/javascript">
function validate_form(frmObj)
{
alert("Val processing...");
      if (frmObj.NumbArtFiles.value != 1)
            {
            alert("NumbArtFiles is not 1 ...");
            frmObj.NumbArtFiles.focus();
            return false;
            }else{alert("it is 1, and will submit");
            return true;
}
</script>

<b>#FormTitle#</b><br><br>

<cfquery name="Account" datasource="QWrightSQL">
      SELECT account_name, fax, email FROM account WHERE account_number = '#user.user_id#'
</cfquery>

<div align="center" style="width:420px;">
<p>
      Not all fields may be applicable to the product you are ordering.&nbsp; Please see the current Stouse catalog for details.
<p>
      Fields marked with a red asterisk (<font color="Red">*</font>) are required.            
</p>
</div>

<br>

<cfform action="OrderProc.cfm" name="Order" onsubmit="return validate_form(this);" Method="Post">

<table width="420" border="0" cellspacing="0" cellpadding="8">
<tr>
      <td width="150"><font color="Red">*</font>Item Number</td>
      <td width="270">
            <cfinput type="text" name="ItemNumber" id="ItemNumber" class="text" message="You must select an item number" value="#Order.ItemNumber#" required="Yes"></cfinput><br>
<!--             <a href="javascript: GoCatalog();">View catalog page <br>for this item number</a> -->
      </td>
<!---       <cfselect type="text" name="ItemNumber" query="ProductList" id="ItemNumber" class="text" message="You must select an item number" query="ProductList" display="ItemDesc" selected="#Order.ItemNumber#" required="Yes"></cfselect> --->
</tr><tr>
      <td width="150"><font color="Red">*</font>Contact</td>
      <td width="270"><cfinput type="Text" name="Contact" value="#Order.Contact#" message="Please enter a contact name." required="Yes" class="text"></td>
</tr><tr>
      <td width="150"><font color="Red">*</font>Email</td>
      <td width="270"><cfinput type="Text" name="Email" value="#Order.Email#" message="Please enter your Email address." required="Yes" class="text"></td>
</tr><tr>
      <td width="150"><font color="Red">*</font>PO number</td>
      <td width="270"><cfinput type="Text" name="PO" value="#Order.PO#" message="Please enter the PO number" required="Yes" class="text"></td>
</tr><tr>
      <td width="150"><font color="Red">*</font>Previous Job</td>
      <td width="270">
            <cfinput type="Text" name="PrevJob" value="#Order.PrevJob#" message="Please enter the previous job number or 'none'." required="Yes" class="text">
            (Please enter the previous job number or "none")
      </td>
</tr><tr>
      <td width="150">Quote Number</td>
      <td width="270"><input type="text" class="text" name="QuoteNumber" value="#Order.QuoteNumber#"></td>
</tr><tr>
      <td width="150">Unit Price</td>
      <td width="270"><input type="text" class="text" name="UnitPrice" value="#Order.UnitPrice#"></td>
</tr><tr>
      <td width="150">Total Price</td>
      <td width="270"><input type="text" class="text" name="TotalPrice" value="#Order.TotalPrice#"></td>
</tr><tr>
      <td width="150">Payment Type</td>
      <td width="270">
            <cfselect name="PaymentType" selected="#Order.PaymentType#" class="text">
                  <option value="Net - 30 Days">Net - 30 Days</option>
                  <option value="COD">COD</option>
                  <option value="Credit Card">Credit Card</option>
            </cfselect>
      </td>
</tr><tr>
      <td width="150"><font color="Red">*</font>Quantity</td>
      <td width="270"><cfinput type="Text" name="Quantity" value="#Order.Quantity#" message="Please enter a numeric quantity." validate="float" required="Yes" class="text">      </td>
</tr><tr>
      <td width="150"><font color="Red">*</font>Size</td>
      <td width="270">
            <cfinput type="Text" name="Size" value="#Order.Size#" message="Please enter a size." required="Yes" class="text">
            (Please use inches to specify the size.)
      </td>
</tr><tr>
      <td width="150">Colors</td>  <!---Required in next step  --->
      <td width="270">
            <textarea name="Colors" class="text" rows="5" wrap="PHYSICAL">#Order.Colors#</textarea><br>
            (Separate colors with commas. Example: Black, Fire Red)
      </td>
</tr><tr>
      <td width="150">Need a Proof?</td>
      <td width="300" align="center">
            No<input type="radio" name="Proof" value="No" checked>
            &nbsp;Fax<input type="radio" name="Proof" value="Fax">
            &nbsp;Paper<input type="radio" name="Proof" value="Paper">
            &nbsp;Email<input type="radio" name="Proof" value="Email"><br>
            (Note: Production time begins after proof approval)
      </td>
</tr><tr>
      <td width="150">Front/Back adhesive</td>
      <td width="270">
            <input type="text" name="FrontBack" value="#Order.FrontBack#" class="text"><br>
            (Required entry only if this item is printed on clear polyester)
      </td>
</tr><tr>
      <td width="150"><font color="Red">*</font>Cut Type</td>
      <td width="270">
            <cfinput type="Text" name="CutType" value="#Order.CutType#" message="Please enter a cut type." required="Yes" class="text"><br>
            (Enter 'square' or 'die'.  If you require a special die cut shape, please describe.)
      </td>
</tr><tr>
      <td width="150">Description of Numbering</td>
      <td width="270">
            <textarea name="Numbering" class="text" rows="5" wrap="PHYSICAL">#Order.Numbering#</textarea><br>
            (May not be applicable to the item you are ordering.  See the catalog.  Include size, starting number, ending number, and color.)
      </td>
</tr><tr>
      <td width="150">Shipping Method</td>
      <td width="270">
            <cfselect name="Shipping" selected="#Order.Shipping#" class="text">
                  <option value="Ground">Ground</option>
                  <option value="Second Day">Second Day</option>
                  <option value="Next Day">Next Day</option>
                  <option value="Other">Other</option>
            </cfselect>
      </td>
</tr><tr>
      <td width="150">Ship-to address (if different from bill-to-address)</td>
      <td width="270"><textarea name="ShipAddress" class="text" rows="5" wrap="PHYSICAL">#Order.ShipAddress#</textarea></td>
</tr><tr>
      <td colspan="2" align="center">
            <b>Copy / Special Instructions</b></br>
            (Specific shipping instructions, details/comments on order, special requests, etc.)<br>
            <textarea name="Instructions" class="text" rows="8" wrap="PHYSICAL">#Order.Instructions#</textarea>            
      </td>
</tr><tr>
      <td colspan="2" align="center">
            <br><b>ArtWork File upload</b><br>
            <a href="/ArtInfo/Guidelines.html" target="_blank">Quick Reference Guide For Sending Artwork</a>
      </td>
</tr><tr>
      <td width="150"><font color="Red">*</font>Number of Art Files being Transferred</td>
      <td width="270">
            <cfinput type="text" name="NumbArtFiles" value="#Order.NumbArtFiles#" message="Please enter a Number for Art File Transferred." validate="float" required="Yes" class="text"><br>
            (Please enter numeric value. Enter 0 for none.)
      </td>
</tr><tr>
      <td width="150">Number of Visuals being Transferred</td>
      <td width="270">
            <input type="text" name="NumbVisuals" value="#Order.NumbVisuals#" class="text"><br>
            
      </td>      
</tr><tr>
<td colspan="2">Please upload a jpeg or PDF of the Art files supplied above to insure everything transferred correctly
             with no missing elements, colors, layers, etc. </td>
             </tr>
<td colspan="2" align="center">
      <iframe name="filelist.cfm" src="filelist.cfm?OrderID=#Order.OrderID#" width="420" height="200" scrolling="yes"></iframe>
      Please upload native files in the following programs (listed in our order of preference): Illustrator,
            Freehand, Corel Draw, Photoshop, Quark Express, PageMaker, Indesign, PDF or EPS.  Microsoft programs
            are discouraged and often times are unusable for our operation.
</td>
</tr>
</table>

<br><br><br><hr>
<br>
<input type="hidden" name="OrderID" value="#Order.OrderID#">
<input type="submit" class="button" name="submit322" value="Submit">
&nbsp;
<input type="reset" class="button" value="   Reset Form   " onClick="willReset=confirm('Are you sure you want to clear your entries?');return willReset;">
<br><br>
</cfform>
</div>
</cfoutput>
<cfinclude template="../CustomerCenter/footer.cfm">

if for some reason you are still experiencing problems with the javascript after you test what I posted above, then run your page in Mozilla and debug through their javascript console, much more robust in terms of providing feedback on errors than IE. I also am using Dreamweaver MX, not really the place to debug javascript, use Mozilla's javascript console...

Thank you! This works!
That is a big step for me.

However, it is just one of many steps for the task at hand.
I will open another thread if I could not get them resolved within a reasonable time.

Thanks!

No worries - glad to help.

Glad that worked for you, fyi... unless you're using cfform for special functionality built into cfform, I would stick with the standard <form> tags including <input>'s instead of <cfinput>'s. This will help eliminate some of the issues you're having as well especially with the javascript.

Also make sure you don't purely rely on javascript for data integrity, you want javascript there for presentation and helpful reminders, but don't rely on it purely to make sure something is correct before updating a database or something in case the user has javascript tuurned off. Validate everything is correct with coldfusion, this way you'll be sure you're enforcing what you expect.

Good luck!
Thanks and glad I could help,
-tb55