Coldfusion cfinput datefield not working inside table

Question

I've been stuck on this for a while, so any help would be appreciated. I am new to ColdFusion so all suggestions are welcome.

I am collecting data in a cfform that is then inserted into a SQL table, which works fine. Currently, the cfform is automatically generated using a cfloop inside an HTML table. For some reason though, the cfinput-datefield calendar is generating a JavaScript issue unless the cfform is located in the same td, which isn't a viable option.

I've managed to make it work on a different page, and copy&pasted the code into this one but still to no avail. The JS error is Uncaught TypeError: Cannot read property split of undefined however, this disappears as soon as, again, the cfform and cfinput are next to each other. Looking at the rendered code, it seems the cfform is closing itself off immediately, <form...></form> but unsure of what to make of this.

Both get_vessel_info and get_container_info are cfqueries from before that work perfectly. All the variables have correctly been defined too.

Here is my code:

<cfoutput>
<table name="main-table">
    <tr class="titlerow">
        <td>#invoiceno#*</td>
        <td>#dateofentry#*</td>
        <td>#containerno#</td>
        <td>#sealno#</td>
        <td>#insurancecoefficient#*</td>
        <td>#freightperkilo#*</td>
        <td></td>
    </tr>
    <cfif get_vessel_info.number_of_containers gte 1>
        <cfloop from="1" to="#get_vessel_info.number_of_containers#" index="i">
            <cfform action="inboundcontainerinsert.cfm?vessel_ID=#session.vessel_ID#" name="containerinsertrow#i#" method="post">
            <tr>
                <td><cfinput type="text" name="invoice_no#i#" placeholder="#entervalue#" maxlength="50" required="yes" value="#invoicenovalue#"></td>
                <td><cfinput type="datefield" name="date_of_entry#i#" placeholder="#selectvalue#" maxlength="50" required ="yes" value="#dateofentryvalue#" mask="DD-MMM-YYYY"></td>
                <td><cfinput type="text" name="container_no#i#" placeholder="#entervalue#" maxlength="50"  value="#containernovalue#"></td>
                <td><cfinput  type="text" name="seal_no#i#" placeholder="#entervalue#" maxlength="50"  value="#sealnovalue#"></td>
                <td><cfinput type="text" name="insurance_coefficient#i#" maxlength="50" required="yes" value="#insurance_covalue#"></td>
                <td><cfinput type="text" name="freightperkg#i#" placeholder="#entervalue#" maxlength="50" required="yes" value="#freightperkgvalue#"></td>
                <cfif #container_id# NEQ "">
                    <cfset submitname = 'updaterow'><cfset submitvalue = #freightstore_updaterow#> 
                <cfelse>
                    <cfset submitname = 'submitrow'><cfset submitvalue = #freightstore_submitrow#>
                </cfif>
                <td><cfinput type="submit" name="#submitname#" value="#submitvalue#"/></td>
        </tr></cfform>
    </cfloop>

Am open to any suggestion. I do not know jQuery or Ajax so am hesitant to use them unless someone amazing can create a perfectly working fix. I have included a <cfajaximport tags="cfinput-datefield"> but to no avail.

If you have any questions, please feel free to ask.

Answer 1

After painstakingly debugging this I have found the table needs to START inside the tag and not reversed. Hope this saves some people some time!