使用没有提交类型的按钮提交表单数据

时间:2016-05-24 13:30:06

标签: jquery ajax coldfusion

我正在尝试提交表单数据,以便从没有提交类型的按钮创建会话变量(因为它是预先制作的)。我试图用ajax做到这一点。

按钮的创建方式如下:

<a aria-controls="processing" tabindex="0" id="ToolTables_processing_1" class="DTTT_button DTTT_button_pdf"><span>PDF</span></a>

我尝试创建一个表单提交和ajax调用,如下所示:

$('#ToolTables_processing_1').on('click', function () {
            $.ajax({
                // the location of the CFC to run
                url: "redirects/selectedrows.cfm",
                // send a GET HTTP operation
                type: "post",
                // tell jQuery we're getting JSON back
                dataType: "json",
                // send the data to the CFC
                 data: $('#form').serialize(),
                // this gets the data returned on success
                success: function (data) {
                    console.log(data);
                    //window.location = 'forms/exitinterviewpdf.cfm';
                }, 
                // this runs if an error
                error: function (xhr, textStatus, errorThrown) {
                    // show error
                    console.log(errorThrown);
                }
            });
        });

但是表单只是提交并且没有执行ajax调用。如果我删除$('#form').submit();,我会收到此错误:enter image description here

enter image description here

我的重定向/ selectedrows.cfm

<cfset session.exitinterview.selected.selectedRowName = form.selectedRowName >
<cfset session.exitinterview.selected.selectedRowtodayDate = form.selectedRowtodayDate >
<cfset session.exitinterview.selected.selectedRowtitle = form.selectedRowtitle >
<cfset session.exitinterview.selected.selectedRowdepartment = form.selectedRowdepartment >
<cfset session.exitinterview.selected.selectedRowhireDate = form.selectedRowhireDate >
<cfset session.exitinterview.selected.selectedRowterminationDate = form.selectedRowterminationDate >
<cfset session.exitinterview.selected.selectedRowreasonLeaving = form.selectedRowreasonLeaving >
<cfset session.exitinterview.selected.selectedRowfeelPay = form.selectedRowfeelPay >
<cfset session.exitinterview.selected.selectedRowprogressHere = form.selectedRowprogressHere >
<cfset session.exitinterview.selected.selectedRowanotherJob = form.selectedRowanotherJob >
<cfset session.exitinterview.selected.selectedRowcomparewith = form.selectedRowcomparewith >
<cfset session.exitinterview.selected.selectedRowhigherSalary = form.selectedRowhigherSalary >
<cfset session.exitinterview.selected.selectedRowpreventLeaving = form.selectedRowpreventLeaving >
<cfset session.exitinterview.selected.selectedRowclearlyExplained = form.selectedRowclearlyExplained >
<cfset session.exitinterview.selected.selectedRowbyWhom = form.selectedRowbyWhom >
<cfset session.exitinterview.selected.selectedRowadequateTraining = form.selectedRowadequateTraining >
<cfset session.exitinterview.selected.selectedRowworkPerform = form.selectedRowworkPerform >
<cfset session.exitinterview.selected.selectedRowworkingCondition = form.selectedRowworkingCondition >
<cfset session.exitinterview.selected.selectedRowsalary = form.selectedRowsalary >
<cfset session.exitinterview.selected.selectedRowretirement = form.selectedRowretirement >
<cfset session.exitinterview.selected.selectedRowhealthPlan = form.selectedRowhealthPlan >
<cfset session.exitinterview.selected.selectedRowtuition = form.selectedRowtuition >
<cfset session.exitinterview.selected.selectedRowunileave = form.selectedRowunileave >
<cfset session.exitinterview.selected.selectedRowcoworkers = form.selectedRowcoworkers >
<cfset session.exitinterview.selected.selectedRowsupervisionReceived = form.selectedRowsupervisionReceived >
<cfset session.exitinterview.selected.selectedRowneededHelp = form.selectedRowneededHelp >
<cfset session.exitinterview.selected.selectedRowmanagerRespond = form.selectedRowmanagerRespond >
<cfset session.exitinterview.selected.selectedRowsuggestionsBetterPlace = form.selectedRowsuggestionsBetterPlace >
<cfset session.exitinterview.selected.selectedRowrealReasonForLeaving = form.selectedRowrealReasonForLeaving >
<cfset session.exitinterview.selected.selectedRowcomments = form.selectedRowcomments >

