将ColdFusion表单值传递给javascript和CFC，代码不工作

Question

我试图将我的表单值传递给一个javascript函数，它将它们传入我的CFC函数以插入到数据库中，但它不工作。 JS代码如下：

更新：删除“。”在警报前（）和URL：

$(document).ready(function() { 
    $("#createReport").click(function(f) { 
     var getReportName = $("input#reportName").val(); 
     var getReportPath = $("input#reportPath").val(); 
     var getReportDesc = $("input#reportDescrip").val(); 
     var getReportCategory = $("input#categoryBox").val(); 

     $.ajax({ 
      url: "components/reportController.cfc?method=createReport&returnformat=json", 
      dataType: "JSON", 
      data:{ 
        reportName: getReportName, 
        reportPath: getReportPath, 
        reportDescrip: getReportDesc, 
        categoryBox: getReportCategory 
      }, 
      success: function(){ 
       alert("You successfully added a new report to the system") } 
}); 
    }); 
}); 

ColdFusion表单代码：（更新我的形式取出闪存型和CFlayout）

<cfform name="addReportForm" height="400" width="500" enctype="multipart/form-data">            <!--- Form Initialization ---> 
<p> Report Name </p> 
    <cfinput type="Text" name="reportName" size="20"maxlength="35" label="Report Name"        <!--- Report Name Field ---> 
    value="Report Name" required="yes" id="reportName">  
<p> Report Path </p> 
<cfinput type="Text" name="reportPath" size="20" maxlength="35" label="Report Path"        <!--- Report Path Field ---> 
value="Report Path" required="yes" id="reportPath"> 

<!--- Report Category Dropdown box ---> 
<p> Category </p> 
<cfselect name="category" label="Category" id="categoryBox" message="Select Category"        <!--- DB populated drop down box for reports. Required field. ---> 
width="250" required="yes" tooltip="Select Category">                <!--- Values are static for testing. CFSELECT to be populated by query---> 
<option value="Admin Tools">Admin Tools </option>                 
<option value="Reports">Reports</option> 
<option value="Vendor Tools">Vendor Tools </option> 
<option value="Company Links">Company Links</option> 
<option value="Operations"> Operations</option> 
</cfselect>  
<p> Report Description </p>  
    <cftextarea name="reportDescrip" size="20" maxlength="200" label="Report Description" 
value=" Enter Report Description" required="yes" id="reportDescrip" width="600" height="250"> 
</cftextarea> 
<br /> 
<br /> 
<cfinput type="button" name="createReport" label="Add New Report" value="Add New Report" id="createReport"/> 
</cfform> 

罐有人告诉我，我可能会做错了，它不工作。

更新：我打开了IE控制台和脚本有一个SCRIPT1010：该行预期的标识符错误： **成功：函数（）{

警报（“您已成功添加了一个新的报告。系统“）} **

更新：消除了CF flash表单和指定的HTML作为cfform中的表单类型。 AJAX调用仍然不起作用。

Answer 1

我能够解决与解决cfc路径有关的问题。工作代码如下。

解决方案：

AJAX：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script language="javascript"> 

    $(document).ready(function() { 
     $("#createReport").click(function(f) { 
      var getReportName = $("input#reportName").val(); 
      var getReportPath = $("input#reportPath").val(); 
      var getReportDesc = $("input#reportDescrip").val(); 
      //var getCategory = $("input#categoryBox").val(); 


      $.ajax({ 
       type:"POST", 
       url: "http://10.11.2.60/testFolder/bidirectionalreporting/codetest/components/coldfusionFunction.cfc?method=testFunc&returnformat=json", 
       dataType: "JSON", 
       data:{ 
         reportName: getReportName, 
         reportPath: getReportPath, 
         reportDescrip: getReportDesc 
         //categoryBox: getCategory 

       }, 
       success: function(result){ 
        alert("You successfully added a new report to the system") } 
    }); 
     }); 
    }); 


</script> 

ColdFusion的：

<!--- CF AJAX function to create new report in DB---> 
    <cffunction name="testFunc" access="remote" description="tests the AJAX functionality and query">  <!--- Function takes in variables from CF page and AJAX call ---> 
    <cfargument name="mathVariable" default="8978" type="any">            <!--- This is just a test argument to verify ajax works before adding new fields---> 
    <cfargument name="reportName" default="" type="any">             <!--- This argument maps to the like named form field and is passed through AJAX call--->     
    <cfargument name="reportPath" default="" type="any">             <!--- This argument maps to the like named form field and is passed through AJAX call---> 
    <cfargument name="reportDescrip" default="" type="any" >            <!--- This argument maps to the like named form field and is passed through AJAX call---> 
    <cfargument name="categoryBox" default="Vendor Management" type="any">         <!--- This argument maps to the like named form field and is passed through AJAX call---> 

    <cfquery name="qryTest" datasource="First_Title_Main_Dev">            <!--- Query creates a new report in the master report list table---> 
    INSERT INTO Report_Master_List (Report_Name, URL, Report_Desc, Category) 

     VALUES (<cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportName#">,     <!--- report name form field references Report_Name column---> 
       <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportPath#">,     <!--- report path form field references ReportPath column---> 
       <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportDescrip#">,    <!--- report descrip form field references ReportDescrip column ---> 
</cffunction 

Answer 2

看着你的代码，你有format="flash"在你的cfform。这将使用Flash而不是HTML呈现表单。因此，由于没有HTML表单元素，jQuery无法读取表单值。如果您将其更改为format="html"，那么至少您将拥有一个HTML表单，然后您可以开始深入JavaScript代码并修复这些问题。

唯一需要注意的是在你的jQuery代码中。确保您使用的#符号不在cfoutput块内，否则Javascript将无法按照您的预期渲染。