我正在尝试创建一个将客户姓名和电子邮件地址发送到 icontact(电子邮件列表应用程序)的表单。
icontact 的所有值都是正确的,如果我像往常一样提交表单,icontact 会回复它添加了电子邮件地址。成功消息加载到 icontact 网站的新页面中。
我想要完成的是 ajax 将发送表单并在当前页面中返回成功消息,而不会将客户发送到新页面。
对于那些无法通过 ajax 提交 icontact 表单的人,请尝试以下操作:
$.get("https://app.sandbox.icontact.com/icp/signup.php", { listid: "xxx", "specialid:xxx": "xxx",clientid : "xxx",fields_email: 'test@gmail.com' }, function(){
alert('email added to the list :)');
} );
用所需的参数替换 xxx :)
在你的情况下,我认为:
preventDefault将阻止提交按钮的正常行为,即遵循表单的操作 URL。
$('#frmSubmit').click(function(e) {
e.preventDefault();
}
如果这不起作用,您可以尝试在成功函数中返回 false:
$('#change-form')
.jqTransform()
.validate({
submitHandler: function(form) {
$(form).ajaxForm({
success: function() {
$('#change-form').hide();
$('#frmWrap').append("<p class='thanks'>Thanks! Your request has been sent.</p>")
return false;
}
});
}
});
编辑:您可以尝试的另一件事是在 onsubmit 事件中附加“return false”:
<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" accept-charset="UTF-8" id="change-form" onsubmit="return false;">
<form>
Email<br />
<input type="text" name="email" id="email" class="text" /><br />
First Name<br />
<input type="text" name="fname" id="fname" class="text" /><br />
Last Name<br />
<input type="text" name="lname" id="lname" class="text" /><br />
<input type="submit" id="submit" onclick="icontact_submit(); return false;"/>
</form>
<script type="text/javascript">
function icontact_submit()
{
//grab data from data
var email = $('#email').val();
var first_name = $('#fname').val();
var last_name = $('#lname').val();
//do some validation here
//if validation pass do this
$.post("https://app.icontact.com/icp/signup.php", { listid:"xxxxx", "specialid:xxxx":"xxxx", clientid:"xxxxx", fields_email:email, fields_fname:first_name, fields_lname:last_name }, function(){
alert('email added to the list :)'); //this does not seem to work yet though
});
//else validation failed, do some of this
}
</script>
一种选择是摆脱具有提交按钮的表单,而不是使用按钮并具有 JavaScript onClick 处理程序。在 onClick 处理程序中,您应该使用 AJAX 在 POST 请求中发送表单中的数据,然后捕获响应。当你得到响应时,使用 jQuery 来修改你想要修改的任何 div 表单,或者做一个重定向,或者其他什么。
我认为真正的问题是,默认情况下,表单提交总是在表单标签的 action 属性中加载新页面,因此您不能依赖 HTML 表单提交方法。
可能还有其他更有效的方法(尤其是使用 jQuery,我不太了解),但我提出的算法应该可以工作。
请参阅jQuery Ajax。
$.ajax({
type: "POST",
url: "some.php",
data: $("#idform").serialize(),
success: function(msg){
alert( "Data Saved: " + msg );
}
})
;
我把 icontact 排除在外,一切都按计划进行。所以问题不在于代码,而在于 icontact 如何处理他们的 php。我将不得不与他们取得联系以获得真正的解决方案。
感谢大家的帮助和建议!如果没有您,我的故障排除将无法解决。