<cfoutput>#SerializeJSON(session.exitinterview.selected)#</cfoutput>

表单字段

<form id="form" name="form">
<input id="selectedRowName" name="selectedRowName" type="text"/>
<input name="selectedRowtodayDate" id="selectedRowtodayDate" type="text"/>
<input id="selectedRowtitle" name="selectedRowtitle" type="text"/>
<input id="selectedRowdepartment" name="selectedRowdepartment" type="text"/>
<input id="selectedRowhireDate" name="selectedRowhireDate" type="text"/>
<input id="selectedRowterminationDate" name="selectedRowterminationDate" type="text"/>
<input id="selectedRowreasonLeaving" name="selectedRowreasonLeaving" type="text"/>
<input id="selectedRowfeelPay" name="selectedRowfeelPay" type="text"/>
<input id="selectedRowprogressHere" name="selectedRowprogressHere" type="text"/>
<input id="selectedRowanotherJob" name="selectedRowanotherJob" type="text"/>
<input id="selectedRowcomparewith" name="selectedRowcomparewith" type="text"/>
<input id="selectedRowhigherSalary" name="selectedRowhigherSalary" type="text"/>
<input id="selectedRowpreventLeaving" name="selectedRowpreventLeaving" type="text"/>
<input id="selectedRowclearlyExplained" name="selectedRowclearlyExplained" type="text"/>
<input id="selectedRowbyWhom" name="selectedRowbyWhom" type="text"/>
<input id="selectedRowadequateTraining" name="selectedRowadequateTraining" type="text"/>
<input id="selectedRowworkPerform" name="selectedRowworkPerform" type="text"/>
<input id="selectedRowworkingCondition" name="selectedRowworkingCondition" type="text"/>
<input id="selectedRowsalary" name="selectedRowsalary" type="text"/>
<input id="selectedRowretirement" name="selectedRowretirement" type="text"/>
<input id="selectedRowhealthPlan" name="selectedRowhealthPlan" type="text"/>
<input id="selectedRowtuition" name="selectedRowtuition" type="text"/>
<input id="selectedRowunileave" name="selectedRowunileave" type="text"/>
<input id="selectedRowcoworkers" name="selectedRowcoworkers" type="text"/>
<input id="selectedRowsupervisionReceived" name="selectedRowsupervisionReceived" type="text"/>
<input id="selectedRowneededHelp" name="selectedRowneededHelp" type="text"/>
<input id="selectedRowmanagerRespond" name="selectedRowmanagerRespond" type="text"/>
<input id="selectedRowsuggestionsBetterPlace" name="selectedRowsuggestionsBetterPlace" type="text"/>
<input id="selectedRowrealReasonForLeaving" name="selectedRowrealReasonForLeaving" type="text"/>
<input id="selectedRowcomments" name="selectedRowcomments" type="text"/>
</form>

为了更好地了解最新情况 enter image description here

在Chrome错误中: enter image description here

enter image description here

firefox帖子
enter image description here

或者有没有办法只传递我在控制台中创建的对象的值?

如果我删除datatype:json,我最终得到一个空字符串...... enter image description here

1 个答案:

答案 0 :(得分:1)

在您进行提交调用的那一刻,页面期望被控制器重定向,因此 form.submit()之后的代码将不会被执行。

但你可以通过ajax进行调用并继续执行其他任务:

$('#ToolTables_processing_1').on('click', function (e) {
            $.ajax({
                // the location of the CFC to run
                url: "/pageToProcessTheForm",
                // send a GET HTTP operation
                type: "post",
                // send the data to the CFC
                 data: $('#form').serialize(),
                // this gets the data returned on success
                success: function (data) {
                    console.log(data);
                    //here you add all the business logic needed according to the server response
                    window.location = 'forms/exitinterviewpdf.cfm';
                }, 
                // this runs if an error
                error: function (xhr, textStatus, errorThrown) {
                    // show error
                    console.log(errorThrown);
                }
            });
        });