Question

JQuery和Ajax有点新鲜，但我有一个简单的邮件表单，我试图使用JQUERY发布以防止页面重新加载。

以下是示例页面：DetailInfo.cfm。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$(document).ready(function() { $("#frmSubmit").submit(sendForm) });     

function SubmitForm()
{
Tbody = document.getElementById("txtBody");

if(Tbody.value == '')
    alert('Please enter some text for your message.');
else
{               
    $("#frmSubmit").submit(sendForm);
              //frmSubmit.submit();             
}
}           

function sendForm() 
{               
    $.post('DetailInfo.cfm',$("#frmSubmit").serialize(),function(data,status){      
        $("#result").html(data)
    });
    alert('Email Sent');
    return false
}       
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email Test</title>
</head>

<body>

<cfif isdefined("form.txtBody")>
    <CFMAIL TO=somedued@place.com
     FROM=anotherplace@some.com
     SUBJECT= "Thank you for submitting the information">Message below sent from user #Session.UserID# , the info to be updated is the following:

     #form.txtBody#

     </CFMAIL> 

 <cfelse>

    <form method="post" name="frmSubmit" id="frmSubmit" action="DetailInfo.cfm">
                            <table id="tblError" name="tblError" >          
                            <tr><td colspan="2" class="ui-widget-content" align="center">Suggested Detail to Submit</td></tr>
                             <tr><td colspan="2" class="ui-widget-content">System does not recognize detail. Please provide a suggested name. Click Send when done.</td></tr>
                             <tr><td colspan="2" class="ui-widget-content" valign="top">Comments: </td></tr>
                             <tr><td class="ui-widget-content" ><textarea cols="75" rows="5" id="txtBody" name="txtBody" class="ui-widget-content"></textarea></td><td class="ui-widget-content" ><input type="button" id="btnSubmit" value="Send" class="ui-widget-content" align="middle" onclick="SubmitForm();" /></td></tr>
                     <tr><td  class="ui-widget-content" colspan="2" align="center"><div id="dvMessage"></div></td></tr>
                     </table></form>  
  </cfif>                     
</body>
</html>

我正在使用这种方法，因为这个页面将在一个模态窗口中理想地打开，当我发布时，我不希望父页面消失。还仅用于测试我在地址上输入硬编码的电子邮件。

问题是当我通过注释掉的行呼叫正常提交时：

frmSubmit.submit();

表单发布电子邮件，我明白了。但是我试图使用上面的方法，当我点击发送时，没有任何东西在视觉上发生（这很好），但电子邮件没有被发送。

我无法通过

的代码解决这个问题

$("#frmSubmit").submit(sendForm);

我被告知的另一个建议是使用PreventDefault，但我在代码中的一些地方尝试了这个并且没有用。

知道为什么电子邮件不会出去？非常感谢。这是一个真正简单的页面，应该可以解决我的问题，但我的JQuery和AJAX体验有限，为什么这不起作用。

由于

Answer 1

创建2个页面，form.cfm用于表单，action.cfm用于操作（当从表单页面调用ajax时发送电子邮件）。

以下是form.cfm的代码

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>

        function SubmitForm(){

            $.ajax({
                type: "POST",
                url: "action.cfm",
                data: $( "#frmSubmit" ).serialize(),
                dataType: "text",
                success: function(data, status) {
                    alert(data);
                    console.log(status);
                }
            });

        };

    </script>

    <title>Email Test</title>

</head>

<body>

    <form method="post" name="frmSubmit" id="frmSubmit" action="DetailInfo.cfm">
        <table id="tblError" name="tblError" >          
            <tr><td colspan="2" class="ui-widget-content" align="center">Suggested Detail to Submit</td></tr>
            <tr><td colspan="2" class="ui-widget-content">System does not recognize detail. Please provide a suggested name. Click Send when done.</td></tr>
            <tr><td colspan="2" class="ui-widget-content" valign="top">Comments: </td></tr>
            <tr><td class="ui-widget-content" ><textarea cols="75" rows="5" id="txtBody" name="txtBody" class="ui-widget-content"></textarea></td><td class="ui-widget-content" ><input type="button" id="btnSubmit" value="Send" class="ui-widget-content" align="middle" onclick="SubmitForm();" /></td></tr>
            <tr><td  class="ui-widget-content" colspan="2" align="center"><div id="dvMessage"></div></td></tr>
        </table>

    </form>                     

</body>

</html>

这是action.cfm的代码

<cfsilent>
    <cfmail to="somedued@place.com" from="anotherplace@some.com" subject="Thank you for submitting the information">

        #form.txtBody#

    </cfmail>
    <cfset data = "email sent OK" />
</cfsilent><cfoutput>#data#</cfoutput>

在coldfusion页面中的Ajax帖子，电子邮件未触发

1 个答案: