1

我正在尝试使这个简单的 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>
4

3 回答 3

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">

例如，您还可以删除完整的表单，如果您在成功函数中（在带有成功容器的行之后）添加

$("#icpsignupAAAA").hide();
于 2012-09-04T00:07:33.917 回答
0

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

<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">
于 2012-09-05T19:32:31.347 回答
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 请求被认为是失败的。

于 2015-11-05T12:42:18.480 回答