强制iContact注册表单不会重定向到其他页面

时间:2012-09-04 00:02:25

标签: jquery html ajax forms

我正在尝试将这个简单的iContact表单重定向到成功页面或错误页面。我只是希望我的访问者提交表单而不会被重定向到页面或重新加载页面。

我一直在四处寻找,但我无法解决这个问题。这是我的iContact表单代码(我替换了我的帐户信息):

<style>
.link,
.link a,
.signupframe
{
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    }
    .link,
    .link a {
        text-decoration: none;
        }
    .signupframe {
        border: 1px solid #000000;
        background: #ffffff;
        }
.signupframe .required {
    font-size: 10px;
    }
</style>
<form method="post" action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignupAAAA" accept-charset="UTF-8" onsubmit="return verifyRequiredAAAA();" >
<input type="hidden" name="redirect" value="http://www.icontact.com/www/signup/thanks.html">
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">

<div id="SignUp">
<table width="260" class="signupframe" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td valign="top" align="right">
        <span class="required">*</span> Email
      </td>
      <td align="left">
        <input type="text" name="fields_email">
      </td>
    </tr>
    <input type="hidden" name="listid" value="42379">
    <input type="hidden" name="specialid:42379" value="O6IC">

    <input type="hidden" name="clientid" value="954091">
    <input type="hidden" name="formid" value="4616">
    <input type="hidden" name="reallistid" value="1">
    <input type="hidden" name="doubleopt" value="0">
    <tr>
      <td> </td>
      <td><span class="required">*</span> = Required Field</td>
    </tr>
    <tr>
      <td> </td>
      <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
    </table>
</div>
</form>
<script type="text/javascript">

var icpForm4616 = document.getElementById('icpsignupAAAA');

if (document.location.protocol === "https:")

    icpForm4616.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired4616() {
  if (icpForm4616["fields_email"].value == "") {
    icpForm4616["fields_email"].focus();
    alert("The Email field is required.");
    return false;
  }


return true;
}
</script>

3 个答案:

答案 0 :(得分:0)

使用AJAX发布表单而不是提交。使用与上面相同的onSubmit调用,只需通过AJAX发布它然后返回false(表单永远不会发布到action属性值)。在下面的例子中,我使用jQuery库来实现ajax函数,所以如果你没有它,你必须下载并安装它...

在底部删除你的javascript,然后添加它。确保已在FTP中下载并安装了jQuery文件。还要使用html,head和body标记正确添加HTML结构:http://www.w3.org/TR/html401/struct/global.html#h-7.1

<script type="text/javascript" src="/js/jquery.1.7.2.min.js"></script>
<script type="text/javascript">
 function verifyRequiredAAAA()
 { 

   var eReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; // regex to check valid email
   var email = $('input[name="fields_email"]').val();
   if (email == "") {
      $('input[name="fields_email"]').focus();
      alert("The Email field is required.");
      return false;
   } else if (!eReg.test(email)) {
      $('input[name="fields_email"]').focus();
      alert("The Email address is incorrect.");
      return false;
   } else {
      $.post("https://app.icontact.com/icp/signup.php",
            $("#icpsignupAAAA").serialize(), function(data){
                  $('#successcontainer').html(data);
            });
            return false;
   }
 } 

</script>

然后在你的HTML中放入一个容器以获得潜在的成功消息:

<div id="successcontainer"></div>

(这里的消息来自你的PHP脚本(PHP应该返回一些东西......))

将您的FORM标记更改为:

 <form id="icpsignup4616" onsubmit="return verifyRequired4616()" accept-charset="UTF-8" name="icpsignup" action="" method="post">

你也可以删除完整的表格,如果你在成功函数中(在带有successcontainer的行之后)添加

$("#icpsignupAAAA").hide();

答案 1 :(得分:0)

将这些行中的值更改为您希望在成功或错误时重定向到的网址。

<input type="hidden" name="redirect" value="http://www.icontact.com/www/signup/thanks.html">
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">

答案 2 :(得分:0)

由于跨域(CORS)限制,似乎无法做到你想要的。如果您尝试按照建议使用jQuery解决方案,那么您将获得以下内容:

XMLHttpRequest cannot load https://app.icontact.com/icp/signup.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

<强>更新

Thr请求似乎确实到达了iContact服务器。但是,除了控制台中的该错误之外,AJAX请求被视为失败。